React v0.14 release candidate overview

We are glad to present you our first release candidate for React 0.14! We published an announcement of the upcoming changes in July, but now we have stabilized the release even more and we would like you to try it before we release the final version.

Let us know if you have any problems by creating a task in our GitHub repository.

Installation

We recommend using React via npm and using utilities such as browserify or webpack to build your code in one package:
')

npm install --save react@0.14.0-rc1 npm install --save react-dom@0.14.0-rc1 

Remember that by default, in development mode, React runs additional checks and provides useful warnings. Therefore, when deploying your application, set the NODE_ENV environment variable in production to use the production mode, in which React does not include service warnings and runs much faster.

If you cannot use npm , we also provide compiled builds for browsers for your convenience:

• React
  Dev build with warnings: https://fb.me/react-0.14.0-rc1.js
  Minified production assembly: https://fb.me/react-0.14.0-rc1.min.js
• React with add-ons
  Dev build with warnings: https://fb.me/react-with-addons-0.14.0-rc1.js
  Dev build with warnings: https://fb.me/react-with-addons-0.14.0-rc1.min.js
• React DOM (connect React on page before React DOM)
  Dev build with warnings: https://fb.me/react-dom-0.14.0-rc1.js
  Dev build with warnings: https://fb.me/react-dom-0.14.0-rc1.min.js

These builds are also available as bower packages: react and react-dom

Major changes

Two packages: React and React DOM

When we look at modules such as react-native , react-art , react-canvas and react-three , it becomes clear that the beauty and essence of React has nothing to do with browsers or DOM.

To make it more transparent and easier to use in more environments where React can render, we have divided the main react package into two: react and react-dom .
This opens the way for writing components that can be shared in the web versions of React and React Native. We do not assume that all the code in the application should be shared, but we want to be able to share components that behave the same on different platforms.

The react package contains React.createElement , .createClass , .Component , .PropTypes , .Children, and other element-oriented and component-oriented helpers. We think of them as isomorphic or universal helpers that you need to build components.

The react-dom package contains ReactDOM.render , .unmountComponentAtNode, and .findDOMNode . In react-dom / server , we have support for server rendering using ReactDOMServer.renderToString and .renderToStaticMarkup .

 var React = require('react'); var ReactDOM = require('react-dom');</p> <p>var MyComponent = React.createClass({ render: function() { return <div>Hello World</div>; } }); ReactDOM.render(<MyComponent />, node); 

We published an automated codemod script that we use on Facebook for this transition.

Add-ons were moved to separate packages: react-addons-clone-with-props , react-addons-create-fragment , react-addons-css-transition-group , react-addons-linked-state-mixin , react-addons-perf , react-addons-pure-render- mix , react-addons-shallow-compare , react-addons-test-utils , react-addons-transition-group and react-addons-update , as well as ReactDOM. unstable_batchedUpdates in react-dom

At the moment, please use certain versions of react and react-dom in your applications to prevent problems with versioning.

Links to DOM nodes

