React v0.13 RC

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

We have already talked a little about the upcoming changes. The main thing is of course support for ES6 classes. More details in our beta announcement . We are very excited about this event! Sebastian also wrote this morning about some changes with ReactElement . We hope that the changes we are working on will improve productivity and development experience.


Pre-release is available for download:

• React
  Development version (with warnings): http://fb.me/react-0.13.0-rc1.js
  Minified version for production: 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
  Minimized version for production: http://fb.me/react-with- addons-0.13.0-rc1.min.js
  
• JSX compiler for the browser
  http://fb.me/JSXTransformer-0.13.0-rc1.js
  

We have also published 0.13.0-rc1version reactand react-toolsin npm and reactin the bower.

Changes

Kernel React

Critical changes

• The change propsafter the item has been created is deprecated. In dev mode you will get a warning; future versions of React will include optimizations, assuming that it propsis a constant.
• Static methods (defined in statics) are no longer automatically bound to a component.
• The definition order refhas changed a bit so that the component reference is available immediately after the method is called componentDidMount; this change will be noticeable if your component calls the parent callback inside componentDidMount, and this is an anti-pattern and this should be avoided no matter what.
• Changes after a call are setStatenow always applied in batch mode, which means they are asynchronous. Previously, the first call, at the first connection (mount) of the component was synchronous.
• Call setStateand forceUpdateon the disconnected (unmounted) component is now throws a warning, rather than an exception. This helps to avoid performance problems in promises.
• Access to most internal properties has been completely removed, including this._pendingStateand this._rootNodeID.

New opportunities

• Support for ES6 classes for creating React components; more details
• Added a new API React.findDOMNode(component), you need to use it instead component.getDOMNode(). The base class for components based on ES6 classes does not have a method getDOMNode.
• The new style for refwill allow using callback instead of the name:

   this._photo = c} />

  so you can refer to component c this._photo(instead of ref="photo"what it will this.refs.photo)
• The first argument to a method this.setState()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 one this._pendingStatethat is no longer there.
• Support for iterators and immutable-js sequences in this.props.children.

Outdated

• ComponentClass.typeoutdated. Use simply ComponentClass, usually like this:
  

  element.type === ComponentClass

  
  
• Some of the methods available in the components created with createClasshave been removed, or are out of date because of the ES6 classes, for example: getDOMNode, setProps, replaceState.

React with add-ons

Outdated

• React.addons.classSetoutdated. This functionality can be replaced by some freely available modules. For example, classnames are one of such modules.

React tools

Critical changes

• When using ES6 syntax, methods are classno longer enumerated by default, this is a requirement Object.defineProperty; if you support browsers like IE8, you can use a flag
  --target es3that will restore the old behavior.
  

New opportunities

• An option --targetfor the jsx command, allows you to specify the version of ECMAScript.
  
  • es5 default.
    
  • es3restores previous default behavior. Also makes the use of reserved words safe, for example, this.staticwill be replaced by this['static']for compatibility with IE8.
    
  
  
• Transformations for the spread operator were also included.

Jsx

Critical changes

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