際際滷

際際滷Share a Scribd company logo

React & Redux

Federico Bond
Federico Bond

This document provides an introduction to React for developers. It explains that React is a JavaScript library for building user interfaces developed by Facebook. It then covers key React concepts like components, props, state, rendering, and the virtual DOM. It also discusses tools and patterns for architecting React apps like Flux, Redux, routing, internationalization, and async logic. Finally, it recommends designing state carefully, using standards like Flux Standard Action, avoiding side effects in reducers, and leveraging tools like React DevTools.

1 of 30
REACT 101 INTRODUCTION FOR DEVELOPERS
REACT A JavaScript library for building UIs, developed by Facebook.
COMPANIES USING REACT
render State -> View
STATE [ Design incredible app, Something happens, Collect profits ]
VIEW <ol> <li>Design incredible app </li> <li>Something happens </li> <li>Collect profits </li> </ol>
VIRTUAL DOM
DEFINING COMPONENTS function MyComponent(state) { return ( <span className=counter> {state.count} </span> ) }
DEFINING COMPONENTS function MyComponent(props) { return ( <span className=counter> {props.count} </span> ); }
RENDERING COMPONENTS ReactDOM.render( <MyComponent count={5} /> document.getElementById(root) );
CLASS-BASED COMPONENTS var MyComponent = React.createClass({ render: function() { return ( <span className=counter> {this.props.count} </span> ); } }
CLASS BASED COMPONENTS (ECMASCRIPT 6 FTW!) const MyComponent = React.createClass({ render() { return ( <span className=counter> {this.props.count} </span> ); } }
INTERACTIVITY const MyComponent = React.createClass({ getInitialState() { return { count: 0 }; } handleClick(event) { this.setState({ count: count + 1 }); }, render() { return ( <span className=counter onClick={this.handleClick}> {this.state.count} </span> ); } }
PROP TYPE-CHECKING const MyComponent = React.createClass({ propTypes: { count: React.PropTypes }, ... }
ROUTING WITH REACT-ROUTER ReactDOM.render(( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="tasks" component={Tasks} /> <Route path="/task/:taskId" component={TaskDetails} /> <Route path="*" component={NoMatch} /> </Route> </Router> ), document.body)
INTERNATIONALIZATION WITH REACT-INTL const MyComponent = React.createClass({ mixins: [IntlMixin], render() { return ( <span className=counter> {this.getIntlMessage(counter.label)} </span> ); } }
FLUX ARCHITECTURE
REDUX Predictable 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 <Provider store={store}> </Provider> 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-e鍖ects 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 con鍖guring it. Not much work done in standardizing React apps. Flux Standard Action is a start.
Questions?
Thanks! Federico Bond Co-Founder & CTO BitCourt @federicobond federicobond

More Related Content

React & Redux