Počnite da koristite React odmah

Goran Gajić

full stack developer at gambit.com

twitter.com/feroc1ty

github.com/gorangajic

Sta je React ?

V u MVC-u

Composable Components

Vasa aplikacija napravljena od malih komponenata

lako se testiraju

sadrze jednu drugu

jednostavno za koriscenje

lakse je praviti promene u postojecem kodu

Virtual DOM

React koristi virtual DOM diff implementaciju za veoma visoke performanse.

Ne pristupate direktno DOM-u nego putem react-a

automatski zameni sta se promenilo na najoptimalniji nacin

smanjuje reflow i repaint

vidljivo povecanje performansi

Virtual DOM

gif

Primer

var ShoppingList = React.createClass({
  render: function() {
    return React.createElement("ul", {className: "shopping-list"}, 
    	React.createElement("li", null, " Pivo "), 
        React.createElement("li", null, " Smoki "), 
        React.createElement("li", null, " Kikiriki ")
    );
  }
});

React.render(React.createElement(ShoppingList, null), mountNode);

JSX

var Dafed = React.createClass({
    render: function() {   
        return (
            <h1 className="welcome">Hello DaFED</h1>
        );
    }
});

React.render(<Dafed/>, document.getElementById('dafed'));

var Dafed = React.createClass({
    render: function() {   
        return (
            React.createElement("h1", {className: "welcome"}, " Hello DaFED ")
        );
    }
});

React.render(React.createElement(Dafed, null), document.getElementById('dafed'));

Zašto JSX?

Razdvajanje problema, a ne tehnologija

komponente koristiti samo za ui, a ne i logiku

ostale biblioteke stavljaju js u html dok react stavlja html u vas js

sve je samo javascript

A CSS?

https://github.com/css-modules/css-modules

https://github.com/js-next/react-style

Primer komponente

var PlayersList = React.createClass({
    render: function() {
        var players = this.state.players.map(function(player) {
            return (
                <li>
                    <PlayerLink player={player}>
                        <Avatar player={player}/> 
                        <Username player={player}/>
                    </PlayerLink>
                </li>
            )
        });
        return <ul className="players-list">{players}</ul>    
    }
});

class PlayersList extends React.Component {
    render() {
        ...
    }
}

props, state

var PlayersList = React.createClass({
    getInitialState: function() {
        return {
            players: PlayersStore.get()
        };
    },
    onChange: function() {
        this.setState({players: PlayersStore.get()});
    },
    render: function() {
        var players = this.state.players.map(function(player) {
            return (
                <li>
                    <PlayerLink player={player}>
                        <Avatar player={player}/> 
                        <Username player={player}/>
                    </PlayerLink>
                </li>
            )
        });
        return <ul className="players-list">{players}</ul>    
    }
});

componentDidMount, componentWillUnmount

var PlayersList = React.createClass({
    componentDidMount() {
        PlayerStore.addChangeListener(this.onChange);
    },
    componentWillUnmount() {
        PlayerStore.removeChangeListener(this.onChange);
    },
    getInitialState: function() {
        return {
            players: PlayersStore.get()
        };
    },
    onChange: function() {
        this.setState({players: PlayersStore.get()});
    },
    render: function() {
        var players = this.state.players.map( ...
        return <ul className="players-list">{players}</ul>    
    }
});

Event System

var PlayersList = React.createClass({
    getInitalState: function() {
        return {
            open: false
        }
    },
    toggleModal: function() {
        this.setState({open: !this.state.open});
    },
    render: function() {
        if (this.state.open) {
            return <BootstrapModal />
        }
        return <BootstrapButton type="primary" onClick={this.toggleModal}/>;
    }
});

React implementira jednosmerni reactivni protok podataka sto smanjuje kod i lakse je razmisljati na taj nacin nego tradicionalni data binding

Flux

primenite react u vašoj postojećoj aplikaciji

jQuery plugin u React Componentu

demo

Backbone View => React Component

var React = require('react');
var PlayersOnlineView = require('views/homepage/playersOnline');

var PlayersOnline = React.createClass({
    shouldComponentUpdate: function() {
        return false;
    },
    componentDidMount() {
        var parent = React.findDOMNode(this.refs.parent);
        var element = document.createElement("DIV");
        parent.appendChild(element);
        this.playersOnline = new PlayersOnlineView({
            el: element
        });
    },
    componentWillUnmount() {
        this.playersOnline.remove();
    },
    render() {
        return <div className="players-online" ref="parent"></div>;
    }
});

Renderovanje na serveru putem Node.js-a

(isomorphic)