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
140
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
310
Styling Intro
mxstbr
3
370
Styling React Applications
mxstbr
2
590
Scaling React.js Applications (short version)
mxstbr
2
380
Scaling React.js Applications
mxstbr
0
390
Offline is the new Black
mxstbr
3
990
Exploring ES6
mxstbr
1
310
Testing React.js Applications
mxstbr
4
560
Other Decks in Technology
See All in Technology
急成長する企業で作った、エンジニアが輝ける制度/ 20250214 Rinto Ikenoue
shift_evolve
2
120
ゆもつよがこの30年間自ら経験してきたQA、テストの歴史と未来
ymty
4
680
データの品質が低いと何が困るのか
kzykmyzw
5
920
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
190
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
10
1.9k
Bounded Context: Problem or Solution?
ewolff
1
200
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
190
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
170
AIエージェントについてまとめてみた
pharma_x_tech
20
14k
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
550
Building Products in the LLM Era
ymatsuwitter
6
1.8k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
9
1.3k
How to Ace a Technical Interview
jacobian
276
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
We Have a Design System, Now What?
morganepeng
51
7.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
BBQ
matthewcrist
86
9.4k
A better future with KSS
kneath
238
17k
What's in a price? How to price your products and services
michaelherold
244
12k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
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!