React Presentation

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

it's functional
different thinking (not mvc) think in react
JSX JSX gotchas
It's not lightweight ( or not)

Instagram.com is 100% built on React, both public site and internal tools.
Facebook.com‘s commenting interface, business management tools,Lookback video editor , page insights, and most, if not all, new JS development.
Khan Academy uses React for most new JS development.
Sberbank , Russia’s number one bank, is built with React.
The New York Times’s 2014 Red Carpet Project is built with React.

"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

example

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)

gulp

"automate all the things : })"