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
Why Our Code Smells
bkeepers
PRO
337
57k
A designer walks into a library…
pauljervisheath
207
24k
The World Runs on Bad Software
bkeepers
PRO
69
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Raft: Consensus for Rubyists
vanstee
140
7k
Facilitating Awesome Meetings
lara
54
6.4k
How GitHub (no longer) Works
holman
314
140k
Building Applications with DynamoDB
mza
95
6.5k
Practical Orchestrator
shlominoach
188
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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?