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
280
Styling Intro
mxstbr
3
360
Styling React Applications
mxstbr
2
540
Scaling React.js Applications (short version)
mxstbr
2
360
Scaling React.js Applications
mxstbr
0
380
Offline is the new Black
mxstbr
3
940
Exploring ES6
mxstbr
1
310
Testing React.js Applications
mxstbr
4
510
Other Decks in Technology
See All in Technology
From naive to advanced RAG: the complete guide
glaforge
0
650
The road to green code (with Sonar)
bluehats
0
150
MobileActOsaka_241018.pdf
akaitadaaki
0
110
KongによるAPIライフサイクル マネジメント
hashitokyo
1
160
SOLID - Architecture and Architectural Decisions - Devfest Goa 2024
rivuchk
0
160
なぜ Rack を理解すべきかプレトーク / Why should you understand Rack - Pre-talk
hogelog
0
220
Unlearn Modularity
lemiorhan
6
300
テストを楽に書きたい
tomorrowkey
2
270
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
260
LLMOps : ΔMLOps
shuntaito
12
1.6k
APIs for AI: Have we failed?
zdne
0
110
v-modelの歩みを振り返る
bengo4com
5
1.9k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
BBQ
matthewcrist
85
9.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
It's Worth the Effort
3n
183
27k
[RailsConf 2023] Rails as a piece of cake
palkan
49
4.8k
How to Think Like a Performance Engineer
csswizardry
18
1k
Being A Developer After 40
akosma
85
590k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
4 Signs Your Business is Dying
shpigford
180
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
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!