Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
React
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
James Hughes
July 29, 2014
Programming
770
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
React
Workshop covering React: A Library for Building User Interfaces.
James Hughes
July 29, 2014
Transcript
26 slides
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
More Decks by James Hughes
See All by James Hughes
Functional Programming with Clojure
kouphax
1
170
Tyrannosaurus Rx
kouphax
0
150
Play for (Java|Scala)
kouphax
0
170
Devops: A Case Study
kouphax
0
120
Scala for C# Developers
kouphax
5
2.7k
Dropwizard - Production Ready Web Services
kouphax
3
1.7k
Scala for Fun & Profit
kouphax
4
690
What Agile Means To Me
kouphax
0
190
Neo4J: A Case Study
kouphax
3
720
Other Decks in Programming
See All in Programming
Crash Auto Pipelines
veronikapj
1
410
AIがコードを書いてくれる時代、我々は何を確かめるのか
yosuke_furukawa
PRO
13
5.9k
自作Discord音声botをLambda MicroVMsに移行した話 / Migrating My Discord Voice Bot to Lambda MicroVMs
akihisaikeda
1
310
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
marcoroth
2
430
Rails初心者がパスキーを実装してみて大変だったこと
ktombow
0
170
オーケストレーション記述言語 Katari
yukikurage
0
250
우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다
l2hyunwoo
0
260
React Native経験者が Flutterを30⽇間触って驚いたこと
3saito
0
170
Vapor Mode でアクセシビリティは 壊れないか検証した話
fuqda
1
340
社内AIエージェント「Askワンバン」における コストチューニングの取り組み
t0yohei
0
170
SODA - FACT BOOK(EN)
sodainc
1
230
Next.js: The final boss of Web Performance
guaca
0
400
Featured
See All Featured
A better future with KSS
kneath
240
18k
エンジニアに許された特別な時間の終わり
watany
109
250k
4 Signs Your Business is Dying
shpigford
187
23k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.9k
Everyday Curiosity
cassininazir
0
400
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
4
4.4k
Amusing Abliteration
ianozsvald
1
390
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
WCS-LA-2024
lcolladotor
0
990
Building an army of robots
kneath
307
47k
Producing Creativity
orderedlist
PRO
348
41k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
2
520