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 for Poets
Search
Nathan Hunzaker
April 09, 2015
Programming
0
120
React for Poets
A very high level look at React
Nathan Hunzaker
April 09, 2015
Tweet
Share
More Decks by Nathan Hunzaker
See All by Nathan Hunzaker
Introduction to React - Triangle.rb May 2015
nhunzaker
0
160
What is React?
nhunzaker
7
760
Other Decks in Programming
See All in Programming
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
120
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.8k
Terraform で作る Amazon ECS の CI/CD パイプライン
hiyanger
0
110
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
190
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
4.2k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
450
SpringBoot3.4の構造化ログ #kanjava
irof
2
780
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
500
Azure AI Foundryのご紹介
qt_luigi
1
260
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
240
Immutable ActiveRecord
megane42
0
120
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
328
21k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Into the Great Unknown - MozCon
thekraken
34
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
220
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
52k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A Philosophy of Restraint
colly
203
16k
Scaling GitHub
holman
459
140k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Unsuck your backbone
ammeep
669
57k
Transcript
React for Poets
• What React it is • Why we like it
• What React isn't
What is React?
React is a JavaScript library for building user interfaces.
"How should the user interface be built, and how should
it update?"
It forces a developer to break up their user interface
into small components.
<Blogs/> <Navigation/> <Posts/> <Post/> <Post/> <Post/> <Post/>
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
None
Component Tree
Build a component tree Compare to old data Determine fastest
update method Update page Data
State changed! So what...
Define Interface Change Data • Each change updates the user
interface • Data only goes in one direction (down)
Why I like React
Trouble in Paradise
• Web applications • Pages with frequent UI updates •
Things the browser can't do on its own JS apps are great for:
• Page load times • Handling critical errors • Mobile
performance Challenges with JS Apps:
None
Why I like React
Server side rendering
None
• Responsive page loads • More strategies for handling failure
(not just blank screens) With server side rendering:
None
None
Page Load Boot App Server
Mobile performance
• Designed for low memory devices • Hyper efficient page
updates • Stress tested on millions of devices on sites such as facebook.com, airbnb.com, and bbc.com
It's not the right tool for everything
• Sites with only few interactions • Simple content oriented
sites • Handoff projects where the maintainer is not familiar with JavaScript development • Server-side rendering requires NodeJS expertise React is not ideal for:
React is exciting
Break down UI into components
Addresses a lot of JS issues
None
Thanks! Nate Hunzaker @natehunzaker