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
700
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
110
Play for (Java|Scala)
kouphax
0
110
Devops: A Case Study
kouphax
0
70
Scala for C# Developers
kouphax
5
2.6k
Dropwizard - Production Ready Web Services
kouphax
3
1.5k
Scala for Fun & Profit
kouphax
4
620
What Agile Means To Me
kouphax
0
130
Neo4J: A Case Study
kouphax
3
630
Other Decks in Programming
See All in Programming
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.2k
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
690
Ruby's Line Breaks
yui_knk
2
460
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
880
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
830
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
120
Qiita Bash
mercury_dev0517
1
180
remix + cloudflare workers (DO) docker上でいい感じに開発する
yoshidatomoaki
0
130
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
970
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Webinar 2025
danielsogl
0
120
リストビュー画面UX改善の振り返り
splcywolf
0
120
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
How to train your dragon (web standard)
notwaldorf
91
6k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Rails Girls Zürich Keynote
gr2m
94
13k
Six Lessons from altMBA
skipperchong
27
3.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
380
Music & Morning Musume
bryan
47
6.5k
Site-Speed That Sticks
csswizardry
5
480
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Git: the NoSQL Database
bkeepers
PRO
430
65k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
104
19k
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