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
130
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
250
Styling Intro
mxstbr
3
330
Styling React Applications
mxstbr
2
460
Scaling React.js Applications (short version)
mxstbr
2
350
Scaling React.js Applications
mxstbr
0
370
Offline is the new Black
mxstbr
3
880
Exploring ES6
mxstbr
1
300
Testing React.js Applications
mxstbr
4
450
Other Decks in Technology
See All in Technology
uvを使ってストレスフリーな Python開発をしよう!
r74tech
0
230
データベース03: 関係データモデル
trycycle
0
110
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
3
3.3k
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
160
同じ様なUIをiOS/Android間で合わせるヒントNo.2
fumiyasac0921
1
100
【NW X Security JAWS#3】L3-4:AWS環境のIPv6移行に向けて知っておきたいこと
shotashiratori
1
710
高専で制御を、大学でセンシングを学び、次は脳みそ
satoshirobatofujimoto
0
120
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
1.1k
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
280
Introduction to SwiftUI V2
pohjus
0
100
M5と自作基板をくっつけてみた〜M5 Japan Tour 2024 Spring 福冈 (Fukuoka|福岡)〜
keropiyo
0
190
Handling focus in 2024
tahia910
0
370
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
331
56k
Code Reviewing Like a Champion
maltzj
515
39k
Building Adaptive Systems
keathley
32
1.9k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Building Your Own Lightsaber
phodgson
100
5.7k
Done Done
chrislema
178
15k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Gamification - CAS2011
davidbonilla
77
4.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Practical Orchestrator
shlominoach
183
9.7k
Web Components: a chance to create the future
zenorocha
306
41k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
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!