Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Budowa elementów GUI za pomocą biblioteki React - szybki start

1,017 views

Published on

Presentation prepared by Tomek Sułkowski.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Budowa elementów GUI za pomocą biblioteki React - szybki start

  1. 1. Budowa elementów GUI za pomocą biblioteki React Tomek Sułkowski
  2. 2. about.md • Prowadzący: • Tomek Sułkowski
 Front-end Developer
 Trener IT
  3. 3. about.md • Agenda: • Wprowadzenie / kontekst / narzędzia • Teoria / demo • Warsztat • Teoria / demo • Warsztat • … • Q & A
  4. 4. Narzędzia
  5. 5. Node Package Manager • system zarządzania zależnościami dla server-side js i client-side js • zależności opisywane z dokładnością do wersji w pliku package.json 
 (nowy projekt tworzymy przez npm init) • npm install
 - instaluje pakiety, których jeszcze nie ma w projekcie • npm update 
 - sprawdza, czy istnieją nowsze wersje pakietówinstaluje • npm install nazwa-pakietu --save lub --save-dev 
 - instaluje pakiet, dodaje go do package.json przydatne skróty: 
 npm init -y , npm i -S , npm i -D
  6. 6. webpack npm install webpack -g
 npm install webpack --save-dev module.exports = { entry: [ './js/index.js' ], output: { path: __dirname + '/static/', filename: 'bundle.js' }, plugins: [], module: { loaders: [ { test: /.js$/, loaders: ['babel'], exclude: /node_modules/ } ] }, resolve: { extensions: ['.js', '.json'] }, devtool: 'source-map' };
  7. 7. hello React! <body> <div id="app"></div> <script src="react/0.14/react.js"></script> <script src="react/0.14/react-dom.js"></script> <script> var root = React.createElement('div', null, 'Hello React!'); ReactDOM.render(root, document.getElementById('app')); </script> </body>
  8. 8. hello React! var root = React.createElement('section', null, React.createElement('h1', null, 'Lista zakupów'), React.createElement('h2', {id: 'food', className: 'subcaption'}, 'Spożywcze'), React.createElement('ul', null, ['Mleko', 'Jajka', 'Chleb'].map(function (item) { React.createElement('li', null, i), }) ) );
  9. 9. hello React! var root = React.DOM.section(null, React.DOM.h1(null, 'Lista zakupów'), React.DOM.h2({id: 'food', className: 'subcaption'}, 'Spożywcze'), React.DOM.ul(null, ['Mleko', 'Jajka', 'Chleb'].map(function (item) { React.DOM.li(null, item) }); ) );
  10. 10. hello JSX var root = <section> <h1>Lista zakupów</h1> <h2 id="food" className="subcaption"></h2> <ul> {['Mleko', 'Jajka', 'Chleb'].map(function (item) { return <li>{item}</li> })} </ul> </section>;
  11. 11. React: component var Paragraph = React.createClass({ render: function () { return <p>{this.props.content}</p>; } }); class Paragraph extends React.Component { render() { return <p>{this.props.content}</p>; } } const Paragraph = (props) => <p>{props.content}</p>; ES5 ES6React 0.13 ES6React 0.14
  12. 12. React: component class CommentBox extends React.Component { render() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }
  13. 13. ECMAScript 2015: (aka ES6) aktualna wersja języka JavaScript
  14. 14. ES2015: przydatne konstrukcje • Destructuring • Spread operator • Rest parameters • Default values • Arrow funcSons • Template literals • Object literals • Classes • Let, Const • Modules ... wypróbuj: https://babeljs.io/repl/ , http://jsbin.com, ... zobacz: https://babeljs.io/docs/learn-es2015/
  15. 15. ECMAScript 2015: (aka ES6) Wsparcie w przeglądarkach…
  16. 16. ES2015: narzędzia • Pisząc kod aplikacji przeglądarkowych w ECMAScript 2015 musimy go transpilować • Do wyboru: Traceur, TypeScript, Babel … ale warto*
 *szybki rozwój js, więcej możliwości już dziś, mniej boilerplate code, ...
 
 „Transpilers are here to stay”
  17. 17. what the flux ? ogólny opis architektury
  18. 18. what the flux ? Facebook Flux, Fluxible by Yahoo, Reflux, Alt, Flummox, Marty.js, McFly, Lux, Material Flux, Redux, Flambeau, Nuclear.js, Fluxette, Fluxxor, Freezer ogólny opis architektury implementacje:
  19. 19. Redux • Niekoniecznie dla aplikacji React • Niewielki kod źródłowy • Niecałkiem flux • Lepsze możliwości hot reloading • Dynamiczny ekosystem
  20. 20. czas na kod
  21. 21. Dzięki za uwagę i zapraszam na hKp://www.sages.com.pl/Budowanie-wydajnych-i- nowoczesnych-aplikacji-webowych-w-oparciu-o-React

×