The slides for my introduction to React.js talk!
Introduction toReact.jsMax Stoiber@mxstbrOpen Source Developer, Thinkmill
View Slide
React
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 makesDynamic Interfaces easy
How does React work?
React creates components
Render those components on theweb, on native, in VR,…
Write once, run anywhere?
⚠ Write once, run anywhere? ⚠
Learn once, write anywhere!
Let’s talk about components
HeaderSearchResults
SearchResultsLogo SearchBarTabNavAppsToggle Btn
SearchResultsInput SearchIconTab Tab Tab Tab Tab Toggle Tgl Tgl
Components in React
React.createElement()
React.createElement('div')// will render this w/ ReactDOM
React.createElement('h1')// will render this w/ ReactDOM
React.createElement('input')// will render this w/ ReactDOM
React.createElement('input', { type: 'radio' })// will render this w/ ReactDOM
React.createElement('h1', { className: 'heading' })// will render this w/ ReactDOM
React.createElement('h1', { className: 'heading' }, 'Hello World')// will render this w/ ReactDOMHello World
React.createElement('div', null,React.createElement('h1', { className: 'heading' }, 'Hello World'))// will render this w/ ReactDOMHello World
React.createElement('div', { className: 'wrapper' },React.createElement('h1', { className: 'heading' }, 'Hello World'))// will render this w/ ReactDOMHello World
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
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/ ReactDOMHello WorldComponent!
Rendering the whole DOM is slow
React Elements are representationof 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?
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/ ReactDOMHello World
const Wrapper = function (props) {return React.createElement('div', { className: 'wrapper' },props.children)}React.createElement(Wrapper, null,Hello World)// will render this w/ ReactDOMHello World
const Wrapper = function (props) {return { props.children }}React.createElement(Wrapper, null,Hello World)// will render this w/ ReactDOMHello World
const Wrapper = function (props) {return { props.children }}Hello World// will render this w/ ReactDOMHello World
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/ ReactDOMHello World
mxs.is/mstsreact
Thank you!Max Stoiber@mxstbrCome talk to me!