React & Redux

Einführung in React.js und Redux

React.js
Eine JavaScript Library zum Erstellen von User Interfaces
Nur die UI
Virtual DOM
Data Flow
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 3

Data Flow
Unidirektional ohne Event-Chaos

http://www.wikihow.com/Image:Make-Spaghetti-Step-1.jpg

http://www.wikihow.com/Image:Make-Spaghetti-Step-1.jpg
https://www.flickr.com/photos/spilt-milk/5829575950

Entwicklungsgeschichte einer Pub-Sub-Software

React Data Flow

Virtual DOM
Efﬁzientes UI-Rendering inklusive

Änderungen auf der UI - was tun?

Alles neuzeichnen? Flackert!

Alles neuzeichnen? Flackert!
DOM manipulieren? Mühsam!

Virtual DOM
Entwickler beschreibt das vollständige Resultat
React aktualisiert den DOM mit minimalen Änderungen

Nur die UI
Model ist kein Bestandteil von React
Kann beliebig implementiert werden

Eine einfache Komponente
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 18

Der Code als Class Component
import React, { Component } from "react";
export default class HelloWorld extends Component {
render() {
return <p>Hello World!</p>;
}
}

Der Code als Class Component ohne JSX
import React, { Component } from "react";
export default class HelloWorld extends Component {
render() {
return React.createElement(’p’, null, ’Hello World!’);
}
}

Der Code als Stateless Functional Component
import React from "react";
const HelloWorld = () => <p>Hello World!</p>;
export default HelloWorld;

Und wo binden wir diese Komponente ein?
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React & Redux</title>
</head>
<body>
<div id="start" />
</body>
</html>

Und wo binden wir diese Komponente ein?
index.js:
import React, {Component} from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./HelloWorld";
ReactDOM.render(
<HelloWorld />
, document.getElementById("start")
);

Wie ﬁnden die beiden zueinander?
webpack.config.js:
module.exports = {
entry: [
"./src/index" // <---- index.js
],
plugins: [
new HtmlWebpackPlugin({
template: "./index.html" // <---- index.html
}),
]
};

React.js Testen mit Shallow Rendering

Shallow Rendering - Was ist das?
Seit React 0.13 (März 2015)
Erlaubt das Testen von Komponenten ohne DOM
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. React.js Testen mit Shallow Rendering – Folie 26

Shallow Rendering - Was ist das?
Seit React 0.13 (März 2015)
Erlaubt das Testen von Komponenten ohne DOM
Shallow rendering ist hilfreich, um
Tests auf eine Komponente zu beschränken
sicherzustellen, dass die Tests nicht vom Verhalten von
Kind-Komponenten abhängen

Essentielle Testing Library
Enzyme

Essentielle Testing Library
Enzyme
Shallow Rendering
Full DOM Rendering

