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
99
Play for (Java|Scala)
kouphax
0
100
Devops: A Case Study
kouphax
0
60
Scala for C# Developers
kouphax
5
2.5k
Dropwizard - Production Ready Web Services
kouphax
3
1.4k
Scala for Fun & Profit
kouphax
3
610
What Agile Means To Me
kouphax
0
120
Neo4J: A Case Study
kouphax
3
590
Other Decks in Programming
See All in Programming
Containerization Tips and Tricks for PHP apps
dunglas
2
3.5k
Google Analytics でサイト速度を計測する / Measure site speed with Google Analytics
forrep
2
110
計算量オーダーの話
tsudaahr
1
130
Reactive Java REST APIs, FTW? Virtual JUG 2024
mraible
PRO
0
400
「ソフトウェア設計」のドメイン - 「データモデリングでドメインを駆動する」を読んで
hidenorigoto
6
2k
Goでリフレクションする、その前に / Kansai.go #1
utgwkk
4
510
入門プロパティベーステスト/learning-property-based-testing
kiway
6
1.1k
esbuild 最適化芸人
exoego
2
960
Using "modern" Ruby to build a better, faster Homebrew
mikemcquaid
3
720
Vanilla JavaScript はマルチプラットフォームの夢を見るか
mitsuharu
0
120
ビジネスの構造をアーキテクチャに落とし込みソフトウェアに可変性を注入する
monotaro
PRO
10
2k
「正の影響力」を目指して書くこと
honey32
2
110
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
15
1.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
9
3.6k
How GitHub Uses GitHub to Build GitHub
holman
469
290k
Product Roadmaps are Hard
iamctodd
45
9.8k
The Brand Is Dead. Long Live the Brand.
mthomps
49
32k
Building an army of robots
kneath
300
42k
Being A Developer After 40
akosma
67
580k
The Cult of Friendly URLs
andyhume
74
5.7k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5.1k
Raft: Consensus for Rubyists
vanstee
133
6.3k
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