React & Redux

REACT 101
INTRODUCTION FOR DEVELOPERS

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

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

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

DEFINING COMPONENTS
function MyComponent(state) {
return (

{state.count}

)
}

DEFINING COMPONENTS
function MyComponent(props) {
return (
{props.count}

);
}

RENDERING COMPONENTS
ReactDOM.render(
<MyComponent count={5} />
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
getInitialState() {
return { count: 0 };
}
handleClick(event) {
this.setState({ count: count + 1 });
},
render() {
return (

{this.state.count}

);
}
}

PROP TYPE-CHECKING
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
mixins: [IntlMixin],
render() {
return (
{this.getIntlMessage(‘counter.label’)}

);
}
}

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.

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

React & Redux

More Related Content

What's hot (20)

Similar to React & Redux (20)

Recently uploaded (20)

React & Redux