Ein Shallow Rendering Test
import expect from "must";
import { shallow } from "enzyme";
import HelloWorldFunctional from "../src-solution-react/
HelloWorldFunctionalComponent";
describe(’HelloWorldComponent’, () => {
it(’checks the result’s type and contents’, () => {
const functional = shallow(<HelloWorldFunctional />);
expect(functional.text()).to.be("Hello World!");
expect(functional.type()).to.be("p");
expect(functional.name()).to.be("p");
expect(functional.html()).to.be("<p>Hello World!</p>");

Demo
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. React Developer Tools – Folie 32

Erstellen einer Benutzerverwaltung

Anzeige eines Benutzers
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 34

Datenübergabe

Datenübergabe
<MyComponent aProperty={myData} anotherProperty={moreData} />

Datenübergabe
class MyComponent extends Component {
/* ... */ this.props.aProperty /* ... */
/* ... */ this.props.anotherProperty /* ... */
}

Datenübergabe
}
export default props =>
/* ... */ props.aProperty /* ... */
/* ... */ props.anotherProperty /* ... */

Datenübergabe
}
export default props =>
/* ... */ props.aProperty /* ... */
/* ... */ props.anotherProperty /* ... */
export default ({aProperty, anotherProperty}) =>
/* ... */ aProperty /* ... */
/* ... */ anotherProperty /* ... */

Die Implementierung der User-Komponente
const User = ({firstName, lastName}) => (
<div>
<label>First name: </label><span>{firstName}</span><br
/>
<label>Last name: </label><span>{lastName}</span><br/>
</div>
);
export default User;

Die Implementierung der User-Komponente
const User = ({firstName, lastName}) => (
<div>
<label>First name: </label><span>{firstName}</span><br
/>
<label>Last name: </label><span>{lastName}</span><br/>
</div>
);
export default User;
<User firstName="Petra" lastName="Meier" />

Anzeige einer Liste von Benutzern

Die Implementierung der UserList-Komponente
import User from "./User";
const UserList = ({users}) => (
<ul>
{ users.map( user =>
<li key={"userlist_" + user.firstName + user.lastName}>
<User {...user} />
</li> ) }
</ul>
);
export default UserList;
Wichtig: Der Key sollte eine semantische Beziehung zur Komponente
haben.

Anlegen eines Benutzers

Verwenden der eingegebenen Daten
<div>
<label>First name:</label>
<input type="text"
onBlur={e =>
this.setState({firstName: e.target.value})} />
</div>
<div>
<button
onClick={() => { this.props.submitUser(this.state); }}
>Submit</button>
</div>

Redux Data Flow

Und was genau ist Redux jetzt?
Verwaltung eines globalen State
State-Aktualisierung mit Hilfe von Aktionen
Bereitstellung des State für die Komponenten

Action
const USER_ADDED = "USER_ADDED";
function addUser(user) {
return {
type: USER_ADDED,
payload: user
}
}
Sehr ähnlich zu CQRS / Event Sourcing

State Tree
INITIAL_STATE = {
users: []
};

Reducers
function reducers(state = INITIAL_STATE, action = {}) {
return {
users: users(state.users, action)
};
}
function users(state, action) {
switch (action.type) {
case USER_ADDED:
return state.concat(action.payload);
}
return state;
}

Integration in die Komponente
<div>
<div>User Creation</div>
<div><label>First name:</label> <input type="text"/></div>
<div><label>Last name:</label> <input type="text"/></div>
<div>
<button onClick={
/* ... */
}>Submit</button>
</div>
</div>

Integration in die Komponente
<div>
<div>User Creation</div>
<div><label>First name:</label> <input type="text"/></div>
<div><label>Last name:</label> <input type="text"/></div>
<div>
<button onClick={
() => {this.props.submitUser(
{firstName: ..., lastName: ...}
)}
}>Submit</button>
</div>
</div>

Der Callback
<UserCreation submitUser={
user => this.props.dispatch(Actions.addUser(user))
}/>

Credits
Motivation: Hamza Butt – Workout, Gym, Squats
http://costculator.com/best-rowing-machine-reviews/
React.js:
http://www.goodworklabs.com/wp-content/uploads/2016/10/reactjs.png
React Shallow Rendering: anokarina – Does dipping my toes into the
Sound count as touching the Paciﬁc Ocean?
https://www.flickr.com/photos/anokarina/20044358984
User Management: James Cridland – Crowd
https://www.flickr.com/photos/jamescridland/613445810/
React / Redux Tools: C_osett – Google Developer Tools
https://www.flickr.com/photos/mstable/17517988852/
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Credits – Folie 61

Vielen Dank!
E-Mail info@nicole-rauch.de
Twitter @NicoleRauch
Web http://www.nicole-rauch.de
https://github.com/NicoleRauch/RR3Code
React.js & Redux Workshops · Entwicklung
EventStorming · Domain-Driven Design
Training · Coaching · Facilitation
Software Craftsmanship
Functional Programming
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Vielen Dank! – Folie 62

React & Redux

Weitere ähnliche Inhalte

Empfohlen

React & Redux