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
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Typedesign – Prime Four
hannesfritz
40
2.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
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?