|
| 1 | +--- |
| 2 | +title: "React v15.5.0" |
| 3 | +author: acdlite |
| 4 | +--- |
| 5 | + |
| 6 | +It's been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a [complete rewrite](https://www.youtube.com/watch?v=ZCuYPiUIONs) of React's internals. [We take stability seriously](/react/contributing/design-principles.html#stability), and are committed to bringing those improvements to all of our users with minimal effort. |
| 7 | + |
| 8 | +To that end, today we're releasing React 15.5.0. |
| 9 | + |
| 10 | +### New Deprecation Warnings |
| 11 | + |
| 12 | +The biggest change is that we've extracted `React.PropTypes` and `React.createClass` into their own packages. Both are still accessible via the main `React` object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations. |
| 13 | + |
| 14 | +These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats `console.error` as a failure. |
| 15 | + |
| 16 | +**Adding new warnings is not something we do lightly.** Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward. |
| 17 | + |
| 18 | +So while the warnings may cause frustration in the short-term, we believe **prodding developers to migrate their codebases now prevents greater frustration in the future**. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes. |
| 19 | + |
| 20 | +For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the [react-codemod](https://github.com/reactjs/react-codemod) project. |
| 21 | + |
| 22 | +### Migrating from React.PropTypes |
| 23 | + |
| 24 | +Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them. |
| 25 | + |
| 26 | +In 15.5, instead of accessing `PropTypes` from the main `React` object, install the `prop-types` package and import them from there: |
| 27 | + |
| 28 | +```js{11,16,25} |
| 29 | +// Before (15.4 and below) |
| 30 | +import React from 'react'; |
| 31 | +
|
| 32 | +class Component extends React.Component { |
| 33 | + render() { |
| 34 | + return <div>{this.props.text}</div>; |
| 35 | + } |
| 36 | +} |
| 37 | +
|
| 38 | +Component.propTypes = { |
| 39 | + text: React.PropTypes.string.isRequired, |
| 40 | +} |
| 41 | +
|
| 42 | +// After (15.5) |
| 43 | +import React from 'react'; |
| 44 | +import PropTypes from 'prop-types'; |
| 45 | +
|
| 46 | +class Component extends React.Component { |
| 47 | + render() { |
| 48 | + return <div>{this.props.text}</div>; |
| 49 | + } |
| 50 | +} |
| 51 | +
|
| 52 | +Component.propTypes = { |
| 53 | + text: PropTypes.string.isRequired, |
| 54 | +}; |
| 55 | +``` |
| 56 | + |
| 57 | +The [codemod](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) for this change performs this conversion automatically. Basic usage: |
| 58 | + |
| 59 | +```bash |
| 60 | +jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path> |
| 61 | +``` |
| 62 | + |
| 63 | + |
| 64 | +The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly as before. The only change is that the built-in validators now live in a separate package. |
| 65 | + |
| 66 | +You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/frameworks/react/#setup-flow-with-react-a-classtoc-idtoc-setup-flow-with-react-hreftoc-setup-flow-with-reacta). |
| 67 | + |
| 68 | +### Migrating from React.createClass |
| 69 | + |
| 70 | +When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: `React.createClass`. |
| 71 | + |
| 72 | +Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. **Along with functional components, JavaScript classes are now the [preferred way to create components in React](/react/docs/components-and-props.html#functional-and-class-components).** |
| 73 | + |
| 74 | +For your existing `createClass` components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, `create-react-class` is available on npm as a drop-in replacement: |
| 75 | + |
| 76 | +```js{4,13,15} |
| 77 | +// Before (15.4 and below) |
| 78 | +var React = require('react'); |
| 79 | +
|
| 80 | +var Component = React.createClass({ |
| 81 | + mixins: [MixinA], |
| 82 | + render() { |
| 83 | + return <Child />; |
| 84 | + } |
| 85 | +}); |
| 86 | +
|
| 87 | +// After (15.5) |
| 88 | +var React = require('react'); |
| 89 | +var createReactClass = require('create-react-class'); |
| 90 | +
|
| 91 | +var Component = createReactClass({ |
| 92 | + mixins: [MixinA], |
| 93 | + render() { |
| 94 | + return <Child />; |
| 95 | + } |
| 96 | +}); |
| 97 | +``` |
| 98 | + |
| 99 | +Your components will continue to work the same as they did before. |
| 100 | + |
| 101 | +The [codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) for this change attempts to convert a `createClass` component to a JavaScript class, with a fallback to `create-react-class` if necessary. It has converted thousands of components internally at Facebook. |
| 102 | + |
| 103 | +Basic usage: |
| 104 | + |
| 105 | +```bash |
| 106 | +jscodeshift -t react-codemod/transforms/class.js path/to/components |
| 107 | +``` |
| 108 | + |
| 109 | +### Discontinuing support for React Addons |
| 110 | + |
| 111 | +We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages. |
| 112 | + |
| 113 | +- **react-addons-create-fragment** – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead. |
| 114 | +- **react-addons-css-transition-group** - Use [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement. |
| 115 | +- **react-addons-linked-state-mixin** - Explicitly set the `value` and `onChange` handler instead. |
| 116 | +- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/react/docs/react-api.html#react.purecomponent) instead. |
| 117 | +- **react-addons-shallow-compare** - Use [`React.PureComponent`](/react/docs/react-api.html#react.purecomponent) instead. |
| 118 | +- **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement. |
| 119 | +- **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) instead, a drop-in replacement. |
| 120 | +- **react-linked-input** - Explicitly set the `value` and `onChange` handler instead. |
| 121 | + |
| 122 | +We're also discontinuing support for the `react-with-addons` UMD build. It will be removed in React 16. |
| 123 | + |
| 124 | +### React Test Utils |
| 125 | + |
| 126 | +Currently, the React Test Utils live inside `react-addons-test-utils`. As of 15.5, we're deprecating that package and moving them to `react-dom/test-utils` instead: |
| 127 | + |
| 128 | +```js |
| 129 | +// Before (15.4 and below) |
| 130 | +import TestUtils from 'react-addons-test-utils'; |
| 131 | + |
| 132 | +// After (15.5) |
| 133 | +import TestUtils from 'react-dom/test-utils'; |
| 134 | +``` |
| 135 | + |
| 136 | +This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer. |
| 137 | + |
| 138 | +The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to `react-test-renderer/shallow`. |
| 139 | + |
| 140 | +```js{2,5} |
| 141 | +// Before (15.4 and below) |
| 142 | +import { createRenderer } from 'react-addons-test-utils'; |
| 143 | +
|
| 144 | +// After (15.5) |
| 145 | +import { createRenderer } from 'react-test-renderer/shallow'; |
| 146 | +``` |
| 147 | + |
| 148 | +--- |
| 149 | + |
| 150 | +## Acknowledgements |
| 151 | + |
| 152 | +A special thank you to these folks for transferring ownership of npm package names: |
| 153 | + |
| 154 | +- [Jason Miller](https://github.com/developit) |
| 155 | +- [Aaron Ackerman](https://github.com/aackerman) |
| 156 | +- [Vinicius Marson](https://github.com/viniciusmarson) |
| 157 | + |
| 158 | +--- |
| 159 | + |
| 160 | +## Installation |
| 161 | + |
| 162 | +We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started. |
| 163 | + |
| 164 | +To install React with Yarn, run: |
| 165 | + |
| 166 | +```bash |
| 167 | +yarn add react@^15.5.0 react-dom@^15.5.0 |
| 168 | +``` |
| 169 | + |
| 170 | +To install React with npm, run: |
| 171 | + |
| 172 | +```bash |
| 173 | +npm install --save react@^15.5.0 react-dom@^15.5.0 |
| 174 | +``` |
| 175 | + |
| 176 | +We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time. |
| 177 | + |
| 178 | +Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/react/docs/installation.html#development-and-production-versions). |
| 179 | + |
| 180 | +In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/react/docs/installation.html#using-a-cdn) on your page: |
| 181 | + |
| 182 | +* **React** |
| 183 | + Dev build with warnings: [react/dist/react.js ](https://unpkg.com/[email protected]/dist/react.js) |
| 184 | + Minified build for production: [react/dist/react.min.js ](https://unpkg.com/[email protected]/dist/react.min.js) |
| 185 | +* **React with Add-Ons** |
| 186 | + Dev build with warnings: [react/dist/react-with-addons.js ](https://unpkg.com/[email protected]/dist/react-with-addons.js) |
| 187 | + Minified build for production: [react/dist/react-with-addons.min.js ](https://unpkg.com/[email protected]/dist/react-with-addons.min.js) |
| 188 | +* **React DOM** (include React in the page before React DOM) |
| 189 | + Dev build with warnings: [react-dom/dist/react-dom.js ](https://unpkg.com/[email protected]/dist/react-dom.js) |
| 190 | + Minified build for production: [react-dom/dist/react-dom.min.js ](https://unpkg.com/[email protected]/dist/react-dom.min.js) |
| 191 | +* **React DOM Server** (include React in the page before React DOM Server) |
| 192 | + Dev build with warnings: [react-dom/dist/react-dom-server.js ](https://unpkg.com/[email protected]/dist/react-dom-server.js) |
| 193 | + Minified build for production: [react-dom/dist/react-dom-server.min.js ](https://unpkg.com/[email protected]/dist/react-dom-server.min.js) |
| 194 | + |
| 195 | +We've also published version `15.5.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower. |
| 196 | + |
| 197 | +--- |
| 198 | + |
| 199 | +## Changelog |
| 200 | + |
| 201 | +## 15.5.0 (April 7, 2017) |
| 202 | + |
| 203 | +### React |
| 204 | + |
| 205 | +* Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e)) |
| 206 | +* Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28)) |
| 207 | +* Fixed an issue when using `ReactDOM` together with `ReactDOMServer`. ([@wacii](https://github.com/wacii) in [#9005](https://github.com/facebook/react/pull/9005)) |
| 208 | +* Fixed issue with Closure Compiler. ([@anmonteiro](https://github.com/anmonteiro) in [#8895](https://github.com/facebook/react/pull/8895)) |
| 209 | +* Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882)) |
| 210 | +* Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495)) |
| 211 | + |
| 212 | +### React DOM |
| 213 | + |
| 214 | +* Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359)) |
| 215 | +* Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn)) |
| 216 | + |
| 217 | +### React Test Renderer |
| 218 | + |
| 219 | +* Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512)) |
| 220 | +* Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn)) |
| 221 | + |
| 222 | +### React Addons |
| 223 | + |
| 224 | +* Last release for addons; they will no longer be actively maintained. |
| 225 | +* Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a)) |
| 226 | +* Updated to remove references to `React.createClass` and `React.PropTypes` ([@acdlite](https://github.com/acdlite) in [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175)) |
| 227 | +* `react-addons-test-utils` is deprecated. Use `react-dom/test-utils` and `react-test-renderer/shallow` instead. ([@bvaughn](https://github.com/bvaughn)) |
0 commit comments