Einführung in React

Sebastian
• Sebastian Springer
• aus München
• arbeite bei MaibornWolff GmbH
• https://github.com/sspringer82
• @basti_springer
• JavaScript Entwickler

IT-Beratung &
Software Engineering

Und was genau ist React?
lichtkunst.73 / pixelio.de

var HelloWorld = React.createClass({ 
render: function () { 
return ( 
<h1>Hello World!</h1> 
); 
} 
}); 
 
ReactDOM.render( 
<HelloWorld />, 
document.getElementById('example') 
);

A JavaScript library for
building user interfaces

Just the UI - no structure
harry256 / pixelio.de

<!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.
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.

Datenﬂuss
Rita Gattermann / pixelio.de

One Way Data Binding
Parent ChildDatenﬂuss
Events

Security
S. Hofschlaeger / pixelio.de

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
Syntax-Erweiterung für JavaScript, die aussieht wie XML.
React transformiert JSX in natives JavaScript. Man kann
also React auch ohne JSX schreiben.

Hello World
Thorsten Müller / pixelio.de

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
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 />, 
);
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
Informationen, die von außen in die Komponente
hineingereicht werden.

Props
render() { 
return ( 
<h1>Hello {this.props.name}</h1> 
) 
} 
} 
 
ReactDOM.render( 
<HelloWorld name="Klaus"/>, 
);

Props
Standardwerte für props werden über getDefaultProps
gesetzt.

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.

State
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
ﬂießen zu lassen, werden Events verwendet.
Typische Events sind onChange, onClick, onSubmit,…
An diese Events werden Callback-Funktionen der
Komponente gebunden.

Datenﬂuss
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> 
) 
} 
}

Komponenten-Hierarchie
detlef menzel / pixelio.de

Komponenten-Hierarchie
Elternkomponente
Kindkomponente

ParentComponent
ChildComponent

ParentComponent
ChildComponent
changeColor

var ParentComponent = React.createClass({ 
getInitialState: function () { 
return { 
red: true, 
yellow: false, 
green: false 
} 
}, 
handleChange: function() { 
this.setState({ 
red: false, 
green: true 
}); 
}, 
return ( 
<div> 
<ChildComponent onChangeColor={this.handleChange}/> 
</div> 
) 
} 
});

var ChildComponent = React.createClass({ 
handleChange: function() { 
this.props.onChangeColor(); 
}, 
return ( 
<div> 
<button onClick={this.handleChange}>push</button> 
</div> 
) 
} 
});

Lifecycle
uschi dreiucker / pixelio.de

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
Rudolpho Duba / pixelio.de

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 modiﬁzieren den Application State nicht direkt.
Vorteil: Unidirektionaler Datenﬂuss und Entkopplung

Flux
Es gibt mittlerweile mehrere Flux-Implementierungen:
Flux, Fluxxor, RefulxJS, Redux oder ﬂuxible-app.

Fragen?
Rainer Sturm / pixelio.de

KONTAKT
Sebastian Springer
sebastian-springer@maibornwolff.de
MaibornWolff GmbH
Theresienhöhe 13
80339 München
@basti_springer
https://github.com/sspringer82

Einführung in React

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Einführung in React

Similar to Einführung in React (20)

More from Sebastian Springer

More from Sebastian Springer (20)

Einführung in React