Budowa elementów GUI za pomocą biblioteki React - szybki start
0 likes•1,254 views
![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'
};](https://image.slidesharecdn.com/react1d-160112081443/85/Budowa-elementow-GUI-za-pomoca-biblioteki-React-szybki-start-6-320.jpg)
![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),
})
)
);](https://image.slidesharecdn.com/react1d-160112081443/85/Budowa-elementow-GUI-za-pomoca-biblioteki-React-szybki-start-8-320.jpg)
![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)
});
)
);](https://image.slidesharecdn.com/react1d-160112081443/85/Budowa-elementow-GUI-za-pomoca-biblioteki-React-szybki-start-9-320.jpg)
![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>;](https://image.slidesharecdn.com/react1d-160112081443/85/Budowa-elementow-GUI-za-pomoca-biblioteki-React-szybki-start-10-320.jpg)
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