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
690
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
100
Tyrannosaurus Rx
kouphax
0
110
Play for (Java|Scala)
kouphax
0
100
Devops: A Case Study
kouphax
0
65
Scala for C# Developers
kouphax
5
2.5k
Dropwizard - Production Ready Web Services
kouphax
3
1.5k
Scala for Fun & Profit
kouphax
3
610
What Agile Means To Me
kouphax
0
120
Neo4J: A Case Study
kouphax
3
600
Other Decks in Programming
See All in Programming
qmuntal/stateless のススメ
sgash708
0
120
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
430
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Fireside Chat
paigeccino
32
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Practical Orchestrator
shlominoach
186
10k
BBQ
matthewcrist
85
9.3k
Statistics for Hackers
jakevdp
796
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
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