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
Overreacting: React as a Paradigm
Search
Eric Sauter
November 17, 2016
Technology
1
45
Overreacting: React as a Paradigm
Talk given at November React MD meetup
Eric Sauter
November 17, 2016
Tweet
Share
More Decks by Eric Sauter
See All by Eric Sauter
A React Native Retrospective
esauter5
0
120
React Native
esauter5
5
160
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
All you need to know about InnoDB Primary Keys
lefred
0
120
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
SCSAから学ぶセキュリティ管理
masakamayama
0
140
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
880
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Unsuck your backbone
ammeep
669
57k
Producing Creativity
orderedlist
PRO
343
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
How GitHub (no longer) Works
holman
313
140k
GitHub's CSS Performance
jonrohan
1030
460k
Typedesign – Prime Four
hannesfritz
40
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Docker and Python
trallard
44
3.3k
Side Projects
sachag
452
42k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Transcript
Overreacting React as a Paradigm @TheEricSauter Eric Sauter CharmCityJS
None
What is React? A JavaScript Library for Building Web apps
User interfaces Anything
React is a Paradigm
Declarative not Imperative What not How
None
Declarative not Imperative React jQuery button clicked button clicked update
state update state? re-render UI update the p tag text add an li update the bg color updated UI updated UI hide that one tag fire some other event cry wait for jQuery…
One-way data flow
State Event Render Component One-way data flow
No need to touch UI when state changes
No more spaghetti
Composability
<Button />
Simple -> Complex
Container Components (TM)
Higher-order components “A higher order component is just a React
component that wraps another one.” Use for render highjacking, state/props manipulation, and feature enhancement
<HideableButton hidden={true} />
Renderer-agnostic
import React from ‘react’; import ReactDOM from ‘react-dom’; React core
Renderer import React from ‘react’; import ReactNative from ‘react-native’; Renderer
React doesn’t care what you render to
Virtual Representation Render target DOM iOS Canvas Super Nintendo? React
magic Android <View /> render()
“Write once, run anywhere” “Learn once, write anywhere”
Familiar fundamentals Unique platforms
Examples in the wild!
React Native
facebook.github.io/react- native/docs
Victory
formidable.com/open-source/ victory/docs/
React-Three
toxicfork.github.io/react-three- renderer-example
react-hardware
github.com/iamdustan/react- hardware
react-music github.com/ FormidableLabs/ react-music @ken_wheeler
React and its principles make sense when building UIs (and
many other systems). Wrapping up It’s not a coincidence all of these technologies backed by React are popping up.
Eric Sauter www.fixt.co Thank you! @TheEricSauter