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
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
チームリードになって変わったこと
isaka1022
0
190
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
360
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
SwiftUI Viewの責務分離
elmetal
PRO
0
150
時計仕掛けのCompose
mkeeda
1
280
Domain-Driven Transformation
hschwentner
2
1.9k
『品質』という言葉が嫌いな理由
korimu
0
160
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Unsuck your backbone
ammeep
669
57k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Become a Pro
speakerdeck
PRO
26
5.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
RailsConf 2023
tenderlove
29
1k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
For a Future-Friendly Web
brad_frost
176
9.5k
Adopting Sorbet at Scale
ufuk
74
9.2k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
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