Počni da koristiš React odmah

DaFED#36
Speaker: Goran Gajić
React je biblioteka za pravljenje korisničkih interfejsa napravljena od strane Facebook-a. Možemo o njoj da mislimo kao o "V" (view) u MVC arhitekturi. React se koristi za pravljenje i ažuriranje kompleksnih korisničkih interfejsa i namena mu je da se koristi pored drugih popularnih biblioteka (npr. Backbone.js). U ovom predavanju ćete videti kako možete da probate da koristite React u vašim postojećim aplikacijama i sami vidite da li je React za vas ili ne.

Transcript

1. Počnite da koristite Počnite da koristite React React odmah odmah
2. Goran Gajić Goran Gajić twitter.com/feroc1ty github.com/gorangajic full stack developer at gambit.com
3. Sta je React ? Sta je React ?
5. V u MVC-u
6. Composable Components Vasa aplikacija napravljena od malih komponenata lako se testiraju sadrze jednu drugu jednostavno za koriscenje lakse je praviti promene u postojecem kodu
7. 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
8. Virtual DOM gif
9. 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);
10. JSX 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'));
11. Zašto JSX? 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
12. A CSS? https://github.com/css-modules/css-modules https://github.com/js-next/react-style
13. Primer komponente 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() { ... } }
14. props, state 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> } });
15. componentDidMount, componentWillUnmount 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> } });
16. Event System 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}/>; } });
17. React implementira jednosmerni reactivni protok podataka sto smanjuje kod i lakse je razmisljati na taj nacin nego tradicionalni data binding Flux Flux
18. Flux Flux
19. Flux Flux
20. primenite react u vašoj postojećoj aplikaciji primenite react u vašoj postojećoj aplikaciji
21. jQuery plugin u React Componentu jQuery plugin u React Componentu demo
22. Backbone View => React Component 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>; } });
23. Renderovanje na serveru putem Node.js-a (isomorphic) demo +
24. Mane Mane struktura aplikacije nije strogo definisana
25. DOM je samo pocetak DOM je samo pocetak ​ react-native react-canvas react-three react-art
26. Resources Resources react-router react-render-visualizer babeljs webpack react-hot-loader react-motion
27. dajte mu 5 minuta dajte mu 5 minuta
28. pitanja? pitanja?
29. hvala hvala