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
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
8
1.3k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.9k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
130
Platform Engineeringは自由のめまい
nwiizo
4
2k
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
1
120
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.6k
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
Culture Deck
optfit
0
390
アジャイル開発とスクラム
araihara
0
170
自動テストの世界に、この5年間で起きたこと
autifyhq
10
8.1k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
7k
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
A designer walks into a library…
pauljervisheath
205
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Statistics for Hackers
jakevdp
797
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
We Have a Design System, Now What?
morganepeng
51
7.4k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
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