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

Introduction_To_React.pdf

Randy Vianda Putra
April 27, 2019
0
280

 Introduction_To_React.pdf

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
randyviandaputra
0
210
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
220
Berkarir Sebagai Frontend Developer
randyviandaputra
1
430
Introduction to Full Stack JS
randyviandaputra
1
190
Intro to React 360
randyviandaputra
0
330
Micro_Frontend.pdf
randyviandaputra
2
390
react_native_training.pdf
randyviandaputra
0
260

Featured

See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Music & Morning Musume
bryan
46
6.2k
Designing the Hi-DPI Web
ddemaree
280
34k
Code Reviewing Like a Champion
maltzj
520
39k
Become a Pro
speakerdeck
PRO
25
5k
For a Future-Friendly Web
brad_frost
175
9.4k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
We Have a Design System, Now What?
morganepeng
50
7.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k

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?