Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React
James Hughes
July 29, 2014
Programming
2
650
React
Workshop covering React: A Library for Building User Interfaces.
James Hughes
July 29, 2014
Tweet
Share
More Decks by James Hughes
See All by James Hughes
Functional Programming with Clojure
kouphax
1
87
Tyrannosaurus Rx
kouphax
0
73
Play for (Java|Scala)
kouphax
0
88
Devops: A Case Study
kouphax
0
55
Scala for C# Developers
kouphax
5
2.5k
Dropwizard - Production Ready Web Services
kouphax
3
1.3k
Scala for Fun & Profit
kouphax
3
600
What Agile Means To Me
kouphax
0
110
Neo4J: A Case Study
kouphax
3
550
Other Decks in Programming
See All in Programming
データ分析やAIの "運用" について考える
mmorito
0
150
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
2k
LINE Messaging APIの概要 - LINE API総復習シリーズ
uezo
1
190
Vite でお手軽 Vue.js の環境構築
azuki
2
190
Jetpack Compose best practices 動画紹介 @GoogleI/O LT会
takakitojo
0
400
React Nativeアプリを DDDで開発している話
nihemak
0
160
Amazon ECSのネットワーク関連コストの話
msato
0
660
iOS 16からのロック画面Widget争奪戦に備える
tsuzuki817
0
260
大規模プロダクトにLinterを導入し運用している話
hirokiotsuka
0
240
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
390
Get Ready for Jakarta EE 10
ivargrimstad
0
1.2k
git on intellij
hiroto_kitamura
0
170
Featured
See All Featured
Become a Pro
speakerdeck
PRO
3
850
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
Intergalactic Javascript Robots from Outer Space
tanoku
261
25k
Web development in the modern age
philhawksworth
197
9.3k
Music & Morning Musume
bryan
35
4.2k
Web Components: a chance to create the future
zenorocha
303
40k
Designing Experiences People Love
moore
130
22k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.3k
The Cult of Friendly URLs
andyhume
68
4.8k
Design by the Numbers
sachag
271
17k
Docker and Python
trallard
27
1.6k
Transcript
REACT A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW HOW IT WORKS A BASIC COMPONENT A STATEFUL COMPONENT
DESIGNING THE APP BUILDING THE APP
OVERVIEW
LOTS OF PEOPLE USE REACT AS THE V IN MVC.
SINCE REACT MAKES NO ASSUMPTIONS ABOUT THE REST OF YOUR TECHNOLOGY STACK, IT'S EASY TO TRY IT OUT ON A SMALL FEATURE IN AN EXISTING PROJECT. “ ” JUST THE UI http://facebook.github.io/react/
REACT USES A VIRTUAL DOM DIFF IMPLEMENTATION FOR ULTRA-HIGH PERFORMANCE.
IT CAN ALSO RENDER ON THE SERVER USING NODE.JS — NO HEAVY BROWSER DOM REQUIRED. “ ” VIRTUAL DOM http://facebook.github.io/react/
REACT IMPLEMENTS ONE-WAY REACTIVE DATA FLOW WHICH REDUCES BOILERPLATE AND
IS EASIER TO REASON ABOUT THAN TRADITIONAL DATA BINDING. “ ” DATA FLOW http://facebook.github.io/react/
HOW IT WORKS
COMPONENTS VIRTUAL DOM ACTUAL DOM
COMPONENTS VIRTUAL DOM ACTUAL DOM
COMPONENTS VIRTUAL DOM ACTUAL DOM
COMPONENTS VIRTUAL DOM ACTUAL DOM
COMPONENTS VIRTUAL DOM ACTUAL DOM
A BASIC COMPONENT
COMPONENT FUNDAMENTALS PROPS JSX OR REACT.DOM GOALS
A STATEFUL COMPONENT
STATE STATE VS PROPS COMPONENT LIFECYCLE GOALS
componentWillMount componentDidMount componentWillUnmount shouldComponentUpdate componentWillUpdate componentDidUpdate getInitialState DOES NOT COVER
EVERY METHOD
DESIGNING THE APP
BUILDING THE APP