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
Introduction to React - Triangle.rb May 2015
Search
Nathan Hunzaker
May 12, 2015
Technology
0
160
Introduction to React - Triangle.rb May 2015
The presentation I gave at Triangle.rb introducing React.
Nathan Hunzaker
May 12, 2015
Tweet
Share
More Decks by Nathan Hunzaker
See All by Nathan Hunzaker
React for Poets
nhunzaker
0
120
What is React?
nhunzaker
7
760
Other Decks in Technology
See All in Technology
BLEAでAWSアカウントのセキュリティレベルを向上させよう
koheiyoshikawa
0
140
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
210
[SRE kaigi 2025] ガバメントクラウドに向けた開発と変化するSRE組織のあり方 / Development for Government Cloud and the Evolving Role of SRE Teams
kazeburo
4
1.9k
Japan AWS Jr. Championsがお届けするre:Invent2024のハイライト ~ラスベガスで見てきた景色~
fukuchiiinu
0
1.1k
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
190
Platform EngineeringがあればSREはいらない!? 新時代のSREに求められる役割とは
mshibuya
2
4k
あなたの興味は信頼性?それとも生産性? SREとしてのキャリアに悩むみなさまに伝えたい選択肢
jacopen
6
3.2k
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
12
3.8k
2025/1/29 BigData-JAWS 勉強会 #28 (re:Invent 2024 re:Cap)/new-feature-preview-q-in-quicksight-scenarios-tried-and-tested
emiki
0
310
Makuake*UPSIDER_LightningTalk
upsider_tech
0
200
現実的なCompose化戦略 ~既存リスト画面の置き換え~
sansantech
PRO
0
170
EDRからERM: PFN-SIRTが関わるセキュリティとリスクへの取り組み
pfn
PRO
0
110
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Language of Interfaces
destraynor
156
24k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Being A Developer After 40
akosma
89
590k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Rails Girls Zürich Keynote
gr2m
94
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Transcript
React
Nate Hunzaker Front-end Developer, Viget @natehunzaker
We build lots of user interfaces
None
None
None
Every framework has a big idea
They don't just reinvent the wheel
“Backbone.js gives structure to web applications [...]”
“Ember.js is built for productivity. Designed with developer ergonomics in
mind...”
Keep it simple
“We can only hope to make reliable those things in
which we understand.” - Rich Hickey
• Composition • One way data flow • Static mental
model
Compo(sition,nents) "React is all about building reusable components. In fact,
with React the only thing you do is build components." - facebook.github.io/react
Encourage developers to break a user interface into small components.
<Blogs/> <Navigation/> <Posts/> <Post/> <Post/> <Post/> <Post/>
None
None
None
None
None
None
• No templates • Strange syntax
“Templates separate technology, not concerns.” - Pete Hunt (formerly of
Facebook)
None
JSX “The purpose of this specification is to define a
concise and familiar syntax for defining tree structures with attributes.” http://facebook.github.io/jsx/
None
None
None
How does this work?
None
None
npm install babel npm install react-tools
None
<main/> <Menu/> <Inbox/>
Virtual DOM
Build a DOM tree Compare to old state Get cheapest
mutation path (with Levenshtein) Write new DOM (in batches) New state
State changed! So what...
Imperative Programming Describe the transition between state
Declarative Programming Express the logic, not the flow
Define Interface Change State • Each change in state flushes
to the DOM • Properties are sent in one direction • No cascading updates
Let's talk about state
A component is given props A component manages state
A component is given props
A component manages state
That's kind of it
Static Rendering Model
This is fast
Holy Hot Modules! https://github.com/gaearon/react-hot-loader
Really fast
Static Mental Model
When you render to a virtual environment, the DOM becomes
an implementation detail
None
None
What is an isomorphic?
None
React.render() is idempotent Same in, same out
None
None
React.renderToStaticMarkup
None
How do I build real apps with this?
Flux “Flux [...] complements React's composable view components by utilizing
a unidirectional data flow.” http://facebook.github.io/flux/
None
I thought you said this was simple
Job Queue State State State I want to create a
widget Ready a widget! I can totally do that! Ch-ch-ch-ch- changes I love David Bowie!
Flux Formal Capacitor: A demo isomorphic Flux app https://github.com/vigetlabs/capacitor
Flux Fun http://www.natehunzaker.com/yappy-bird/
App State Stimuli New state
Initial State Sound Jump()
None
None
None
None
NuclearJS https://github.com/optimizely/nuclear-js Yahoo Flux https://github.com/yahoo/flux-examples Om (Clojurescript) https://github.com/swannodette/om
On that note...
React injects a few constraints that yield powerful benefits
By focusing on composability and a single direction flow of
data, we can greatly simplify our apps
Hopefully you didn't ignore me after the JSX :)
Thanks! Nate Hunzaker Front-end Developer, Viget @natehunzaker
Iconography: User interface icon by Aziz, the Noun Project http://thenounproject.com/azisher
JavaScript Logo: https://github.com/voodootikigod/logo.js General React Concepts: React Homepage http://facebook.github.io/react/ JSX Specification http://facebook.github.io/jsx/ Rethinking Best Practices, Pete Hunt: https://www.youtube.com/watch?v=x7cQ3mrcKaY Decomplexifying Code with React, Steven Luscher: https://www.youtube.com/watch?v=rI0GQc__0SM An Introduction to ReactJS, James Pierce https://www.youtube.com/watch?v=m2fuO2wl_3c Flux Flux Homepage http://facebook.github.io/flux/ Examples React Fun https://github.com/nhunzaker/react-fun React Animatable https://github.com/nhunzaker/react- animatable An Isomorphic Chart https://github.com/nhunzaker/an- isomorphic-chart Capacitor https://github.com/vigetlabs/capacitor Yappy Bird https://github.com/nhunzaker/yappy-bird
react-router: the best router https://github.com/rackt/react-router