Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Introduction to React.js
Max Stoiber
December 06, 2016
Technology
1
84
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
mxstbr
3
170
mxstbr
3
250
mxstbr
2
230
mxstbr
2
310
mxstbr
0
300
mxstbr
3
670
mxstbr
1
290
mxstbr
4
350
Other Decks in Technology
See All in Technology
miura55
0
290
viva_tweet_x
3
2.4k
chaspy
6
1.2k
yoshiori
1
1.1k
kaedemalu
0
310
yoku0825
PRO
3
110
yuzutas0
8
2.8k
yosuke_matsuura
PRO
0
170
yamamuteki
2
410
manuelmeyer
0
120
binarymist
0
1.3k
myajiri
0
300
Featured
See All Featured
holman
461
280k
shpigford
165
19k
philnash
9
580
morganepeng
18
1.2k
hannesfritz
28
950
destraynor
146
19k
jonyablonski
19
1.2k
kneath
219
15k
holman
288
130k
reverentgeek
27
2k
tanoku
258
24k
destraynor
223
47k
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!