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
720
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
120
Devops: A Case Study
kouphax
0
78
Scala for C# Developers
kouphax
5
2.6k
Dropwizard - Production Ready Web Services
kouphax
3
1.6k
Scala for Fun & Profit
kouphax
4
630
What Agile Means To Me
kouphax
0
140
Neo4J: A Case Study
kouphax
3
650
Other Decks in Programming
See All in Programming
新世界の理解
koriym
0
130
decksh - a little language for decks
ajstarks
4
21k
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
410
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
790
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
230
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
380
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
440
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
930
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
280
DataformでPythonする / dataform-de-python
snhryt
0
150
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
770
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Gamification - CAS2011
davidbonilla
81
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing for humans not robots
tammielis
253
25k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Navigating Team Friction
lara
188
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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