$30 off During Our Annual Pro Sale. View Details »

Introduction_To_React.pdf

Randy Vianda Putra
April 27, 2019
0
170

 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
120
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
150
Berkarir Sebagai Frontend Developer
randyviandaputra
1
280
Introduction to Full Stack JS
randyviandaputra
1
120
Intro to React 360
randyviandaputra
0
200
Micro_Frontend.pdf
randyviandaputra
2
220
react_native_training.pdf
randyviandaputra
0
160

Featured

See All Featured
The Pragmatic Product Professional
lauravandoore
19
3.3k
Side Projects
sachag
451
37k
Automating Front-end Workflow
addyosmani
1352
200k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Gamification - CAS2011
davidbonilla
75
4k
Keith and Marios Guide to Fast Websites
keithpitt
405
21k
Designing for humans not robots
tammielis
244
24k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
Designing the Hi-DPI Web
ddemaree
273
32k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Three Pipe Problems
jasonvnalue
89
8.8k
Practical Orchestrator
shlominoach
178
8.9k

Transcript

  1. Introduction To React

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

    - Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello! modulloe@gmail.com 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?