Introduction to React + Redux

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.

1. React + Redux
2. React + Redux @nikgraf Nik Graf @nikgraf
 nik@nikgraf.com Creator of Belle (UI Components) Working with StarterSquad Travelled around the World
3. React + Redux @nikgraf ECMAScript2015 const sum = (first, second) => { return first + second; }
4. React + Redux @nikgraf 
 Created by Sebastian McKenzie 
 - ECMAScript 2015 Support, JSX Support
 - Widely adopted
5. Let’s get started Source: https://www.flickr.com/photos/mike52ad/
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. 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. React + Redux @nikgraf Virtual DOM Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
9. React + Redux @nikgraf Virtual DOM Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
10. React + Redux @nikgraf Virtual DOM Benefits Batched DOM read/write operations. Efficient update of sub-tree only.
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. 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. 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. 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. React + Redux @nikgraf <body> <div id="example"> <p> <!-- App start --> Hello World! </p> <!-- App end --> </div> </body> index.html Rendering a Component
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. 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. 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. 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. React + Redux @nikgraf Wait, but why? Predictable easy to understand & easy to test
21. React + Redux @nikgraf
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. React + Redux @nikgraf If/Else <Profile name="Nik" isOnline={false}/> <div> Nik <span>red</span> </div>
24. React + Redux @nikgraf Loop const FriendList = ({friends}) => { return ( <ul> {friends.map((friend) => { return <li>{friend.name}</li>; })} </ul> ); } friendlist.js
25. React + Redux @nikgraf Loop const friends = [ { name: 'Max'}, { name: 'Tom'}, ]; <FriendList friends={friends} /> <ul> <li>Max</li> <li>Tom</li> </ul>
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. React + Redux @nikgraf Interaction const Profile = ({name}) => { return ( <div> {name} <button onClick={ console.log('Clicked!'); }> Click me! </button> </div> ); } profile.js
28. React + Redux @nikgraf What to do with interactions like
 onMouseOver, onSubmit &
 onClick?
29. React + Redux @nikgraf Redux to rescue! Redux allows you to manage the state with a minimal API but completely predictable behaviour.
30. React + Redux @nikgraf What about Flux? Source: https://twitter.com/codecartoons/status/667348216669741056
31. React + Redux @nikgraf Basic Principle (previousState, action) => newState
32. React + Redux @nikgraf
33. React + Redux @nikgraf Redux Flow Store Action Creators React Components Reducers Interaction e.g onClick dispatch(action) (newState) (state) (previousState, action)
34. React + Redux @nikgraf Feels like Fear just turned into a Superpower
35. React + Redux @nikgraf Action const action = { type: 'ADD_TODO', text: 'Call Mom', }
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. 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. 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. 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. 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. React + Redux @nikgraf Redux Summary - Redux allows you to manage the state with predictable behaviour. - (previousState, action) => newState
42. React + Redux @nikgraf
43. React + Redux @nikgraf Time-travel Demo
44. React + Redux @nikgraf Why this Stack? - Reusable Components - Predictable Code (functional) - TimeTravel - Performant & lightweight
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. Vienna React Meetup Source: http://www.wolfography.at/
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/