Budowa elementów GUI za pomocą biblioteki React - szybki start
21
Budowa elementów GUI za pomocą biblioteki React Tomek Sułkowski
-
Upload
sages -
Category
Technology
-
view
738 -
download
1
Transcript of Budowa elementów GUI za pomocą biblioteki React - szybki start
Budowa elementów GUI za pomocą biblioteki React
Tomek Sułkowski
about.md
• Prowadzący:
• Tomek SułkowskiFront-end DeveloperTrener IT
about.md• Agenda:
• Wprowadzenie / kontekst / narzędzia
• Teoria / demo • Warsztat • Teoria / demo • Warsztat
• …
• Q & A
Narzędzia
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
webpacknpm 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'};
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>
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), }) ));
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) }); ));
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>;
React: componentvar 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
ES6 React 0.13
ES6 React 0.14
React: component
class CommentBox extends React.Component { render() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); }}
ECMAScript 2015: (aka ES6)
aktualna wersja języka JavaScript
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/
ECMAScript 2015: (aka ES6)Wsparcie w przeglądarkach…
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”
what the flux ?ogólny opis architektury
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:
Redux
• Niekoniecznie dla aplikacji React
• Niewielki kod źródłowy
• Niecałkiem flux
• Lepsze możliwości hot reloading
• Dynamiczny ekosystem
czas na kod
Dzięki za uwagę i zapraszam nahKp://www.sages.com.pl/Budowanie-wydajnych-i-
nowoczesnych-aplikacji-webowych-w-oparciu-o-React
