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
110
Tyrannosaurus Rx
kouphax
0
110
Play for (Java|Scala)
kouphax
0
110
Devops: A Case Study
kouphax
0
68
Scala for C# Developers
kouphax
5
2.6k
Dropwizard - Production Ready Web Services
kouphax
3
1.5k
Scala for Fun & Profit
kouphax
4
610
What Agile Means To Me
kouphax
0
120
Neo4J: A Case Study
kouphax
3
620
Other Decks in Programming
See All in Programming
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.8k
技術を根付かせる / How to make technology take root
kubode
1
240
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
51
7.4k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Adopting Sorbet at Scale
ufuk
74
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Building an army of robots
kneath
302
45k
Site-Speed That Sticks
csswizardry
3
370
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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