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
300
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
230
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
250
Berkarir Sebagai Frontend Developer
randyviandaputra
1
470
Introduction to Full Stack JS
randyviandaputra
1
210
Intro to React 360
randyviandaputra
0
360
Micro_Frontend.pdf
randyviandaputra
2
420
react_native_training.pdf
randyviandaputra
0
290
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
4 Signs Your Business is Dying
shpigford
184
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Writing Fast Ruby
sferik
628
62k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
It's Worth the Effort
3n
185
28k
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?