React z pohledu UI vývojáře Martin Pešout www.martinpesout.cz @martinpesout
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
- 1. React z pohledu UI vvoje Martin Peout www.martinpesout.cz @martinpesout
- 2. 8x nrst za posledn mezi roky 2014-2015
- 3. Jak strukturovat Javascriptov aplikace?
- 4. AngularJS Dart Ember.js Backbone.js Meteor.js
- 5. AngularJS DartPureMVC Ember.js Backbone.js Closure Meteor.js Agility.js Aria Templates Bolt CanJS KnockoutJS Skel YUI
- 6. Controller Model View Frameworky pracuj sloit s modelem API pro ten dat API pro zpis dat Ukldn dat Data Data Data Data Data
- 7. Controller Model View Pi tvorb UI je pro m podstatn vrstva View Geniln UI Vychytan animace Responsivn aplikace Dotykov gesta Pouiteln design Spokojen uivatel
- 8. denice na webu Reactu Facebook React je knihovna pro tvorbu uivatelskch rozhran.
- 9. Vchoz data Zmny v relnm ase Vstupy uivatele View Aplikace Data putuj pouze jednm smrem. React tm sniuje sloitost kdu.
- 10. Vchoz data Zmny v relnm ase Vstupy uivatele View Aplikace Starme se o popis toho, jak m vsledek vypadat Nov data na vstupu perenderovan vsledek
- 11. DOM (Document Object Model) Manipulace je nron a drah Svd k ukldn stav aplikace Jak udret stav element pi perenderovn?
- 12. Virtuln DOM komponenta(data 1) = vsledek 1 komponenta(data 2) = vsledek 2 diff(vsledek 1 - vsledek 2) = zmny Odlehen verze bnho DOM
- 13. Univerzlnj vyuit React React DOM ji nen soust samotnho Reactu od verze 0.14 React CanvasReact DOM React Three React Native
- 14. denice na webu Reactu React je cel o tvorb pouitelnch komponent. Ve skutenosti jedin vc, kterou s Reactem dlte, je tvorba komponent.
- 15. Funkcionln pstup Nemme pedem dan jak zskvme data Vnitn stavy Parametr A Parametr B Pedpis
- 16. var Component = React.createClass({ }); Povinn render metoda
- 17. var Component = React.createClass({ render: function() { return pedpis_vsledku; } }); Povinn render metoda
- 18. var Component = React.createClass({ render: function() { return pedpis_vsledku; } }); Povinn render metoda Javascript
- 19. Jazyk JSX Krok navc, kter pidv XML syntax do Javascriptu.
render: function render() { return React.createElement( "div",
null, "Hello ", this.props.name ); } render: function() { return
Hello {this.props.name}; } JSX
- 20. var LoginPage = React.createClass({ render: function() { return (
Related Documents
