Hello, React!

Marius Schulz
@mariusschulz

React
Open-source JavaScript library
for building user interfaces
Developed at Facebook,
public since March 2013

React is only the view layer

"The V in MVC"

React is a library,
not a framework
React plays nicely with
the rest of your stack

Components

React is all about
writing components
React components
can receive props
from their parents
Required data is passed in,
resulting in loose coupling

Loosely coupled components are:

  • composable
  • reusable
  • testable
Large applications
are composed of many
small components
class Button extends React.Component {
    render() {
        return React.createElement(
            "button",
            { className: "btn btn-primary" },
            "Click Me"
        );
    }
}
HTML button element

Unidirectional
Data Flow

Props flow down,
events flow up
Tree
Props are immutable data
passed down from the parent
export default class Button extends React.Component {
    render() {
        return React.createElement(
            "button",
            { className: "btn btn-primary" },
            "Click Me"
        );
    }
}
export default class Button extends React.Component {
    render() {
        const { text } = this.props;
        return React.createElement(
            "button",
            { className: "btn btn-primary" },
            text
        );
    }
}
import Button from "./Button";

const myButton = React.createElement(
    Button,
    { text: "Click Me" }
);

Explicit Mutation

Some components have
mutable local state
State can only be
changed through an
explicit interface
setState()
// WRONG
this.state.loading = false;

// CORRECT
this.setState({
    loading: false
});
Changing the state
triggers a re-render
of the component
React does not do
dirty checking

Declarative UI

Declarative rather than imperative
Reason about the view
using a static mental model
view = f(props, state)
Components can be
pure functions
view = f(props)
function Button(props) {
    return React.createElement(
        "button",
        { className: "btn btn-primary" },
        props.text
    );
}
const Button = ({ text }) =>
    React.createElement(
        "button",
        { className: "btn btn-primary" },
        text
    );

It's just
JavaScript

Many frameworks invent
their own template syntax

{{#each}}

*ngFor

{% for x in y %}

Why not just use
the map function?
const todos = ["Buy milk", "Mow the lawn"];

const todoList = React.createElement(
    "ul",
    null,
    todos.map(todo =>
        React.createElement("li", null, todo)
    )
);
{
    type: "ul",
    props: {
        children: [{
            type: "li",
            props: {
                children: "Buy milk"
            }
        }, /* ... */]
    }
}
<ul>
    <li>Buy milk</li>
    <li>Mow the lawn</li>
</ul>

Rethinking
Best Practices

What?!
“Give it five minutes.”
— Richard Saul Wurman
Re-render a component
and all of its children
whenever data changes
React builds the virtual DOM,
an in-memory representation
of the current DOM state
Tree

How React updates the DOM:

  1. Build a new virtual DOM subtree
  2. Diff it with the previous one
  3. Compute necessary mutations
  4. Batch-execute all mutations

No messy DOM handling

e.g. adding, removing,
or updating DOM nodes

Co-locate a component's
user interface and behavior
within the same file
Separation of concerns
rather than
separation of technologies
Group that which
changes together
High cohesion
Write components in JSX, a
JavaScript syntax extension

Without JSX:

class Button extends React.Component {
    render() {
        return React.createElement(
            "button",
            { className: "btn btn-primary" },
            "Click Me"
        );
    }
}

With JSX:

class Button extends React.Component {
    render() {
        return (
            <button className="btn btn-primary">
                Click Me
            </button>
        );
    }
}
Cat
class Button extends React.Component {
    render() {
        return (
            <button className="btn btn-primary">
                {this.props.children}
            </button>
        );
    }
}
class SearchForm extends React.Component {
    render() {
        return (
            <div>
                <input type="search" />
                <Button>Click Me<Button>
            </div>
        );
    }
}

You don't have to
use JSX in order to
write React applications

(but everyone does)

Build Process

Babel
Webpack

Demo

Getting Started

Official documentation:
facebook.github.io/react

Thank you!

Obama dropping the mic

Looking for React
or JavaScript training?

Let's talk!
marius.schulz@me.com