Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Reactjs is Facebook library "V in MVC"

It's component based. (analogue of angular directives)

It's fast! (1500 rows taking 1.35 seconds with AngularJS versus 310ms with ReactJs.)

significantly more SEO friendly than most JavaScript MVC frameworks

  • Virtual DOM
  • Server rendering
  • Descriptive warnings
  • Custom event system
"In Ember 2.0, we will be adopting a "virtual DOM" and data flow model that embraces the best ideas from React and simplifies communication between components."
Sitepoint - "currently trying to React all the thing..."
virtual dom bigger picture

simple functions that take in props and state (discussed later) and render HTML

*note - you can render only single node

JSX lets you create JavaScript objects using HTML syntax.

/** @jsx React.DOM */

JSX why

Every component has a state object and a props object.

Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. This is often the most challenging part for newcomers to understand

props example state example
  • componentWillMount (activate) – Invoked once, on both client & server before rendering occurs.
  • componentDidMount – Invoked once, only on the client, after rendering occurs.
  • componentWillReveiveProps – Invoked on props change.
  • shouldComponentUpdate – Return value determines whether component should update.
  • componentWillUnmount (deactivate) – Invoked prior to unmounting component.
more specs & lifecycle

Separation of Concerns


Filter list example

addons and two-way data binding

TutsPlus Comparing Angular's Two-Way Data Binding to React's implementation... (react it's better with less code when it gets a bit more complicated)

...Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.

webpack (--hot) or browserify (watchify)


"automate all the things : })"

Style guide

react style guide

React addons

react-with-addons.js (experimental) - from one-way slide


mixins - reusable components (no mixins if you use ES6)


React.initializeTouchEvents(true); to enable touch event handling.


chrome extension

Flux is the application architecture. It's more of a pattern rather than a formal framework.

Only for application deals with dynamic data


Use a spacebar or arrow keys to navigate