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
React
Search
James Hughes
July 29, 2014
Programming
2
710
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
120
Tyrannosaurus Rx
kouphax
0
120
Play for (Java|Scala)
kouphax
0
110
Devops: A Case Study
kouphax
0
77
Scala for C# Developers
kouphax
5
2.6k
Dropwizard - Production Ready Web Services
kouphax
3
1.5k
Scala for Fun & Profit
kouphax
4
630
What Agile Means To Me
kouphax
0
140
Neo4J: A Case Study
kouphax
3
640
Other Decks in Programming
See All in Programming
エンジニア向け採用ピッチ資料
inusan
0
140
エラーって何種類あるの?
kajitack
5
280
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
280
XSLTで作るBrainfuck処理系
makki_d
0
210
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
380
無関心の谷
kanayannet
0
180
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
複数アプリケーションを育てていくための共通化戦略
irof
10
4k
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
XP, Testing and ninja testing
m_seki
2
130
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
150
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
Featured
See All Featured
Side Projects
sachag
455
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Adopting Sorbet at Scale
ufuk
77
9.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Cult of Friendly URLs
andyhume
79
6.4k
Documentation Writing (for coders)
carmenintech
71
4.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Visualization
eitanlees
146
16k
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