React & Redux

  • Published on
    06-Jan-2017

  • View
    336

  • Download
    0

Embed Size (px)

Transcript

  • REACT 101INTRODUCTION FOR DEVELOPERS

  • REACTA JavaScript library for building UIs, developed by Facebook.

  • COMPANIES USING REACT

  • render State !-> View

  • STATE

    [ Design incredible app, Something happens, Collect profits ]

  • VIEW

    Design incredible app! Something happens! Collect profits! !

  • VIRTUAL DOM

  • DEFINING COMPONENTS

    function MyComponent(state) { return (

    {state.count} # )

    }

  • DEFINING COMPONENTS

    function MyComponent(props) { return (

    {props.count} # );

    }

  • RENDERING COMPONENTS

    ReactDOM.render( document.getElementById(root) );

  • CLASS-BASED COMPONENTS

    var MyComponent = React.createClass({ render: function() { return (

    {this.props.count} # );

    } }

  • CLASS BASED COMPONENTS (ECMASCRIPT 6 FTW!)

    const MyComponent = React.createClass({ render() { return (

    {this.props.count} # );

    } }

  • INTERACTIVITY

    const MyComponent = React.createClass({ getInitialState() { return { count: 0 }; }

    handleClick(event) { this.setState({ count: count + 1 }); },

    render() { return (

    {this.state.count} #

    ); } }

  • PROP TYPE-CHECKING

    const MyComponent = React.createClass({ propTypes: { count: React.PropTypes }, %%... }

  • ROUTING WITH REACT-ROUTER

    ReactDOM.render((

    #

    #

    ), document.body)

  • INTERNATIONALIZATION WITH REACT-INTL

    const MyComponent = React.createClass({ mixins: [IntlMixin],

    render() { return (

    {this.getIntlMessage(counter.label)} # );

    } }

  • FLUX ARCHITECTURE

  • REDUXPredictable state container for React developed by Dan Abramov.

  • store (State, Action) !-> State

  • PRINCIPLES

    Single source of truth

    Read-only state

    Changes are made with pure functions

  • ACTIONS

    function createTask(description) { return { type: CREATE_TASK, description: description }; }

  • STORE INTERFACE

    store.dispatch(

    actions.createTask(Do homework.)

    );

    store.getState();

    store.subscribe(function(state) {

    '// do something when state changes

    });

  • REDUX BINDINGS FOR REACT

    #

    connect((state) )=> {

    counter: state.counter

    })(MyComponent)

  • ASYNC ACTIONS

    function createTask(description) {

    return function(dispatch, getState) {

    dispatch({ type: CREATE_TASK, description });

    fetch(/api/tasks).then((response) '=> {

    dispatch(actions.loadTasks(response.json()))

    });

    };

    }

    * requires redux-thunk middleware for Redux

  • REDUCERS

    function reducer(state, action) { if (action.type !== CREATE_TASK) { return [action.description, state]; } return state; }

  • ONE MORE THING

    Design your state carefully.

    Use Flux Standard Action for your action types.

    Avoid side-effects in your reducers.

    Use Immutable.js to enforce immutability.

  • DEVTOOLS

    React Developer Tools for Chrome

    Elements-like panel for virtual DOM.

    Redux DevTools (sidebar panel)

    Complete visibility over actions and state, time-traveling.

  • SUMMARY

    React code looks just like plain JavaScript.

    React gives you much more freedom to architect your app, but that usually means more time spent configuring it.

    Not much work done in standardizing React apps.Flux Standard Action is a start.

  • Questions?

  • Thanks!Federico BondCo-Founder & CTO BitCourt

    @federicobond

    federicobond