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

<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

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

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