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
240
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
180
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
200
Berkarir Sebagai Frontend Developer
randyviandaputra
1
350
Introduction to Full Stack JS
randyviandaputra
1
160
Intro to React 360
randyviandaputra
0
270
Micro_Frontend.pdf
randyviandaputra
2
310
react_native_training.pdf
randyviandaputra
0
220
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
For a Future-Friendly Web
brad_frost
170
8.9k
Code Review Best Practice
trishagee
54
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
We Have a Design System, Now What?
morganepeng
42
6.7k
Optimizing for Happiness
mojombo
369
69k
Adopting Sorbet at Scale
ufuk
66
8.5k
Designing for Performance
lara
601
67k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
57
14k
Statistics for Hackers
jakevdp
789
220k
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?