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
43
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
110
React Native
esauter5
5
150
Other Decks in Technology
See All in Technology
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
180
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
AWSの生成AI入門書を執筆しました🎉
minorun365
PRO
0
140
Shinagile 2024
kawaguti
PRO
2
120
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
230
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
160
PHP 9 に備えよ - 動的プロパティ、どうすればいぃ?
taisukearase
0
280
Real World Type Puzzle and Code Generation
yukukotani
4
630
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
280
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
12
7.9k
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
yanaemon
6
1.2k
Featured
See All Featured
Navigating Team Friction
lara
179
13k
Unsuck your backbone
ammeep
664
57k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
What's new in Ruby 2.0
geeforr
338
31k
Docker and Python
trallard
35
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
GraphQLとの向き合い方2022年版
quramy
33
13k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
It's Worth the Effort
3n
180
27k
How to Ace a Technical Interview
jacobian
273
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
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