React z pohledu UI vývojáře
-
Upload
martin-pesout -
Category
Software
-
view
1.086 -
download
0
Transcript of React z pohledu UI vývojáře
![Page 1: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/1.jpg)
React z pohledu UI vývojáře
Martin Pešout www.martinpesout.cz
@martinpesout
![Page 2: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/2.jpg)
8x nárůst za poslední mezi roky 2014-2015
![Page 3: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/3.jpg)
![Page 4: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/4.jpg)
![Page 5: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/5.jpg)
Jak strukturovat Javascriptové aplikace?
![Page 6: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/6.jpg)
AngularJSDart
Ember.jsBackbone.js
Meteor.js
![Page 7: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/7.jpg)
AngularJSDartPureMVC
Ember.jsBackbone.js
Closure
Meteor.js Agility.js
Aria Templates
Bolt
CanJS
KnockoutJS
Skel
YUI
![Page 8: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/8.jpg)
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
![Page 9: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/9.jpg)
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
![Page 10: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/10.jpg)
– definice na webu Reactu
„Facebook React je knihovna pro tvorbu uživatelských rozhraní.“
![Page 11: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/11.jpg)
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.
![Page 12: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/12.jpg)
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
![Page 13: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/13.jpg)
![Page 14: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/14.jpg)
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í?
![Page 15: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/15.jpg)
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
![Page 16: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/16.jpg)
![Page 17: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/17.jpg)
![Page 18: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/18.jpg)
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
![Page 19: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/19.jpg)
– 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.“
![Page 20: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/20.jpg)
Funkcionální přístupNemáme předem dané jak získáváme data
Vnitřní stavy
Parametr A Parametr B
Předpis
![Page 21: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/21.jpg)
var Component = React.createClass({
});
Povinná render metoda
![Page 22: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/22.jpg)
var Component = React.createClass({
render: function() { return předpis_výsledku; }
});
Povinná render metoda
![Page 23: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/23.jpg)
var Component = React.createClass({
render: function() { return předpis_výsledku; }
});
Povinná render metoda
Javascript
![Page 24: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/24.jpg)
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
![Page 25: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/25.jpg)
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> ); },
});
![Page 26: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/26.jpg)
var HelloMessage = React.createClass({ render: function() { } });
ReactDOM.render(<HelloMessage name="John" />, document.body);
name="John"
<div>Hello John</div>
<HelloMessage /> Žádný stav
![Page 27: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/27.jpg)
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
![Page 28: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/28.jpg)
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
![Page 29: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/29.jpg)
Ž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:
![Page 30: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/30.jpg)
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> ); },
});
![Page 31: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/31.jpg)
![Page 32: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/32.jpg)
Skutečné triky, které ocení nejen UI vývojáři
![Page 33: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/33.jpg)
A
B
C
![Page 34: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/34.jpg)
A B C
Navigace
![Page 35: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/35.jpg)
A B C
Navigace
![Page 36: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/36.jpg)
B C
Navigace
![Page 37: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/37.jpg)
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>
![Page 38: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/38.jpg)
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>
![Page 39: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/39.jpg)
function getViewport() { return $(window).width() < 640 ? 'mobile' : 'large';
}
var MainLayout = React.createClass({
getInitialState: function() { return { viewport: getViewport(), }; },
pokračování komponenty . . .
![Page 40: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/40.jpg)
_resize: function() { this.setState({ viewport: getViewport(), }); },
componentDidMount: function() { $(window).on('resize.content', this._resize); },
componentWillUnmount: function() { $(window).unbind('.content'); },
pokračování . . .
![Page 41: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/41.jpg)
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
![Page 42: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/42.jpg)
A B
C
Nadpis stránky
![Page 43: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/43.jpg)
A
B
C
Nadpis stránky
![Page 44: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/44.jpg)
A B C
Navigace
Nadpis stránky
![Page 45: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/45.jpg)
Živá ukázka
![Page 46: React z pohledu UI vývojáře](https://reader034.fdocuments.net/reader034/viewer/2022050614/58a5951b1a28abaf3e8b4cd5/html5/thumbnails/46.jpg)
Děkuji za pozornost
Martin Pešout www.martinpesout.cz
@martinpesout