React Introduces Support for ES6 Classes

Facebook has released React v0.13, bringing with it support for ES6 classes.

React is Facebook's JavaScript library for building reactive user interfaces, and is used to build the Instagram app, as well as parts of Facebook itself.

In the post React v0.13 Facebook developer Ben Alpert describes the support for ES6 classes as allowing developers "to have more flexibility when writing components" and that the plan is for it to eventually replace React.createClass.

More information was given on ES6 classes in the post React v0.13.0 Beta 1 by Sebastian Markbåge.

Markbåge says:

JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have to learn slightly different semantics for each framework.

We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.

In React 0.13.0 you no longer need to use React.createClass to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with react-tools by making use of the harmony option: jsx --harmony.

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.render(<HelloMessage name="Sebastian" />, mountNode);

The API is mostly what you would expect, with the exception of getInitialState. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise getDefaultProps and propTypes are really just properties on the constructor.

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

Elsewhere in React v0.13 there are numerous changes, including to React Core, React Tools and JSX.

New features in React Core include new top-level APIs, React.findDOMNode(component), and React.cloneElement(el, props). It is noted that React.findDOMNode(component) should now be used in place of component.getDOMNode(), and enables more patterns in the future. React.cloneElement is described as being for making copies of React elements, and is similar to React.addons.cloneWithProps, but that it preserves key and ref and does not merge style or className automatically.

For React Tools, --target option is newly available on the jsx command. This allows React users to specify and ECMAScript version to target.

React 0.13 brings breaking changes to JSX. Where previously using > or } when inside an element it would be treated as a string, due to a change in how some JSX is parsed it is now treated as a parse error. Alpert notes that for those affected "The jsx_orphaned_brackets_transformer package on npm can be used to find and fix potential issues in your JSX code."

React 0.13 is now available to download.