React (.JS)

Espen @

Disclaimer.

React (.JS)

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

What makes it

awesome?

Render on every change!

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?

State does not change

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.


var EventListItem = React.createClass({
    render: function() {
        var e = this.props.event;
        return (
            <li>
                <div className={'icon icon-' + e.type} />
                <div className="minute">{e.minute}</div>
                <div className="text">{e.text}</div>
            </li>
        );
    }
});

List item:

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:

But... Slow?

Not with the

Virtual DOM

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>
<li>
    <div class="icon icon-redcard"></div>
    <div class="minute">30</div>
    <div class="text">Red card: BIRGER HANSEN.</div>
</li>

vs

=

li.children[0].className = 'icon icon-redcard';
li.children[2].innerText = 'Red card: BIRGER HANSEN.';

"VDOM"-diffing

Diffs virtual nodes
(comparing JS objects)

FAST

"VDOM"-diffing

Performs the operations in batches - minimal reflows

FAST

"VDOM"-diffing

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

But wait,
there's more!

Virtual DOM

View abstraction

react-canvas

react-gibbon

React Native

Server

Side

Rendering

But wait,
there's still more!

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

Made with Slides.com