Weitere ähnliche Inhalte
Ähnlich wie React & Redux (20)
React & Redux
- 3. 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
- 10. React Data Flow
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 10
- 12. Änderungen auf der UI - was tun?
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 12
- 13. Änderungen auf der UI - was tun?
Alles neuzeichnen? Flackert!
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 13
- 14. Änderungen auf der UI - was tun?
Alles neuzeichnen? Flackert!
DOM manipulieren? Mühsam!
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 14
- 15. Virtual DOM
Entwickler beschreibt das vollständige Resultat
React aktualisiert den DOM mit minimalen Änderungen
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 15
- 16. Nur die UI
Model ist kein Bestandteil von React
Kann beliebig implementiert werden
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Warum React.js? – Folie 16
- 19. Der Code als Class Component
import React, { Component } from "react";
export default class HelloWorld extends Component {
render() {
return <p>Hello World!</p>;
}
}
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 19
- 20. 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!’);
}
}
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 20
- 21. Der Code als Stateless Functional Component
import React from "react";
const HelloWorld = () => <p>Hello World!</p>;
export default HelloWorld;
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 21
- 22. 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>
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 22
- 23. 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")
);
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 23
- 24. Wie finden die beiden zueinander?
webpack.config.js:
module.exports = {
entry: [
"./src/index" // <---- index.js
],
plugins: [
new HtmlWebpackPlugin({
template: "./index.html" // <---- index.html
}),
]
};
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in React.js – Folie 24
- 26. 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
- 27. 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
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. React.js Testen mit Shallow Rendering – Folie 27
- 30. Ein Shallow Rendering Test
import React from "react";
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>");
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. React.js Testen mit Shallow Rendering – Folie 30
- 32. Demo
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. React Developer Tools – Folie 32
- 34. Anzeige eines Benutzers
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 34
- 35. Datenübergabe
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 35
- 38. Datenübergabe
<MyComponent aProperty={myData} anotherProperty={moreData} />
class MyComponent extends Component {
/* ... */ this.props.aProperty /* ... */
/* ... */ this.props.anotherProperty /* ... */
}
export default props =>
/* ... */ props.aProperty /* ... */
/* ... */ props.anotherProperty /* ... */
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 38
- 39. Datenübergabe
<MyComponent aProperty={myData} anotherProperty={moreData} />
class MyComponent extends Component {
/* ... */ this.props.aProperty /* ... */
/* ... */ this.props.anotherProperty /* ... */
}
export default props =>
/* ... */ props.aProperty /* ... */
/* ... */ props.anotherProperty /* ... */
export default ({aProperty, anotherProperty}) =>
/* ... */ aProperty /* ... */
/* ... */ anotherProperty /* ... */
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 39
- 40. Die Implementierung der User-Komponente
import React from "react";
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;
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 40
- 41. Die Implementierung der User-Komponente
import React from "react";
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" />
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 41
- 42. Anzeige einer Liste von Benutzern
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 42
- 43. Die Implementierung der UserList-Komponente
import React from "react";
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.
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 43
- 44. Anlegen eines Benutzers
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 44
- 45. 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>
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Erstellen einer Benutzerverwaltung – Folie 45
- 47. React Data Flow
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 47
- 48. © 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 48
- 49. © 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 49
- 50. Redux Data Flow
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 50
- 51. Und was genau ist Redux jetzt?
Verwaltung eines globalen State
State-Aktualisierung mit Hilfe von Aktionen
Bereitstellung des State für die Komponenten
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 51
- 52. Action
const USER_ADDED = "USER_ADDED";
function addUser(user) {
return {
type: USER_ADDED,
payload: user
}
}
Sehr ähnlich zu CQRS / Event Sourcing
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 52
- 54. 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;
}
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 54
- 55. 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>
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 55
- 56. 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>
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Einführung in Redux – Folie 56
- 59. Redux Logger Demo
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Redux Tools – Folie 59
- 60. Redux Developer Tools Demo
© 2016 - 2018 Nicole Rauch. Alle Rechte vorbehalten. Redux Tools – Folie 60
- 61. 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 Pacific 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
- 62. 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