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!

Made with Slides.com