Einführung in React.js und Redux (Web Developer Conference 2017)

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 - 2017 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 - 2017 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 extends Component {
render() {
return <p>Hello World!</p>;
}
}

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

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

Der Code als Stateless Functional Component
export default () => <p>Hello World!</p>;
Verwendung:
import HelloWorld from "./myFile";
<HelloWorld />

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 - 2017 Nicole Rauch. Alle Rechte vorbehalten. React.js Testen mit Shallow Rendering – Folie 24

Essentielle Testing Library
Enzyme

Essentielle Testing Library
Enzyme
Shallow Rendering
Full DOM Rendering

Shallow Rendering
Shallow rendering ist hilfreich, um
Tests auf eine Komponente zu beschränken
sicherzustellen, dass die Tests nicht vom Verhalten von
Kind-Komponenten abhängen

Ein Shallow Rendering Test
const component = shallow(<HelloWorld />);
expect(component.text()).to.be("Hello World!");
expect(component.type()).to.be("p");
expect(component.name()).to.be("p");
expect(component.html()).to.be("<p>Hello World!</p>");

Demo
© 2016 - 2017 Nicole Rauch. Alle Rechte vorbehalten. React Developer Tools – Folie 30

Erstellen einer Benutzerverwaltung

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

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
export default ({firstName, lastName}) => (
<div>
<label>First name: </label><span>{firstName}</span><br/>
<label>Last name: </label><span>{lastName}</span><br/>
</div>
);

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

Testen der Datenübergabe
const user =
shallow(<User firstName="Petra" lastName="Meier" />);
const nameParts = user.find("span");
expect(nameParts.length).to.be(2);
expect(nameParts.at(0).text()).to.be("Petra");
expect(nameParts.at(1).text()).to.be("Meier");
expect(nameParts.map(c => c.text()))
.to.eql(["Petra", "Meier"]);

Anzeige einer Liste von Benutzern

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

Was sollte hier getestet werden?
<ul>
<User {...user} />
</li> ) }
</ul>

Was sollte hier getestet werden?
<ul>
<User {...user} />
</li> ) }
</ul>
Die Listeneinträge
Die Aufrufe der User-Komponente

Testen der li Elemente
const users = shallow(<UserList users={[
{firstName:"Petra", lastName:"Meier"},
{firstName:"Peter", lastName:"Miller"}]} />);
const elems = users.find("li");
expect(elems.length).to.be(2);
expect(elems.at(0).key()).to.be("userlist_PetraMeier");
expect(elems.at(1).key()).to.be("userlist_PeterMiller");

Testen der Aufrufe der User-Komponente
const userComps = users.find(User);
expect(userComps.length).to.be(2);
expect(userComps.at(0).key()).to.be.null();
expect(userComps.at(0).props())
.to.eql({firstName:"Petra", lastName:"Meier"});
expect(userComps.at(1).props())
.to.eql({firstName:"Peter", lastName:"Miller"});
expect(userComps.at(0).prop("firstName")).to.eql("Petra");

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>

Testen der User-Erzeugung
Shallow rendern der Komponente mit einem Spy als Callback:
import sinon from "sinon";
beforeEach(function () {
this.submit = sinon.spy();
this.user = shallow(<UserCreation submitUser={this.submit
}/>);
});

(Blackbox) Testen des Callback-Aufrufs
it("blackbox test", function () {
const inputs = this.user.find("input");
inputs.at(0).simulate("blur", {target:{value: "Nicole"}});
inputs.at(1).simulate("blur", {target:{value: "Rauch"}});
const button = this.user.find("button"); // .first();
button.simulate("click");
expect(this.submit.getCall(0).args)
.to.eql([{firstName: "Nicole", lastName: "Rauch"}]);
});

Redux Data Flow

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))
}/>

Redux Middleware für asynchrone Calls
Möglichkeiten zum Behandeln asynchroner Calls:
redux-thunk
redux-promise
rxjs mit redux-observable
© 2016 - 2017 Nicole Rauch. Alle Rechte vorbehalten. Asynchrone Calls – Folie 66

Asynchroner Dispatch
export function asyncActionInANutshell() {
return (dispatch, getState) => {
const { someStatePart } = getState();
dispatch(readyToTakeOff());
performBackendCall(params, response => {
dispatch(anActionFor(response));
});
};
}

Verwendung in userer Applikation
Benutzerdaten ans Backend schicken zum Persistieren
Alle Benutzer vom Backend laden

Benutzerdaten ans Backend schicken
Vorher:
this.props.dispatch(addUser(user))

Vorher:
this.props.dispatch(addUser(user))
Jetzt:
export function submitUser(user) {
return dispatch => {
backend.postUser(user, returnCode => {
if(returnCode === 200) {
dispatch(addUser(user));
}
});
};
}

export function postUser(user, callback) {
ajax.ajax({
url: "/api/user",
method: "POST",
body: "firstName=" + user.firstName + "&lastName=" +
user.lastName
},
(code) => {
callback(code);
}
);
}

Integration in die Applikation
<UserCreation submitUser={
user => { this.props.dispatch(submitUser(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/
Async Calls: David Williss – The Smoke Signal
https://www.flickr.com/photos/dwilliss/7730219512
© 2016 - 2017 Nicole Rauch. Alle Rechte vorbehalten. Abspann – Folie 73

Vielen Dank!
Nicole Rauch
E-Mail info@nicole-rauch.de
Twitter @NicoleRauch
Web http://www.nicole-rauch.de
Code https://github.com/NicoleRauch/RR3Code
React.js Ein- und mehrtägige Workshops / Consulting / Entwicklung
© 2016 - 2017 Nicole Rauch. Alle Rechte vorbehalten. Abspann – Folie 74

Einführung in React.js und Redux (Web Developer Conference 2017)

Weitere ähnliche Inhalte

Empfohlen (20)

Einführung in React.js und Redux (Web Developer Conference 2017)