Espen @

Disclaimer.

Made by

Developer-
Happiness
& Sanity

Best practices?

Forget it.

Model

View

Controller

Markup &
Display logic:

Same concern,

different technology.

Components

• Reusable
• Composable
• Testable

<JSX />

Optional sugar

Read: build step "required"

Vanilla JS

render: function() {
    return React.createElement("div", {className: "mything"}, 
    	React.createElement("a", {href: "/path"}, 
        	"Link: ", this.props.linkText
        )
    );
}

JSX

render: function() {
    return (
        <div className="my-thing">
            <a href="/path">
                Link: {this.props.linkText}
            </a>
        </div>
    );
}

Attribute names

DOM-names,
not HTML-names

UIs: Hard, because

state changes

UIs of the 90s:

• Fetch data from DB
• Run it through a template layer
  (read: print HTML)
• Deliver to client
• Done.

Why was that easy?

Modern UIs:

• Fetch data from API
• Run it through a template layer
• DOM-queries, find elements
• Attach event handlers
• Poll for new data / listen on socket

The updates cometh!

State change

What if:

• Class name changed
• Text of some child changed
• Element order is altered
• Elements should be inserted in the middle of a list?
• and so on and so forth.

A total mess.

addClass()

$.fn.find

removeClass()

el.text()

if(this)
then {that}

new design!!1

wow

addEventListener()

amaze

insertBefore

nth-child(1n3+^414)

React: Rerender.

React: Rerender.

var EventList = React.createClass({
    render: function() {
        var events = this.props.events;
        if (this.props.match.isFinished) {
            events = events.reverse();
        }
        
        return (
            <ul className="event-list">
                {events.map(EventListItem)}
            </ul>
        );
    }
});

List:

Virtual DOM

• Never creating real DOM-elements
• React handles that for you
• Lots of benefits, primarily:

Automagic DOM-diff

<li>
    <div class="icon icon-yellowcard"></div>
    <div class="minute">30</div>
    <div class="text">Yellow card: BIRGER HANSEN.</div>
</li>

"VDOM"-diffing

Diffs virtual nodes
(comparing JS objects)

"VDOM"-diffing

Performs the operations in batches - minimal reflows

"VDOM"-diffing

Transparent to the developer - "Here's the new state, render it"

Virtual DOM

View abstraction

react-canvas

react-gibbon

React Native

Server

Great feedback

Great developer tools

How do I get started?

React.createClass

or

ES6 class, extend React.Component

One required method:

render()

ES5 / "Classic" way

var SongTitle = React.createClass({
    propTypes: {
        artist: React.PropTypes.string,
        song: React.PropTypes.string.isRequired
    },

    render: function() {
        return (
            <span className="song-title">
                <span className="artist-name">
                    {this.props.artist}
                </span> -
                <span className="song-name">
                    {this.props.song}
                <∕span>
            </span>
        );
    }
});

ES6

class SongTitle extends React.Component {
    render() {
        return (
            <span className="song-title">
                <span className="artist-name">
                    {this.props.artist}
                </span> -
                <span className="song-name">
                    {this.props.song}
                <∕span>
            </span>
        );
    }
}

SongTitle.propTypes = {
    artist: React.PropTypes.string,
    song: React.PropTypes.string.isRequired
}

Props

The "external interface" to your component.

propTypes allows validation of input

Props

Passing new props to a component re-renders it

State

Components internal state

setState()

Triggers re-render of component.

Let's recap

React renders a component with a given state.

Given the same state, it will always yield the same result

Recap, part 2

If render() returns the same result, the DOM is never touched.

React assumes you won't touch the DOM manually.

K,
Thx

rexxars

rexxars

Espen
Hovlandsdal