Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction_To_React.pdf
Search
Randy Vianda Putra
April 27, 2019
0
290
Introduction_To_React.pdf
Randy Vianda Putra
April 27, 2019
Tweet
Share
More Decks by Randy Vianda Putra
See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
randyviandaputra
0
220
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
240
Berkarir Sebagai Frontend Developer
randyviandaputra
1
450
Introduction to Full Stack JS
randyviandaputra
1
200
Intro to React 360
randyviandaputra
0
340
Micro_Frontend.pdf
randyviandaputra
2
410
react_native_training.pdf
randyviandaputra
0
280
Featured
See All Featured
Docker and Python
trallard
44
3.3k
A better future with KSS
kneath
238
17k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
BBQ
matthewcrist
86
9.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Orchestrator
shlominoach
186
10k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Transcript
Introduction To React
Randy Vianda Putra, live in Bandung - Software Engineer @Docotel
- Frontend Engineer @WorkLifeBeyond - Instructor @Cilsy Hello!
[email protected]
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?