Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction_To_React.pdf

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Randy Vianda Putra Randy Vianda Putra
April 27, 2019
0
300

 Introduction_To_React.pdf

Avatar for Randy Vianda Putra

Randy Vianda Putra

April 27, 2019
Tweet

More Decks by Randy Vianda Putra

See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
0
240
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
250
Berkarir Sebagai Frontend Developer
Avatar for Randy Vianda Putra randyviandaputra
1
480
Introduction to Full Stack JS
Avatar for Randy Vianda Putra randyviandaputra
1
220
Intro to React 360
Avatar for Randy Vianda Putra randyviandaputra
0
360
Micro_Frontend.pdf
Avatar for Randy Vianda Putra randyviandaputra
2
420
react_native_training.pdf
Avatar for Randy Vianda Putra randyviandaputra
0
290

Featured

See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
900
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.1k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
51

Transcript

  1. Introduction To React

  2. Randy Vianda Putra, live in Bandung - Software Engineer @Docotel

    - Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello! [email protected] github.com/randyviandaputra @randyvp

  3. Agenda - What is React - Who’s using React -

    Concept of React - Why React - Fundamental React - Build first app using React

  4. Let’s Start

  5. What is React ? ?

  6. What is React ? A Javascript Library for building UI

    (User Interfaces), not a framework like Backbone, Angular etc, the V in MVC

  7. Who’s using React ? ?

  8. Who’s using React ?

  9. Concept of React ? ?

  10. Concept of React ? Component Virtual DOM JSX One Way

    DataFlow

  11. Component ? ?

  12. Build Component, not template

  13. None

  14. Virtual DOM ? ?

  15. None

  16. JSX ? ?

  17. None

  18. Controller View

  19. None

  20. https:/ /babeljs.io

  21. One Way DataFlow ? ?

  22. None

  23. Why React ? ?

  24. “ LEARN ONCE, WRITE ANYWHERE 24

  25. “ VIRTUAL DOM IS CRAZY FAST! Makes re-rendering on every

    change fast 25

  26. “ Component Based Is the future of web development 26

  27. “ React dev tools React Chrome extension make debugging so

    much easier 27

  28. “ Easy to read and understand views 28

  29. “ Facebook are maintaining this project 29

  30. https:/ /github.com/adam-golab/react-developer-roadmap

  31. Install React $ npm install -g create-react-app $ create-react-app todoapp-devtalk

  32. Fundamentals React ?

  33. Component Stateless (function) Statefull (class) Represent a piece of UI

  34. None

  35. Props - Passed down to component from parent component and

    represents data for the component - accessed via this.props

  36. State - Represents internal state of the component - Accessed

    via this.state - When a component's state data changes, the rendered markup will be updated by re-invoking render() method

  37. Let’s Live Coding

  38. Source Code https:/ /github.com/randyviandaputra/todoapp-devtalk

  39. 39 Thanks Any questions?