MASTERCLASS
React
MASTERCLASS
Reactive programming
var x = 4
var y = x * 2
// What is y?var x = 4
var y = x * 2
x = 6
// What is y?Reactive programming
| A | B | |
|---|---|---|
| 1 | 4 | =A1 * 2 |
| 2 |
| A | B | |
|---|---|---|
| 1 | 6 | =A1 * 2 |
| 2 |
React
- Idea: apply reactive programming to UI
- Whatever the state of my application, the UI is always correct
React
Application state
UI
Custom logic
React
<ul id="todos">
</ul>
<script type="text/javascript">
var todoItems = new Collection()
todoItems.forEach(item => {
$('<li/>').text(item.description).appendTo('#todos')
})
todoItems.on('add', item => {
$('<li/>').text(item.description).appendTo('#todos')
})
todoItems.on('remove', index => {
$('#todos').child(index).remove()
})
todoItems.on('change', (index, item) => {
$('#todos').child(index).text(item.description)
})
</script>React
<ul id="todos">
</ul>
<script type="text/javascript">
var todoItems = new Collection()
function render() {
$('#todos').html('')
todoItems.forEach(item => {
$('<li/>').text(item.description).appendTo('#todos')
})
}
render()
todoItems.on('add remove change', render)
</script>React
- Facebook came up with it
- Number of unread messages + message list was always off
React vs Angular
- Both are component based (at least NG2, NG1 is a mess)
- Angular: template binding
- React: reactive rendering
React vs Angular
- Data binding (Angular)
- Can be bidirectional
- Not very flexible out of the box
- Reactive rendering (React)
- Unidirectional
- Extremely flexible
Performance
- Isn't re-rendering every time extremely costly?
- Shadow DOM
State
Rendering
Shadow DOM
DOM
Reconciliation
FAST
SLOW
JSX
import React from 'react'
export default class App extends React.Component {
state = {
name: 'world'
}
render() {
const {name} = this.state
return <div>Hello {name}</div>
}
}- Write "HTML" inline
- Not actually HTML!
import React from 'react'
export default class App extends React.Component {
state = {
name: 'world'
}
render() {
const {name} = this.state
return React.createElement('div', {children: `Hello ${name}`})
}
}JSX
import React from 'react'
export default class App extends React.Component {
state = {
name: 'world'
}
render() {
return (
<div id="my-app">
<h1>Welcome to my app</h1>
<main>
{this.renderNavigation()}
{this.renderContent()}
</main>
</div>
)
}
renderNavigation() {
return (
<nav>
<a href="/one">Item 1</a>
</nav>
)
}
this.renderContent() {
return (
<div className="content">
<p>Hello everyone!</p>
</div>
)
}
}Let's get coding!
Masterclass React
By Joost Lubach
