einführung in react
TRANSCRIPT
Sebastian• Sebastian Springer
• aus München
• arbeite bei MaibornWolff GmbH
• https://github.com/sspringer82
• @basti_springer
• JavaScript Entwickler
IT-Beratung & Software Engineering
var HelloWorld = React.createClass({ render: function () { return ( <h1>Hello World!</h1> ); }});ReactDOM.render( <HelloWorld />, document.getElementById('example') );
A JavaScript library for building user interfaces
Virtual DOM
<!DOCTYPE HTML>
<html> <head> <meta charset=”UTF-8”> </head> <body> <h1>Hello World</h1> </body></html>
html"## head$ %## meta%## body %## h1 %## #text
Das DOM ist eine Baumstruktur. Diese kann bei Änderungen recht einfach verarbeitet werden.
Das DOM bei umfangreicheren Single Page-Applikationen kann recht umfangreich werden. Die Verarbeitung wird dann
sehr langsam.
Das Virtual DOM ist eine Abstraktion des DOM. React führt Berechnungen und Änderungen durch und fasst die Aktionen so zusammen, dass sie vom Browser möglichst
performant umgesetzt werden können.
React verfügt über zusätzliche Attribute, die nicht im DOM auftauchen.
React Element
Light, stateless, immutable, virtual representation of a DOM Element.
var HelloWorld = React.createClass({ render: function () { return ( <h1>Hello World!</h1> ); }});
React Component
Stateful elements of a react application.
Bei Änderungen werden die Components in Elements übersetzt.
Im Virtual DOM werden die Änderungen berechnet und für den Browser optimiert auf den tatsächlichen DOM
angewendet.
One Way Data Binding
Parent ChildDatenfluss
Events
Security
React weist eine eingebaute XSS Protection auf. Es ist nur recht aufwändig möglich, HTML-Strings direkt auszugeben.
Man muss diese Sicherung also bewusst umgehen.
JSX
var HelloWorld = React.createClass({ render: function () { return ( <h1>Hello World!</h1> ); }});ReactDOM.render( <HelloWorld />, document.getElementById('example') );
JSX
Syntax-Erweiterung für JavaScript, die aussieht wie XML.
React transformiert JSX in natives JavaScript. Man kann also React auch ohne JSX schreiben.
index.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>React</title> <link rel="stylesheet" href="css/style.css" /> <script src="js/lib/react.js"></script> <script src=“js/lib/react-dom.js"></script> <script src=“js/lib/browser.js"></script> <script src=“js/lib/jquery.min.js"></script> </head> <body> <div id="content"></div> <script type="text/babel" src=“js/app/app.js"></script> </body> </html>
app.js
var HelloWorld = React.createClass({ render: function () { return ( <h1>Hello World</h1> ) }});ReactDOM.render( <HelloWorld />, document.getElementById('content') );
ES 6 Klassen
class HelloWorld extends React.Component { render() { return ( <h1>Hello World</h1> ) }} ReactDOM.render( <HelloWorld />, document.getElementById('content') );
Alternativ können Components auch in ES6 formuliert werden.
Components
class und for sind reservierte Wörter in JavaScript.
Deswegen müssen in Components className und htmlFor verwendet werden.
Props
Props
Informationen, die von außen in die Komponente hineingereicht werden.
Props
class HelloWorld extends React.Component { render() { return ( <h1>Hello {this.props.name}</h1> ) }} ReactDOM.render( <HelloWorld name="Klaus"/>, document.getElementById('content') );
Props
Standardwerte für props werden über getDefaultProps gesetzt.
State
State
Jede Komponente verwaltet ihren eigenen internen State.
Bei einer Änderung des States wird die render-Methode erneut ausgeführt.
Der State wird über setState gesetzt.
Stateclass HelloWorld extends React.Component { constructor() { super(); this.state = { time: 0 } } componentDidMount() { this.interval = setInterval(() => { this.setState({time: this.state.time + 1}); }, 1000); } render() { return ( <h1>{this.state.time}</h1> ) }}
State
Wenn eine Komponente mit createClass erstellt wird, werden die Startwerte des States mit getInitialState gesetzt.
Events PeterFranz / pixelio.de
Events
Um Informationen von der Darstellung in die Komponente fließen zu lassen, werden Events verwendet.
Typische Events sind onChange, onClick, onSubmit,…
An diese Events werden Callback-Funktionen der Komponente gebunden.
Datenflussclass HelloWorld extends React.Component { constructor() { super(); this.state = { name: 'Hans-Peter' } } handleValueChange(e) { this.setState({name: e.target.value}); } render() { return ( <div> <div>{this.state.name}</div> <input type="text" value={this.state.name} onChange={this.handleValueChange.bind(this)} /> </div> ) }}
Datenfluss
Komponenten-Hierarchie
Elternkomponente
Kindkomponente
ParentComponent
ChildComponent
ParentComponent
ChildComponentchangeColor
var ParentComponent = React.createClass({ render: function() { return ( <div> <div>Parent</div> <ChildComponent /> </div> ) }});var ChildComponent = React.createClass({ render: function() { return ( <div> <button>push</button> </div> ) }});
ReactDOM.render( <ParentComponent />, document.getElementById('content') );
var ParentComponent = React.createClass({ getInitialState: function () { return { red: true, yellow: false, green: false } }, handleChange: function() { this.setState({ red: false, green: true }); }, render: function() { return ( <div> <ChildComponent onChangeColor={this.handleChange}/> </div> ) }});
var ChildComponent = React.createClass({ handleChange: function() { this.props.onChangeColor(); }, render: function() { return ( <div> <button onClick={this.handleChange}>push</button> </div> ) }});
Lifecycle
Initialisierung: Die Komponente wird zum ersten Mal eingebunden.
State Change: Der State einer Komponente wird verändert.
Props Change: Die Props einer Komponente werden geändert.
Initialisierung
GetDefaultProps
GetInitialState
ComponentWillMount
Render
ComponentDidMount
State Change
ShouldComponentUpdate
ComponentWillUpdate
Render
ComponentDidUpdate
Props Change
ComponentWillReceiveProps
ComponentShouldUpdate
ComponentWillUpdate
Render
ComponentDidUpdate
Build
Aktuell besteht die Applikation noch aus mehreren Dateien. Das Ziel ist, dass nur noch eine Datei ausgeliefert wird.
React-Applikationen können mit verschiedenen Build-Systemen wie z.B. webpack gebaut werden.
Build{ "scripts": { "build": "node_modules/.bin/webpack main.js bundle.js --module-bind 'js=babel-loader'" }, "dependencies": { "babel-core": "^6.9.0", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "react": "^15.0.2", "react-dom": "^15.0.2", "webpack": "^1.13.1" } }
Build$ npm install $ npm run build
> @ build /react > webpack main.js bundle.js --module-bind 'js=babel-loader'
Hash: 154dd060b2495527de56 Version: webpack 1.13.1 Time: 3574ms Asset Size Chunks Chunk Names bundle.js 702 kB 0 [emitted] main + 169 hidden modules
Build
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="example"></div> <script src="bundle.js"></script> </body> </html>
Flux
Architektur für React-Applikationen. Kein Framework, sondern mehr eine Guideline.
Flux
Action Dispatcher Store View
API
Flux
Actions: reichen Informationen an den Dispatcher weiter
Dispatcher: Reicht die Informationen zu den registrierten Stores weiter
Stores: Halten den Application State und die Logik
Views: React Komponenten, die den State aus den Stores bekommen
Flux
Die Interaktion erfolgt über die Komponenten, die Actions auslösen.
Die Views modifizieren den Application State nicht direkt.
Vorteil: Unidirektionaler Datenfluss und Entkopplung
Flux
Es gibt mittlerweile mehrere Flux-Implementierungen: Flux, Fluxxor, RefulxJS, Redux oder fluxible-app.
Fragen?
Rainer Sturm / pixelio.de
KONTAKT
Sebastian Springer [email protected]
MaibornWolff GmbH Theresienhöhe 13 80339 München
@basti_springer
https://github.com/sspringer82