Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React + Redux Introduction

19,311 views

Published on

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.

Published in: Technology
  • Be the first to comment

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/

×