Another important change we made in this release is that the references (refs) to the DOM components now refer to the DOM node itself.
What this means: we looked at what you do with the reference (ref) to the React DOM components and realized that the only useful thing you can do with it is to call this.refs.giraffe.getDOMNode () to get the DOM node. In this release, this.refs.giraffe is the current DOM node.
Please note that links to custom (user-defined) components work the same as before; only native DOM components fall under this change.

 var Zoo = React.createClass({ render: function() { return <div>Giraffe name: <input ref="giraffe" /></div>; }, showName: function() { // Previously: var input = this.refs.giraffe.getDOMNode(); var input = this.refs.giraffe; alert(input.value); } }); 

This change also applies to the return result of ReactDOM.render when we pass the DOM node as the root component. As with refs, these changes do not apply to custom components. With these changes, we declare the .getDOMNode () method unsupported and replace it with the ReactDOM.findDOMNode method (see below).

"Stupid" components

In the typical React code, most of the components that you write should not have their own state, so-called. stateless. We present a new, simpler syntax for such components, in which you can pass props as an argument and return the element that you want to draw:

 //  ES2015 (ES6)  : var Aquarium = (props) => { var fish = getFish(props.species); return <Tank>{fish}</Tank>; }; //      : var Aquarium = ({species}) => ( <Tank> {getFish(species)} </Tank> ); //  : <Aquarium species="rainbowfish" /> 

This pattern is designed to encourage the creation of these simple components that should make up most of your applications. In the future, we will also be able to optimize performance, specifically for these components, while avoiding unnecessary checks and memory allocation.

React-tools is no longer supported.

The react-tools package and the browser version JSXTransformer.js are undesirable . You can continue using them in version 0.13.3 , but we no longer support them and recommend switching to using Babel , which has built-in support for React and JSX.

Compiler optimization

React now supports two compiler optimizations that can be included in Babel 5.8.23 and higher. Both of these transformations should be included only in production (for example, before minification) because, although they improve execution performance, they make service warnings more hidden and skip important checks that occur in development mode, including propTypes.

Embedding React elements: optimization.react.inlineElements converts JSX elements to objects such as {type: 'div', props: ...} instead of calling React.createElement .

Constant “ascent” of React elements: optimization.react.constantElements “raises” the creation of elements to the upper level of subtrees, which is completely static, which reduces the calls to React.createElement and movement. More importantly, it informs React that the subtree has not changed, so React can completely skip it when negotiating.

Critical changes

As usual, we have several critical changes in this release. Whenever we make big changes, we warn at least one release, t.ch. You have time to update your code. The Facebook code base is more than 15,000 React components, so in the React team, we always try to minimize the consequences of critical changes.

These three critical changes caused warnings in version 0.13, so you don’t need to do anything if your code has no warnings:

• The props object is now fixed, so modifying props after creating a component is no longer supported. In most cases, you must use React.cloneElement instead . These changes make your components easier to understand and include the compile optimization described above.
• Simple objects are no longer supported as descendants of React; instead, you should use arrays. You can use the createFragment helper for migration, which now returns an array.
• Add-Ons: classSet has been removed. Use classnames instead.

And these two changes were not diagnosed in 0.13, but they will be easy to find and fix:

• React.initializeTouchEvents is no longer needed and can be completely removed. Touch events now work automatically.
• Add-Ons: Due to the fact that references to DOM nodes have changed, as mentioned above, TestUtils.findAllInRenderedTree and its associated helpers are no longer available for receiving DOM components, but only for custom components.

New exceptions displayed in warnings

• Due to the fact that references to DOM nodes have changed, as mentioned above, this.getDOMNode () is now excluded and you can use ReactDOM.findDOMNode (this) instead. Note that in most cases, the call to findDOMNode is no longer needed - see the example shown above in the “References to DOM nodes" section.
  
  If you have a large code base, you can use our automated codemod script to automatically fix your code.
• setProps and replaceProps are now disabled. Instead, call ReactDOM.render at the top level again with new props.
• ES6 component classes should now extend React.Component appropriately to support stupid components. Template ES3 module continues to work.
• Reusing and changing the style of the object between renders is now prohibited. This reflects the essence of our change, freeze the props object.
• Add-Ons: cloneWithProps is now prohibited. Instead, use React.cloneElement (unlike cloneWithProps , cloneElement does not automatically combine className or style , you can manually combine them if necessary).
• Add-Ons: To improve reliability, the CSSTransitionGroup will no longer listen to the transition event. Instead, you must manually set the transition duration using properties such as transitionEnterTimeout = {500} .

Significant improvements

• Added React.Children.toArray which takes an object of nested descendants and returns a flat array with keys assigned to each child. This helper makes it easy to manage collections of children in your render methods, especially if you want to redistribute or extract this.props.children before passing them on. In addition, React.Children.map also now returns a simple array.
• For warnings, React now uses console.error instead of console.warn , t.ch. browsers show a full stack in the console. (Our warnings appear when using templates that will be changed in future versions and for code that most likely behaves unexpectedly, so we believe that our warnings should be “must-fix” errors.)
• Previously, using unreliable objects as a React descendants could lead to XSS vulnerabilities . This problem should be properly eliminated by validating entry at the application level and not using unreliable objects throughout the application code. As an additional level of protection, React now marks elements with a certain Symbol's ES2015 (ES6) type , in browsers that support it, in order to ensure that React will never consider unreliable JSON to be a valid element. If this additional security protection is important to you, you should add the Symbol polyfill for older browsers, such as Babel's polyfill .
• When possible, React DOM now generates XHTML-compatible markup.
• React DOM now supports the following standard HTML attributes: capture , challenge , inputMode , is , keyParams , keyType , minLength , summary , wrap . It also now supports these non-standard attributes: autoSave , results , security .
• React DOM now supports the following SVG attributes that can be rendered in namespaced attributes: xlinkActuate , xlinkArcrole , xlinkHref , xlinkRole , xlinkShow , xlinkTitle , xlinkType , xmlBase , xmlLang , xmlSpace .
• The SVG image tag is now supported in React DOM.
• In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or the attribute is = "..." ).
• React DOM now supports the following media events on the audio and video tags: onAbort , onCanPlay , onCanPlayThrough , onDruth onStalled , onSuspend , onTimeUpdate , onVolumeChange , onWaiting .
• Many small performance improvements have been made.
• Many warnings show more information than before.
• Add-Ons: The shallowCompare add- on has been added as a migration path for the PureRenderMixin for ES6 classes.
• Add-Ons: CSSTransitionGroup can now use arbitrary class names instead of adding -enter-active or similar to the name transition.

New useful warnings

• React DOM now warns you when nested HTML elements are invalid, which helps you to avoid surprising errors during the update.
• Connecting document.body directly as a container for ReactDOM.render now gives a warning because this can cause problems with browser extensions that modify the DOM.
• Sharing multiple React instances is not supported, so we now display a warning when we detect this case to help you avoid problems.

Significant fixes

• Click-events are handled by React DOM more reliably in mobile browsers, particularly Mobile Safari.
• SVG elements are created with the correct namespace in most cases.
• React DOM now correctly renders <option> elements with multiple text children and renders <select> elements on the server, with the option selected correctly.
• When two separate instances of React add nodes to the same document (including when the browser extension uses React), React DOM persistently tries not to throw exceptions during event handling.
• Using non-lowercase HTML tags in React DOM (for example, React.createElement ('DIV') ) is no longer a problem, however, we continue to recommend using lower case for compliance with the JSX tag convention (lower case for embedded components, title deed for custom components).
• React DOM understands that these CSS properties are dimensionless and do not add “px” to their values: animationIterationCount , boxOrdinalGroup , flexOrder , tabSize , stopOpacity .
• Add-Ons: Using test utilities, Simulate.mouseEnter and Simulate.mouseLeave now works
• Add-Ons: ReactTransitionGroup now correctly processes multiple nodes, removing simultaneously.

Posted by: Ben Alpert