Budowa elementów GUI za pomocą biblioteki React - szybki start
•
0 gefällt mir•1,252 views
Presentation prepared by Tomek Sułkowski.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (11)
Ähnlich wie Budowa elementów GUI za pomocą biblioteki React - szybki start
Ähnlich wie Budowa elementów GUI za pomocą biblioteki React - szybki start (20)
Mehr von Sages
Budowa elementów GUI za pomocą biblioteki React - szybki start
- 1. Budowa elementów GUI za pomocą biblioteki React Tomek Sułkowski
- 2. about.md • Prowadzący: • Tomek Sułkowski Front-end Developer Trener IT
- 3. about.md • Agenda: • Wprowadzenie / kontekst / narzędzia • Teoria / demo • Warsztat • Teoria / demo • Warsztat • … • Q & A
- 4. Narzędzia
- 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. 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. 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. 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. 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. 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. 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. React: component class CommentBox extends React.Component { render() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } }
- 13. ECMAScript 2015: (aka ES6) aktualna wersja języka JavaScript
- 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. ECMAScript 2015: (aka ES6) Wsparcie w przeglądarkach…
- 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. what the flux ? ogólny opis architektury
- 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. Redux • Niekoniecznie dla aplikacji React • Niewielki kod źródłowy • Niecałkiem flux • Lepsze możliwości hot reloading • Dynamiczny ekosystem
- 20. czas na kod
- 21. Dzięki za uwagę i zapraszam na hKp://www.sages.com.pl/Budowanie-wydajnych-i- nowoczesnych-aplikacji-webowych-w-oparciu-o-React