React v0.13 RC

Over the weekend, we released the first (and hopefully the last) pre-release of React v0.13!

We have already talked a bit about future changes. The main thing is of course support for the ES6 classes. Read more in our beta announcement . We are very excited about this event! Sebastian also wrote some changes this morning with ReactElement . We hope that the changes we are working on will improve the performance and feel of the development.


Pre-release is available for download:

• React
  Development version (with warnings): http://fb.me/react-0.13.0-rc1.js
  Minified production version: http://fb.me/react-0.13.0-rc1.min.js
  
• React with additions
  Development version (with warnings) s: http://fb.me/react-with-addons-0.13.0-rc1.js
  Minified production version: http://fb.me/react-with-addons-0.13.0-rc1.min.js
  
• JSX browser compiler
  http://fb.me/JSXTransformer-0.13.0-rc1.js
  

')
We also published a 0.13.0-rc1 version of the react and react-tools in npm and react in bower.

Changes

Core react

Critical changes

• Changing the props after the item has been created is deprecated. In dev mode you will get a warning; future versions of React will include optimizations, assuming props is a constant.
• Static methods (defined in statics ) are no longer automatically bound to the component.
• The order of defining a little changed so that the component reference is available immediately after calling the componentDidMount method; this change will be noticeable if your component calls the parent callback inside the componentDidMount , and this is an anti-pattern and this should be avoided no matter what.
• Changes after calling setState now always applied in batch mode, which means asynchronous. Previously, the first call, at the first connection (mount) of the component was synchronous.
• Calling setState and forceUpdate on the unmounted component now throws a warning instead of an exception. This helps to avoid problems with productivity in promises.
• Access to most of the internal properties has been completely removed, including this._pendingState and this._rootNodeID .

New opportunities

• ES6 class support for creating React components; more
• Added new API React.findDOMNode(component) , it should be used instead of component.getDOMNode() . The base class for components based on ES6 classes does not have a getDOMNode method.
• The new style for ref will allow the use of a callback instead of the name:

   <Photo ref={(c) => this._photo = c} /> 

  so you can refer to the component with this._photo (instead of ref="photo" that will give this.refs.photo )
• The first argument to this.setState() method can be a function for transactional state updates, for example

   this.setState((state, props) => ({count: state.count + 1})); 

  This means that you no longer need to use this._pendingState , which no longer exists.
• Support for iterators and immutable-js sequences in this.props.children .

Outdated

• ComponentClass.type deprecated. Just use ComponentClass , usually like this:
  

   element.type === ComponentClass 

  
  
• Some of the methods available in components created with createClass have been removed or obsolete due to ES6 classes, for example: getDOMNode , setProps , replaceState .

React with additions

Outdated

• React.addons.classSet deprecated. This functionality may be replaced by some freely available modules. For example, classnames is one of these modules.

React Tools

Critical changes

• When using ES6 syntax, class methods are no longer enumerable by default; this is a requirement of Object.defineProperty ; if you support browsers like IE8, you can use the flag
  --target es3 , which will restore the old behavior.
  

New opportunities

• The --target option for the jsx command allows you to specify the ECMAScript version.
  
  • es5 by default.
    
  • es3 restores the previous default behavior. Also makes using reserved words safe, for example this.static will be replaced by this['static'] for compatibility with IE8.
    
  
  
• Conversions for the spread operator were also included.

Jsx

Critical changes

• The change affects how JSX is parsed, especially the use of > or } inside an element. Previously, this was transformed into a string, now it will be a parsing error. We will release a tool to find and fix potential problems in the JSX code.