einfÜhrung in react.js und redux - digicomp · morgen: ganztägiger workshop zu react und redux....
TRANSCRIPT
![Page 1: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/1.jpg)
EINFÜHRUNG IN REACT.JSUND REDUX
![Page 2: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/2.jpg)
REACT.JSEINE JAVASCRIPT LIBRARY ZUM ERSTELLEN VON USER INTERFACES
Nur die UIVirtual DOMData Flow
![Page 3: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/3.jpg)
DATA FLOWUnidirektional ohne Event-Chaos
![Page 4: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/4.jpg)
http://www.wikihow.com/Image:Make-Spaghetti-Step-1.jpg
https://www.�ickr.com/photos/spilt-milk/5829575950
![Page 5: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/5.jpg)
![Page 6: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/6.jpg)
![Page 7: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/7.jpg)
![Page 8: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/8.jpg)
REACT DATA FLOW
![Page 9: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/9.jpg)
VIRTUAL DOMEf�zientes UI-Rendering inklusive
![Page 10: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/10.jpg)
ÄNDERUNGEN AUF DER UI - WAS TUN?Alles neuzeichnen? Flackert!
DOM manipulieren? Mühsam!
![Page 11: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/11.jpg)
VIRTUAL DOMEntwickler beschreibt das vollständige Resultat
React aktualisiert den DOM mit minimalen Änderungen
![Page 12: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/12.jpg)
NUR DIE UIModel ist kein Bestandteil von React
Kann beliebig implementiert werden
![Page 13: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/13.jpg)
EINE EINFACHE KOMPONENTE
![Page 14: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/14.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return <p>Hello World!</p>; } }
![Page 15: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/15.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return <p>Hello World!</p>; } }
![Page 16: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/16.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return <p>Hello World!</p>; } }
![Page 17: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/17.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return <p>Hello World!</p>; } }
![Page 18: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/18.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return <p>Hello World!</p>; } }
![Page 19: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/19.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return React.createElement('p', null, 'Hello World!'); } }
![Page 20: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/20.jpg)
EINE EINFACHE KOMPONENTEimport React, { Component } from "react";
class HelloWorld extends Component {
render() { return <p>Hello World!</p>; } }
![Page 21: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/21.jpg)
EINE EINFACHE KOMPONENTE<HelloWorld />
![Page 22: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/22.jpg)
EINE KOMPONENTE MIT DATEN
Anzeige eines Users / Anzeige der Liste
![Page 23: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/23.jpg)
EINE KOMPONENTE MIT DATENclass User extends Component {
render() { return <li> <span>{this.props.user.firstName} {this.props.user.lastName}</span> </li>; } }
![Page 24: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/24.jpg)
EINE KOMPONENTE MIT DATENclass User extends Component {
render() { return <li> <span>{this.props.user.firstName} {this.props.user.lastName}</span> </li>; } }
![Page 25: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/25.jpg)
VERWENDUNG<ul> { users.map((user, index) => <User user={user} key={"user_" + index} />) } </ul>
![Page 26: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/26.jpg)
VERWENDUNG<ul> { users.map((user, index) => <User user={user} key={"user_" + index} />) } </ul>
![Page 27: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/27.jpg)
VERWENDUNG<ul> { users.map((user, index) => <User user={user} key={"user_" + index} />) } </ul>
![Page 28: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/28.jpg)
VERWENDUNG<ul> { users.map((user, index) => <User user={user} key={"user_" + index} />) } </ul>
![Page 29: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/29.jpg)
VERWENDUNG<ul> { users.map((user, index) => <User user={user} key={"user_" + index} />) } </ul>
![Page 30: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/30.jpg)
VERWENDUNG<ul> { users.map((user, index) => <User user={user} key={"user_" + index} />) } </ul>
![Page 31: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/31.jpg)
ANLEGEN EINES BENUTZERS
![Page 32: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/32.jpg)
ANLEGEN EINES BENUTZERSclass UserCreation extends Component {
render() { return ( <div> <div>New User</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ /* ... */ }>Submit</button> </div> </div> ); } }
![Page 33: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/33.jpg)
ANLEGEN EINES BENUTZERSclass UserCreation extends Component {
render() { return ( <div> <div>New User</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ /* ... */ }>Submit</button> </div> </div> ); } }
![Page 34: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/34.jpg)
ANLEGEN EINES BENUTZERSclass UserCreation extends Component {
render() { return ( <div> <div>New User</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ /* ... */ }>Submit</button> </div> </div> ); } }
![Page 35: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/35.jpg)
ANLEGEN EINES BENUTZERSclass UserCreation extends Component {
render() { return ( <div> <div>New User</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ /* ... */ }>Submit</button> </div> </div> ); } }
![Page 36: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/36.jpg)
DIE GESAMTE APPLIKATION
![Page 37: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/37.jpg)
REACT DATA FLOW
![Page 38: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/38.jpg)
![Page 39: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/39.jpg)
![Page 40: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/40.jpg)
REDUX DATA FLOW
![Page 41: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/41.jpg)
ACTIONconst USER_ADDED = "USER_ADDED"; function addUser(user) { return { type: USER_ADDED, payload: user } }
Sehr ähnlich zu CQRS / Event Sourcing
![Page 42: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/42.jpg)
STATE TREEINITIAL_STATE = { users: [] };
REDUCERSfunction reducers(state = INITIAL_STATE, action = {}){ return { users: users(state.users, action) }; }
function users(state = INITIAL_STATE.users, action = {}) { switch (action.type) { case Events.USER_ADDED: return state.concat(action.payload); } return state; }
![Page 43: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/43.jpg)
INTEGRATION IN DIE KOMPONENTEclass UserCreation extends Component {
render() { return ( <div> <div>User Creation</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ /* ... */ }>Submit</button> </div> </div> ); } }
![Page 44: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/44.jpg)
INTEGRATION IN DIE KOMPONENTEclass UserCreation extends Component {
render() { return ( <div> <div>User Creation</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ /* ... */ }>Submit</button> </div> </div> ); } }
![Page 45: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/45.jpg)
INTEGRATION IN DIE KOMPONENTEclass UserCreation extends Component {
render() { return ( <div> <div>User Creation</div> <div> <label>First Name:</label> <input type="string" /> </div> <div> <label>Last Name:</label> <input type="string" /> </div> <div> <button onClick={ () => { this.props.submitUser({firstName: ..., lastName: ...}) } }>Submit</button> </div> </div> ); } }
<UserCreation submitUser={ user => dispatch(Actions.addUser(user)) } />
![Page 46: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/46.jpg)
REACT HOT RELOADING
![Page 47: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/47.jpg)
REDUX LOGGER
![Page 48: EINFÜHRUNG IN REACT.JS UND REDUX - Digicomp · Morgen: Ganztägiger Workshop zu React und Redux. Created Date: 6/17/2016 8:25:15 PM](https://reader034.vdocuments.net/reader034/viewer/2022042222/5ec84b296a47342a7d0750ab/html5/thumbnails/48.jpg)
VIELEN DANK!
@[email protected]://www.nicole-rauch.de
https://github.com/NicoleRauch/VortragReactUndRedux
Morgen: Ganztägiger Workshop zu React und Redux