Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Introduction_To_React.pdf
Randy Vianda Putra
April 27, 2019
0
65
Introduction_To_React.pdf
Randy Vianda Putra
April 27, 2019
Tweet
Share
More Decks by Randy Vianda Putra
See All by Randy Vianda Putra
randyviandaputra
0
53
randyviandaputra
1
120
randyviandaputra
1
32
randyviandaputra
0
88
randyviandaputra
3
79
randyviandaputra
0
41
Featured
See All Featured
brianwarren
82
4.7k
zenorocha
296
40k
samlambert
237
10k
morganepeng
93
14k
chriscoyier
683
180k
sferik
610
54k
bryan
31
3.4k
trishagee
24
2.5k
aarron
257
36k
lemiorhan
627
43k
shlominoach
176
7.5k
jlugia
217
16k
Transcript
Introduction To React
Randy Vianda Putra, live in Bandung - Software Engineer @Docotel
- Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello! modulloe@gmail.com github.com/randyviandaputra @randyvp
Agenda - What is React - Who’s using React -
Concept of React - Why React - Fundamental React - Build first app using React
Let’s Start
What is React ? ?
What is React ? A Javascript Library for building UI
(User Interfaces), not a framework like Backbone, Angular etc, the V in MVC
Who’s using React ? ?
Who’s using React ?
Concept of React ? ?
Concept of React ? Component Virtual DOM JSX One Way
DataFlow
Component ? ?
Build Component, not template
None
Virtual DOM ? ?
None
JSX ? ?
None
Controller View
None
https:/ /babeljs.io
One Way DataFlow ? ?
None
Why React ? ?
“ LEARN ONCE, WRITE ANYWHERE 24
“ VIRTUAL DOM IS CRAZY FAST! Makes re-rendering on every
change fast 25
“ Component Based Is the future of web development 26
“ React dev tools React Chrome extension make debugging so
much easier 27
“ Easy to read and understand views 28
“ Facebook are maintaining this project 29
https:/ /github.com/adam-golab/react-developer-roadmap
Install React $ npm install -g create-react-app $ create-react-app todoapp-devtalk
Fundamentals React ?
Component Stateless (function) Statefull (class) Represent a piece of UI
None
Props - Passed down to component from parent component and
represents data for the component - accessed via this.props
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
Let’s Live Coding
Source Code https:/ /github.com/randyviandaputra/todoapp-devtalk
39 Thanks Any questions?