React z pohledu UI vývojáře

React z pohledu UI vývojáře

Martin Pešout www.martinpesout.cz

@martinpesout

8x nárůst za poslední mezi roky 2014-2015

Jak strukturovat Javascriptové aplikace?

AngularJSDart

Ember.jsBackbone.js

Meteor.js

AngularJSDartPureMVC

Ember.jsBackbone.js

Closure

Meteor.js Agility.js

Aria Templates

Bolt

CanJS

KnockoutJS

Skel

YUI

Controller

Model

View

Frameworky pracují složitě s modelem

API pro čtení dat

API pro zápis datUkládání dat

Data

Data

Data

Data

Data

Controller

Model

View

Při tvorbě UI je pro mě podstatná vrstva View

Geniální UI

Vychytané animace

Responsivní aplikace

Dotyková gesta

Použitelný design

Spokojený uživatel

– definice na webu Reactu

„Facebook React je knihovna pro tvorbu uživatelských rozhraní.“

Výchozí data Změny v reálném čase Vstupy uživatele

View

Aplikace

Data putují pouze jedním směrem. React tím snižuje složitost kódu.

Výchozí data Změny v reálném čase Vstupy uživatele

View

Aplikace

Staráme se o popis toho, jak má výsledek vypadat

Nová data na vstupu

přerenderovaný výsledek

DOM (Document Object Model)

Manipulace je náročná a drahá

Svádí k ukládání stavů aplikace

Jak udržet stav elementů při přerenderování?

Virtuální DOM

komponenta(data 1)

= výsledek 1

komponenta(data 2)

= výsledek 2

diff(výsledek 1 - výsledek 2)

= změny

Odlehčená verze běžného DOM

Univerzálnější využití

React

React DOM již není součástí samotného Reactu od verze 0.14

React CanvasReact DOM

React Three

React Native

– definice na webu Reactu

„React je celý o tvorbě použitelných komponent. Ve skutečnosti jediná věc, kterou s

Reactem děláte, je tvorba komponent.“

Funkcionální přístupNemáme předem dané jak získáváme data

Vnitřní stavy

Parametr A Parametr B

Předpis

var Component = React.createClass({

});

Povinná render metoda

var Component = React.createClass({

render: function() { return předpis_výsledku; }

});

Povinná render metoda

var Component = React.createClass({

render: function() { return předpis_výsledku; }

});

Povinná render metoda

Javascript

Jazyk JSXKrok navíc, který přidává XML syntax do Javascriptu.

render: function render() { return React.createElement( "div", null, "Hello ", this.props.name ); }

render: function() { return <div>Hello {this.props.name}</div>; }

JSX

var LoginPage = React.createClass({

render: function() { return ( <div className="grid"> <div className="sidebar">

<MainNavigation /> </div> <div className=“content">

<LoginForm /> </div> </form> ); },

});

var MainNavigation = React.createClass({

render: function() { return ( <ul className="main-navigation"> <li><a href="#">Homepage</a></li> <li><a href="#">Contact info</a></li> </ul> ); },

});

var HelloMessage = React.createClass({ render: function() { } });

ReactDOM.render(<HelloMessage name="John" />, document.body);

name="John"

<div>Hello John</div>

<HelloMessage /> Žádný stav

var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } });

ReactDOM.render(<HelloMessage name="John" />, document.body);

name="John"

<div>Hello John</div>

<HelloMessage /> Žádný stav

var Menu = React.createClass({ getInitialState: function() { return { open: false, }; }, _toggleMenu: function() { this.setState({ open: this.state.open ? false : true, }); }, render: function() { var componentClasses = classNames({ 'main-nav': true, 'main-nav--open': this.state.open, });

return ( <div className={componentClass} onClick={this._toggleMenu}> TODO položky navigace... </div> ); }, });

<div class="menu">…</div>

<Menu /> Stav: open

Životní cyklus komponenty

Více na: https://facebook.github.io/react/docs/component-specs.html

componentWillReceiveProps: function(nextProps) { },

componentWillUpdate: function(nextProps, nextState) { if (this.props.name != nextProps.name) { console.log('Parameter name has been changed'); } },

componentDidUpdate: function(prevProps, prevState) { },

Např. můžeme reagovat na vstupy nových dat:

var LoginForm = React.createClass({

componentDidMount: function() { this.refs.loginInput.getDOMNode().focus(); },

render: function() { return ( <form className="auth-form"> <div className="auth-form__row"> <label htmlFor="email">Email address</label> <input type="email" id="email" ref="loginInput" /> </div> </form> ); },

});

Skutečné triky, které ocení nejen UI vývojáři

A

B

C

A B C

Navigace

A B C

Navigace

B C

Navigace

B C

Navigace<ul class="tabs"> <li><a href="#">Section A</a></li> <li><a href="#">Section B</a></li> <li><a href="#">Section C</a></li> </ul>

A

B

C @media only screen and (min-width: 64em) {

.tabs { display: none; }

}

<ul class="tabs"> <li><a href="#">Section A</a></li> <li><a href="#">Section B</a></li> <li><a href="#">Section C</a></li> </ul>

function getViewport() { return $(window).width() < 640 ? 'mobile' : 'large';

}

var MainLayout = React.createClass({

getInitialState: function() { return { viewport: getViewport(), }; },

pokračování komponenty . . .

_resize: function() { this.setState({ viewport: getViewport(), }); },

componentDidMount: function() { $(window).on('resize.content', this._resize); },

componentWillUnmount: function() { $(window).unbind('.content'); },

pokračování . . .

render: function() { var content;

if (this.state.viewport == 'mobile') { content = ( <ul class="tabs"> <li><a href="#">Section A</a></li> <li><a href="#">Section B</a></li> <li><a href="#">Section C</a></li> </ul> <div> Zobrazení na mobilu </div> ); } else { content = (

<div className="grid">Zobrazení na desktopu</div> ) }

return content; }

});

Mobilní navigace

A B

C

Nadpis stránky

A

B

C

Nadpis stránky

A B C

Navigace

Nadpis stránky

Živá ukázka

Děkuji za pozornost

Martin Pešout www.martinpesout.cz

@martinpesout