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.

Transcript

1. React + Redux
   

   View Slide

2. React + Redux @nikgraf
   Nik Graf
   @nikgraf

   nik@nikgraf.com
   Creator of Belle (UI Components)
   Working with StarterSquad
   Travelled around the World
   

   View Slide

3. React + Redux @nikgraf
   ECMAScript2015
   const sum = (first, second) => {
   return first + second;
   }
   

   View Slide

4. React + Redux @nikgraf
   

   Created by Sebastian McKenzie
   

   - ECMAScript 2015 Support, JSX Support

   - Widely adopted
   

   View Slide

5. Let’s get started
   Source: https://www.flickr.com/photos/mike52ad/
   

   View Slide

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
   

   View Slide

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)
   

   View Slide

8. React + Redux @nikgraf
   Virtual DOM
   Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
   

   View Slide

9. React + Redux @nikgraf
   Virtual DOM
   Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
   

   View Slide

10. React + Redux @nikgraf
    Virtual DOM Benefits
    Batched DOM read/write operations.
    Efficient update of sub-tree only.
    

    View Slide

11. React + Redux @nikgraf
    Our first Experiment Part I
    
    
    
    
    
    
    
    
    
    
    index.html
    

    View Slide

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(Hello, world!, exampleElement);
    main.js -> bundle.js
    

    View Slide

13. React + Redux @nikgraf
    JSX
    JSX is a JavaScript syntax extension

    that looks similar to XML.
    // Input (JSX):
    var app = ;
    // Output (JS):
    var app = React.createElement(Nav, {color:"blue"});
    

    View Slide

14. React + Redux @nikgraf
    Rendering a Component
    import React from 'react';
    import ReactDOM from 'react-dom';
    const App = () => {
    return (Hello World!);
    }
    const exampleNode = document.getElementById('example');
    ReactDOM.render(, exampleNode);
    main.js -> bundle.js
    

    View Slide

15. React + Redux @nikgraf
    
    
    
    Hello World!
    
    
    
    index.html
    Rendering a Component
    

    View Slide

16. React + Redux @nikgraf
    Nested Components Part I
    import React from 'react';
    const Profile = ({avatar, name}) => {
    return (
    
    
    {name}
    
    );
    }
    profile.js
    

    View Slide

17. React + Redux @nikgraf
    import React from 'react';
    import ReactDOM from 'react-dom';
    import Profile from ‘./profile';
    const App = () => {
    return (
    
    Hello World!
    
    
    );
    }
    const exampleNode = document.getElementById('example');
    ReactDOM.render(, exampleNode);
    main.js -> bundle.js
    Nested Components Part II
    

    View Slide

18. React + Redux @nikgraf
    
    
    
    Hello World!
    
    
    Nik
    
    
    
    
    index.html
    Nested Components Part III
    

    View Slide

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
    

    View Slide

20. React + Redux @nikgraf
    Wait, but why?
    Predictable
    easy to understand
    &
    easy to test
    

    View Slide

21. React + Redux @nikgraf
    

    View Slide

22. React + Redux @nikgraf
    If/Else
    const Profile = ({name, isOnline}) => {
    let onlineIndicator;
    if (isOnline) {
    onlineIndicator = (green);
    } else {
    onlineIndicator = (red);
    }
    return (
    
    {name} {onlineIndicator}
    
    );
    } profile.js
    

    View Slide

23. React + Redux @nikgraf
    If/Else
    
    
    Nik red
    
    

    View Slide

24. React + Redux @nikgraf
    Loop
    const FriendList = ({friends}) => {
    return (
    
    {friends.map((friend) => {
    return {friend.name};
    })}
    
    );
    }
    friendlist.js
    

    View Slide

25. React + Redux @nikgraf
    Loop
    const friends = [
    { name: 'Max'},
    { name: 'Tom'},
    ];
    
    
    Max
    Tom
    
    

    View Slide

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 …)
    

    View Slide

27. React + Redux @nikgraf
    Interaction
    const Profile = ({name}) => {
    return (
    
    {name}
    
    Click me!
    
    
    );
    }
    profile.js
    

    View Slide

28. React + Redux @nikgraf
    What to do with interactions like

    onMouseOver,
    onSubmit &

    onClick?
    

    View Slide

29. React + Redux @nikgraf
    Redux to rescue!
    Redux allows you to manage the state with a
    minimal API but completely predictable behaviour.
    

    View Slide

30. React + Redux @nikgraf
    What about Flux?
    Source: https://twitter.com/codecartoons/status/667348216669741056
    

    View Slide

31. React + Redux @nikgraf
    Basic Principle
    (previousState, action) => newState
    

    View Slide

32. React + Redux @nikgraf
    

    View Slide

33. React + Redux @nikgraf
    Redux Flow
    Store
    Action
    Creators
    React
    Components
    Reducers
    Interaction e.g onClick
    dispatch(action)
    (newState)
    (state)
    (previousState, action)
    

    View Slide

34. React + Redux @nikgraf
    Feels like Fear just turned
    into a Superpower
    

    View Slide

35. React + Redux @nikgraf
    Action
    const action = {
    type: 'ADD_TODO',
    text: 'Call Mom',
    }
    

    View Slide

36. React + Redux @nikgraf
    Action Creator
    function addTodo(text) {
    const trimmedText = text.trim();
    return {
    type: 'ADD_TODO',
    text: trimmedText,
    }
    }
    
    Add Todo
    
    actions.js
    

    View Slide

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
    

    View Slide

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'));
    

    View Slide

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(
    ,
    exampleNode
    );
    

    View Slide

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 (
    
    Add Todo
    
    );
    };
    export default connect(App);
    

    View Slide

41. React + Redux @nikgraf
    Redux Summary
    - Redux allows you to manage the state with
    predictable behaviour.
    - (previousState, action) => newState
    

    View Slide

42. React + Redux @nikgraf
    

    View Slide

43. React + Redux @nikgraf
    Time-travel Demo
    

    View Slide

44. React + Redux @nikgraf
    Why this Stack?
    - Reusable Components
    - Predictable Code (functional)
    - TimeTravel
    - Performant & lightweight
    

    View Slide

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
    

    View Slide

46. Vienna React Meetup
    Source: http://www.wolfography.at/
    

    View Slide

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/
    

    View Slide