Pro kodéry je tvorba responsivních webových aplikací zvláštní kapitolou. React přináší nový přístup k tvorbě uživatelských rozhraní. Moje přednáška je určená pro ty kodéry, kteří s Reactem začínají a nebo váhají, zda by mohl být pro ně tou správnou cestou, kterou se vydat.

1. React z pohledu UI vývojáře
Martin Pešout
www.martinpesout.cz
@martinpesout

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

5. Jak strukturovat
Javascriptové aplikace?

6. AngularJS
Dart
Ember.js
Backbone.js
Meteor.js

7. AngularJS
DartPureMVC
Ember.js
Backbone.js
Closure
Meteor.js Agility.js
Aria Templates
Bolt
CanJS
KnockoutJS
Skel
YUI

8. 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

9. 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

10. – definice na webu Reactu
„Facebook React je knihovna pro tvorbu
uživatelských rozhraní.“

11. 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.

12. 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

14. 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í?

15. 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

18. 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

19. – 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.“

20. Funkcionální přístup
Nemáme předem dané jak získáváme data
Vnitřní stavy
Parametr A Parametr B
Předpis

21. var Component = React.createClass({
});
Povinná render metoda

22. var Component = React.createClass({
render: function() {
return předpis_výsledku;
}
});
Povinná render metoda

23. var Component = React.createClass({
render: function() {
return předpis_výsledku;
}
});
Povinná render metoda
Javascript

24. 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
);
}
render: function() {
return <div>Hello {this.props.name}</div>;
}
JSX

25. 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>
);
},
});

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

27. 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

28. 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

29. Ž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:

30. 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>
);
},
});

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

33. A
B
C

34. A B C
Navigace

35. B C
Navigace

36. C
Navigace

37. 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>

38. 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>

39. function getViewport() {
return $(window).width() < 640 ? 'mobile' : 'large';
}
var MainLayout = React.createClass({
getInitialState: function() {
return {
viewport: getViewport(),
};
},
pokračování komponenty . . .

40. _resize: function() {
this.setState({
viewport: getViewport(),
});
},
componentDidMount: function() {
$(window).on('resize.content', this._resize);
},
componentWillUnmount: function() {
$(window).unbind('.content');
},
pokračování . . .

41. 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

42. A B
C
Nadpis stránky

43. A
B
C
Nadpis stránky

44. A B C
Navigace
Nadpis stránky

45. Živá ukázka

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