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.js
Search
Max Stoiber
December 06, 2016
Technology
1
150
Introduction to React.js
The slides for my introduction to React.js talk!
Max Stoiber
December 06, 2016
Tweet
Share
More Decks by Max Stoiber
See All by Max Stoiber
Testing React Applications
mxstbr
3
320
Styling Intro
mxstbr
3
380
Styling React Applications
mxstbr
2
630
Scaling React.js Applications (short version)
mxstbr
2
410
Scaling React.js Applications
mxstbr
0
410
Offline is the new Black
mxstbr
3
1k
Exploring ES6
mxstbr
1
320
Testing React.js Applications
mxstbr
4
620
Other Decks in Technology
See All in Technology
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
CDK Toolkit Libraryにおけるテストの考え方
smt7174
1
570
P2P通信の標準化 WebRTCを知ろう
faithandbrave
5
1.7k
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
6.9k
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
6
5.6k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
210
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
480
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
【あのMCPって、どんな処理してるの?】 AWS CDKでの開発で便利なAWS MCP Servers特集
yoshimi0227
6
1k
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
240
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.7k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Music & Morning Musume
bryan
46
6.7k
Site-Speed That Sticks
csswizardry
10
710
Done Done
chrislema
184
16k
How GitHub (no longer) Works
holman
314
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Bash Introduction
62gerente
613
210k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Transcript
Introduction to React.js Max Stoiber @mxstbr Open Source Developer, Thinkmill
None
None
React
The V in MVC
None
The V in MVC
The Vanilla in MVC
Why does React exist?
Instagram
Rendering on the server?
Rendering on the client!
Dynamic Interfaces
Dynamic Interfaces ≈ Better UX
Dynamic Interfaces are hard
React makes Dynamic Interfaces easy
How does React work?
React creates components
Render those components on the web, on native, in VR,…
Write once, run anywhere?
⚠ Write once, run anywhere? ⚠
Learn once, write anywhere!
Let’s talk about components
Header SearchResults
SearchResults Logo SearchBar TabNav AppsToggle Btn
SearchResults Input SearchIcon Tab Tab Tab Tab Tab Toggle Tgl
Tgl
Components in React
React.createElement()
React.createElement('div') // will render this w/ ReactDOM <div></div>
React.createElement('h1') // will render this w/ ReactDOM <h1></h1>
React.createElement('input') // will render this w/ ReactDOM <input></input>
React.createElement('input', { type: 'radio' }) // will render this w/
ReactDOM <input type="radio"></input>
React.createElement('h1') // will render this w/ ReactDOM <h1></h1>
React.createElement('h1', { className: 'heading' }) // will render this w/
ReactDOM <h1 class="heading"></h1>
React.createElement('h1', { className: 'heading' }, 'Hello World') // will render
this w/ ReactDOM <h1 class="heading">Hello World</h1>
React.createElement('div', null, React.createElement('h1', { className: 'heading' }, 'Hello World') )
// will render this w/ ReactDOM <div> <h1 class="heading">Hello World</h1> </div>
React.createElement('div', { className: 'wrapper' }, React.createElement('h1', { className: 'heading' },
'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
const Wrapper = function (props) { return React.createElement('div', { className:
'wrapper' }) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> </div>
const Wrapper = function (props) { return React.createElement('div', { className:
'wrapper' }, props.children) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div> Component!
Rendering the whole DOM is slow
React Elements are representation of the DOM
React.createElement('h1', { className: 'heading' }, 'Hello World') // will return
something like { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') )
// will return something like { type: Wrapper, props: null, children: [{ type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }] }
Every tick calculate the changes
Every tick calculate the changes (that's quick, because objects)
// Before { type: 'h1', props: { className: 'heading' },
children: ['Hello World'] }
// After { type: 'h1', props: { className: 'heading' },
children: ['This is new'] }
// After { type: 'h1', props: { className: 'heading' },
children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] }
// After { type: 'h1', props: { className: 'heading' },
children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] } // What changed?
// After { type: 'h1', props: { className: 'heading' },
children: ['This is new'] } // Before { type: 'h1', props: { className: 'heading' }, children: ['Hello World'] } // What changed?
Only render changes to the DOM!
JSX
const Wrapper = function (props) { return React.createElement('div', { className:
'wrapper' }, props.children) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
const Wrapper = function (props) { return React.createElement('div', { className:
'wrapper' }, props.children) } React.createElement(Wrapper, null, <h1 className="heading">Hello World</h1> ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
const Wrapper = function (props) { return <div className="wrapper">{ props.children
}</div> } React.createElement(Wrapper, null, <h1 className="heading">Hello World</h1> ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
const Wrapper = function (props) { return <div className="wrapper">{ props.children
}</div> } <Wrapper> <h1 className="heading">Hello World</h1> </Wrapper> // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
const Wrapper = function (props) { return React.createElement('div', { className:
'wrapper' }) } React.createElement(Wrapper, null, React.createElement('h1', { className: 'heading' }, 'Hello World') ) // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
const Wrapper = function (props) { return <div className="wrapper">{ props.children
}</div> } <Wrapper> <h1 className="heading">Hello World</h1> </Wrapper> // will render this w/ ReactDOM <div class="wrapper"> <h1 class="heading">Hello World</h1> </div>
None
mxs.is/mstsreact
Thank you! Max Stoiber @mxstbr Come talk to me!