�ݺ�ߣ

Budowa elementów GUI
za pomocą biblioteki React
Tomek Sułkowski

about.md
• Prowadzący:
• Tomek Sułkowski 
Front-end Developer 
Trener IT

about.md
• Agenda:
• Wprowadzenie / kontekst / narzędzia
• Teoria / demo
• Warsztat
• Teoria / demo
• Warsztat
• …
• Q & A

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

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'
};

hello React!
<body>
<div id="app"></div>
<script src=/slideshow/budowa-elementw-gui-za-pomoc-biblioteki-react-szybki-start/56943320/"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: 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

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 ﬂux ?
ogólny opis architektury

what the ﬂux ?
Facebook Flux, Fluxible by Yahoo, Reﬂux, 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 ﬂux
• Lepsze możliwości hot reloading
• Dynamiczny ekosystem

Dzięki za uwagę i zapraszam na
hKp://www.sages.com.pl/Budowanie-wydajnych-i-
nowoczesnych-aplikacji-webowych-w-oparciu-o-React

�ݺ�ߣ

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

More Related Content

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