React.js

A javascript library for building user interfaces

Opensourced: May 2013.

React is V in MVC

Key features:

  • Simple & Declarative
  • Component Based
  • Virtual DOM
  • Enforcing One-way Dataflow
  • Synthetic Events

Component Based

Not web components.

Build reusable components.

You can consider your app as a tree of components.

Sample Component

var React = require('react');
var Counter = React.createClass({
  getInitialState: function() {
    return { count: 0 }
  },
  incrementCount: function () {
    this.setState({count: this.state.count + 1})
  },
  render: function() {
    var styleObj = {padding:"10px", "margin-left":"5px"}
    return (<div>
        Total {this.props.purpose} count: {this.state.count}
        <button style={styleObj} onClick={this.incrementCount}>⊕</button>
      </div>)
  }
});
module.exports = Counter;

Demo

Virtual DOM

Represent DOM as intermediate js object. Whenever there's need in render, generate VDOM tree, diff it with previous state, generate minimum sets of changes, apply to actual DOM. Repeat.

Something changes — RERENDER EVERYTHING

JSX

Optional HTML-like syntax to create React tree nodes. You have it inside your components, thus your whole component incapsulates both markup & behaviour

      <div>
        <nav id='main-nav'>
          <li className='list-item'><a href='/'></a></li>
          <li className='list-item'><a href='/'></a></li>
        </nav>
        <Page />
      </div>

->

      React.createElement("div", null,
        React.createElement("nav", {id: "main-nav"},
          React.createElement("li", {className: "list-item"}, React.createElement("a", {href: "/"})),
          React.createElement("li", {className: "list-item"}, React.createElement("a", {href: "/"}))
        ),
        React.createElement(Page, null)
      )

One-way dataflow

Each components has state, which can be changed/reset using components API

Each components has props (properties), which are passed to it from parent component.

<Route name="createEvent" handler = {require('./EventFormComponent')}/>

Depend on only changing state of the component, props are given. Owner components sets props on its children.

Root component

Mounted using React.render and passing component followed by the DOM node to attach to.

React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );

Component Specs

  • render() - required method that returns null/false or another component.
  • getInitialState()
  • getDefaultProps()
  • propTypes - object to specify properties validations
  • mixins - Mixins
  • statics - static methods for the component
  • displayName - used in debugging

Lifecycle

  • componentWillMount
  • componentDidMount
  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate
  • componentWillUnmount

Event System

React deals with crossbrowser pain & passes you SyntheticEvent wrappers for browser's native events.

NB:

The event handlers are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name

Addons

Джон