Presentation given to Wolox employees on React and Redux.

1. REACT 101
INTRODUCTION FOR DEVELOPERS

2. REACT
A JavaScript library for
building UIs, developed by
Facebook.

3. COMPANIES USING REACT

4. render
State -> View

5. STATE
[
“Design incredible app”,
“Something happens”,
“Collect profits”
]

6. VIEW
<ol>
<li>Design incredible app </li>
<li>Something happens </li>
<li>Collect profits </li>
</ol>

7. VIRTUAL DOM

8. DEFINING COMPONENTS
function MyComponent(state) {
return (
<span className=“counter”>
{state.count}
</span>
)
}

9. DEFINING COMPONENTS
function MyComponent(props) {
return (
<span className=“counter”>
{props.count}
</span>
);
}

10. RENDERING COMPONENTS
ReactDOM.render(
<MyComponent count={5} />
document.getElementById(‘root’)
);

11. CLASS-BASED COMPONENTS
var MyComponent = React.createClass({
render: function() {
return (
<span className=“counter”>
{this.props.count}
</span>
);
}
}

12. CLASS BASED COMPONENTS (ECMASCRIPT 6 FTW!)
const MyComponent = React.createClass({
render() {
return (
<span className=“counter”>
{this.props.count}
</span>
);
}
}

13. 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>
);
}
}

14. PROP TYPE-CHECKING
const MyComponent = React.createClass({
propTypes: {
count: React.PropTypes
},
...
}

15. 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)

16. INTERNATIONALIZATION WITH REACT-INTL
const MyComponent = React.createClass({
mixins: [IntlMixin],
render() {
return (
<span className=“counter”>
{this.getIntlMessage(‘counter.label’)}
</span>
);
}
}

17. FLUX ARCHITECTURE

18. REDUX
Predictable state container for
React developed by Dan
Abramov.

19. store
(State, Action) -> State

20. PRINCIPLES
➤ Single source of truth
➤ Read-only state
➤ Changes are made with pure functions

21. ACTIONS
function createTask(description) {
return {
type: ‘CREATE_TASK’,
description: description
};
}

22. STORE INTERFACE
store.dispatch(
actions.createTask(”Do homework.”)
);
store.getState();
store.subscribe(function(state) {
// do something when state changes
});

23. REDUX BINDINGS FOR REACT
<Provider store={store}>
…
</Provider>
———————————————————————————————————————————————————
connect((state) => {
counter: state.counter
})(MyComponent)

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

25. REDUCERS
function reducer(state, action) {
if (action.type == ‘CREATE_TASK’) {
return [action.description, …state];
}
return state;
}

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

27. DEVTOOLS
➤ React Developer Tools for Chrome
➤ Elements-like panel for virtual DOM.
➤ Redux DevTools (sidebar panel)
➤ Complete visibility over actions and state, time-traveling.

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

29. Questions?

30. Thanks!
Federico Bond
Co-Founder & CTO
BitCourt
@federicobond
federicobond