ReactJS

About Me

Twitter: @vaskointeractv

Github: bvasko

LinkedIn

Backbone, Angular, Ember = MV*

React = View only

What is React?

2 way data binding flow

MV* Scaled2 way data binding

Keeping the UIin sync becomesquite complicated

Unidirectional Data Flow(with Flux + React)

> Data sent to Store > Store Updates > View re-renders

Unidirectional data flow scaledNo explicit data binding

UI state is synced across the app

React Component Lifecycle

Virtual DOM

The virtual dom is a representation of the dom state held in memory

React performs a diff of the dom’s current state and next state

The changed nodes are marked for re-render

You can manually tweak this when you know something should not update

Components

Components are more than HTML templates

What it isn’t

● No explicit data binding● You never need to tell your

component to re-render

What it is

● Markup● Behavior● State

Each component is a mini self-contained API

[ code ] codepen

/** Comment Component: renders <li /> */

var Comment = React.createClass({ propTypes: { className: React.PropTypes.string, id: React.PropTypes.string, commentText: React.PropTypes.string }, render: function() { return ( <li

id={this.props.id} className={this.props.className}>

{this.props.commentText} </li>

); }});

It’s not all about performance

Highly Decoupled Components

● Decoupled from application data - same component can be used in a data entry app, QA app, etc.

● Event handlers are attached after the first rendering pass, allowing for server-side rendering of the HTML or re-use on mobile devices

● Behavior is also passed down through props, making it easier to have the component behave differently based on context

[ demo ]

Highly Testable

React Test UtilsTest browser events without a DOM

Highly Maintainable

React tools for the browserDisplays component name, state & propsOutput the selected component to the console with $rNew team members can quickly find their way around the codebase

Resources: Get started

https://github.com/coryhouse/react-slingshot

https://facebook.github.io/react/