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?

AngularJS
Dart
Ember.js
Backbone.js
Meteor.js

AngularJS
DartPureMVC
Ember.js
Backbone.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 dat
Uklá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

– deﬁnice 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

– deﬁnice 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řístup
Nemá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

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

return předpis_výsledku;
}
});
Javascript

Jazyk JSX
Krok navíc, který přidává XML syntax do Javascriptu.
render: function render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
return <div>Hello {this.props.name}</div>;
}
JSX

var LoginPage = React.createClass({
return (
<div className="grid">
<div className="sidebar">
<MainNavigation />
</div>
<div className=“content">
<LoginForm />
</div>
</form>
);
},
});
var MainNavigation = React.createClass({
return (
<ul className="main-navigation">
<li><a href="#">Homepage</a></li>
<li><a href="#">Contact info</a></li>
</ul>
);
},
});

var HelloMessage = React.createClass({
}
});
ReactDOM.render(<HelloMessage name="John" />, document.body);
name="John"
<div>Hello John</div>
<HelloMessage /> Žádný stav

var HelloMessage = React.createClass({
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />, document.body);
name="John"
<div>Hello John</div>
<HelloMessage /> Žádný stav

Ž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();
},
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

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">
</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í . . .

var content;
if (this.state.viewport == 'mobile') {
content = (
<ul class="tabs">
</ul>
<div>
Zobrazení na mobilu
</div>
);
} else {
content = (
<div className="grid">Zobrazení na desktopu</div>
)
}
return content;
}
});
Mobilní navigace

A B C
Navigace
Nadpis stránky

Děkuji za pozornost
Martin Pešout
www.martinpesout.cz
@martinpesout

React z pohledu UI vývojáře

More Related Content

Similar to React z pohledu UI vývojáře (16)

React z pohledu UI vývojáře