Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

React + Redux Introduction

23.012 Aufrufe

Veröffentlicht am

Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

React + Redux Introduction

  1. 1. React + Redux
  2. 2. React + Redux @nikgraf Nik Graf @nikgraf nik@nikgraf.com Creator of Belle (UI Components) Working with StarterSquad Travelled around the World
  3. 3. React + Redux @nikgraf ECMAScript2015 const sum = (first, second) => { return first + second; }
  4. 4. React + Redux @nikgraf Created by Sebastian McKenzie - ECMAScript 2015 Support, JSX Support - Widely adopted
  5. 5. Let’s get started Source: https://www.flickr.com/photos/mike52ad/
  6. 6. React + Redux @nikgraf React React is a JavaScript Library for building user interfaces. • Focus on the UI, not a Framework • One-way reactive data flow (no two-way data binding) • Virtual DOM
  7. 7. React + Redux @nikgraf Virtual DOM Keep track of state in DOM is hard. The DOM API is slow. (Try to re-render the whole DOM on every change)
  8. 8. React + Redux @nikgraf Virtual DOM Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
  9. 9. React + Redux @nikgraf Virtual DOM Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
  10. 10. React + Redux @nikgraf Virtual DOM Benefits Batched DOM read/write operations. Efficient update of sub-tree only.
  11. 11. React + Redux @nikgraf Our first Experiment Part I <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="bundle.js"></script> </head> <body> <div id="example"></div> </body> </html> index.html
  12. 12. React + Redux @nikgraf Our first Experiment Part II import React from 'react'; import ReactDOM from 'react-dom'; const exampleElement = document.getElementById('example'); ReactDOM.render(<h1>Hello, world!</h1>, exampleElement); main.js -> bundle.js
  13. 13. React + Redux @nikgraf JSX JSX is a JavaScript syntax extension that looks similar to XML. // Input (JSX): var app = <Nav color="blue" />; // Output (JS): var app = React.createElement(Nav, {color:"blue"});
  14. 14. React + Redux @nikgraf Rendering a Component import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return (<p>Hello World!</p>); } const exampleNode = document.getElementById('example'); ReactDOM.render(<App />, exampleNode); main.js -> bundle.js
  15. 15. React + Redux @nikgraf <body> <div id="example"> <p> <!-- App start --> Hello World! </p> <!-- App end --> </div> </body> index.html Rendering a Component
  16. 16. React + Redux @nikgraf Nested Components Part I import React from 'react'; const Profile = ({avatar, name}) => { return ( <div> <img src={avatar} /> <span>{name}</span> </div> ); } profile.js
  17. 17. React + Redux @nikgraf import React from 'react'; import ReactDOM from 'react-dom'; import Profile from ‘./profile'; const App = () => { return ( <div> <h1>Hello World!</h1> <Profile avatar="http://test.png" name="Nik" /> </div> ); } const exampleNode = document.getElementById('example'); ReactDOM.render(<App />, exampleNode); main.js -> bundle.js Nested Components Part II
  18. 18. React + Redux @nikgraf <body> <div id="example"> <div> <!-- App start --> <h1>Hello World!</h1> <div> <!-- Profile start --> <img src="http://test.png" /> <span>Nik</span> </div> <!-- Profile end --> </div> <!-- App end --> </div> </body> index.html Nested Components Part III
  19. 19. React + Redux @nikgraf Stateless Function Components Functional Programming: - avoid changing-state - avoid mutable data - calling a function twice with the same values as arguments will produce the same result Stateless Function Components: - avoid changing-state - avoid mutable data - calling a function twice with the same values as arguments will produce the same result
  20. 20. React + Redux @nikgraf Wait, but why? Predictable easy to understand & easy to test
  21. 21. React + Redux @nikgraf
  22. 22. React + Redux @nikgraf If/Else const Profile = ({name, isOnline}) => { let onlineIndicator; if (isOnline) { onlineIndicator = (<span>green</span>); } else { onlineIndicator = (<span>red</span>); } return ( <div> {name} {onlineIndicator} </div> ); } profile.js
  23. 23. React + Redux @nikgraf If/Else <Profile name="Nik" isOnline={false}/> <div> Nik <span>red</span> </div>
  24. 24. React + Redux @nikgraf Loop const FriendList = ({friends}) => { return ( <ul> {friends.map((friend) => { return <li>{friend.name}</li>; })} </ul> ); } friendlist.js
  25. 25. React + Redux @nikgraf Loop const friends = [ { name: 'Max'}, { name: 'Tom'}, ]; <FriendList friends={friends} /> <ul> <li>Max</li> <li>Tom</li> </ul>
  26. 26. React + Redux @nikgraf React Summary - We can create out own components - We can nest components as we like - Stateless Function Components are pure - We can control flow via JS (if, else, for, map …)
  27. 27. React + Redux @nikgraf Interaction const Profile = ({name}) => { return ( <div> {name} <button onClick={ console.log('Clicked!'); }> Click me! </button> </div> ); } profile.js
  28. 28. React + Redux @nikgraf What to do with interactions like onMouseOver, onSubmit & onClick?
  29. 29. React + Redux @nikgraf Redux to rescue! Redux allows you to manage the state with a minimal API but completely predictable behaviour.
  30. 30. React + Redux @nikgraf What about Flux? Source: https://twitter.com/codecartoons/status/667348216669741056
  31. 31. React + Redux @nikgraf Basic Principle (previousState, action) => newState
  32. 32. React + Redux @nikgraf
  33. 33. React + Redux @nikgraf Redux Flow Store Action Creators React Components Reducers Interaction e.g onClick dispatch(action) (newState) (state) (previousState, action)
  34. 34. React + Redux @nikgraf Feels like Fear just turned into a Superpower
  35. 35. React + Redux @nikgraf Action const action = { type: 'ADD_TODO', text: 'Call Mom', }
  36. 36. React + Redux @nikgraf Action Creator function addTodo(text) { const trimmedText = text.trim(); return { type: 'ADD_TODO', text: trimmedText, } } <button onClick={ dispatch(addTodo('Call Mom ') }> Add Todo </button> actions.js
  37. 37. React + Redux @nikgraf Reducer const todos = (state = [], action) => { switch (action.type) { case 'ADD_TODO': return [ ...state, { text: action.text, completed: false } ] default: return state } } reducers.js
  38. 38. React + Redux @nikgraf Store import { createStore } from 'redux' import todoReducer from '../reducers' let store = createStore(todoReducer); store.subscribe(() => console.log(store.getState()) ) store.dispatch(addTodo('Learn about reducers')); store.dispatch(addTodo(‘Call Mom'));
  39. 39. React + Redux @nikgraf Connect React with Redux import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; import todoApp from './reducers'; import App from './containers/App'; let store = createStore(todoApp); let exampleNode = document.getElementById('example'); ReactDOM.render( <Provider store={store}><App /></Provider>, exampleNode );
  40. 40. React + Redux @nikgraf Connect React +Redux import React from 'react'; import { connect } from 'react-redux'; import { addTodo } from '../actions.js'; const App = ({dispatch, state}) => { return ( <button onClick={ dispatch(addTodo('Call Mom') }> Add Todo </button> ); }; export default connect(App);
  41. 41. React + Redux @nikgraf Redux Summary - Redux allows you to manage the state with predictable behaviour. - (previousState, action) => newState
  42. 42. React + Redux @nikgraf
  43. 43. React + Redux @nikgraf Time-travel Demo
  44. 44. React + Redux @nikgraf Why this Stack? - Reusable Components - Predictable Code (functional) - TimeTravel - Performant & lightweight
  45. 45. React + Redux @nikgraf Is it production ready? React - used by Facebook, Firefox, Airbnb and many more Redux - used by Firefox, Docker, Technical University of Vienna, Mattermark and many more - “Love what you’re doing with Redux” Jing Chen, creator of Flux
  46. 46. Vienna React Meetup Source: http://www.wolfography.at/
  47. 47. React + Redux @nikgraf The End Thanks for listening! https://github.com/nikgraf https://twitter.com/nikgraf Vienna React Meetup http://www.meetup.com/Vienna-ReactJS-Meetup/

×