{"files":[{"status":"A","path":"docs\/_posts\/2016-04-07-react-v15.md"}],"commit":{"authorName":"Dan Abramov","subject":"Add React 15 post","revision":"75f492507421f243f49ef9cfdcab5c557022eefe","shortRevision":"75f4925074","authoredAt":"2016-04-05T02:22:02+01:00","authorEmail":"dan.abramov@gmail.com"},"patch":"diff --git a\/docs\/_posts\/2016-04-07-react-v15.md b\/docs\/_posts\/2016-04-07-react-v15.md\nnew file mode 100644\nindex 0000000000..b268c69311\n--- \/dev\/null\n+++ b\/docs\/_posts\/2016-04-07-react-v15.md\n@@ -0,0 +1,257 @@\n+---\n+title: \"React v15.0\"\n+author: gaearon\n+---\n+\n+We would like to thank the React community for reporting issues and regressions in the release candidates on our [issue tracker](https:\/\/github.com\/facebook\/react\/issues\/). Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.\n+\n+As a reminder, [we’re switching to major versions](\/react\/blog\/2016\/02\/19\/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that [we no longer actively support Internet Explorer 8](\/react\/blog\/2016\/01\/12\/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.\n+\n+React 15 brings significant improvements to how we interact with the DOM:\n+\n+* We are now using `document.createElement` instead of setting `innerHTML` when mounting components. This allows us to get rid of the `data-reactid` attribute on every node and make the DOM lighter. Using `document.createElement` is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.\n+\n+* Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we [added support for all the SVG attributes that are recognized by today’s browsers](https:\/\/github.com\/facebook\/react\/pull\/6243). If we missed any of the attributes you’d like to use, please [let us know](https:\/\/github.com\/facebook\/react\/issues\/1657). As a bonus, thanks to using `document.createElement`, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.\n+\n+* We received some amazing contributions from the community in this release, and we would like to highlight [this pull request](https:\/\/github.com\/facebook\/react\/pull\/5753) by [Michael Wiencek](https:\/\/github.com\/mwiencek) in particular. Thanks to Michael’s work, React 15 no longer emits extra `` nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.\n+\n+While this isn’t directly related to the release, we understand that in order to receive more community contributions like Michael’s, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing [React core team weekly meeting notes](https:\/\/github.com\/reactjs\/core-notes) again. We also intend to introduce an RFC process inspired by [Ember RFCs](https:\/\/github.com\/emberjs\/rfcs) so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog.\n+\n+We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!\n+\n+## Upgrade Guide\n+\n+As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.\n+\n+If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases.\n+\n+See the changelog below for more details.\n+\n+## Installation\n+\n+We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:\n+\n+* `npm install --save react react-dom`\n+\n+Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.\n+\n+If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.\n+\n+* **React** \n+ Dev build with warnings: \n+ Minified build for production: \n+* **React with Add-Ons** \n+ Dev build with warnings: \n+ Minified build for production: \n+* **React DOM** (include React in the page before React DOM) \n+ Dev build with warnings: \n+ Minified build for production: \n+\n+## Changelog\n+\n+### Major changes\n+\n+- #### `document.createElement` is in and `data-reactid` is out\n+\n+ There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we’ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node. \n+\n+ [@spicyj](https:\/\/github.com\/spicyj) in [#5205](https:\/\/github.com\/facebook\/react\/pull\/5205)<\/small>\n+\n+- #### No more extra ``s\n+\n+ Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra ``s. For example, in our most basic example on the home page we render `

Hello {this.props.name}<\/div>`, resulting in markup that contained 2 ``s. Now we’ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it’s likely you are not impacted. However if you were targeting these ``s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. \n+\n+ [@mwiencek](https:\/\/github.com\/mwiencek) in [#5753](https:\/\/github.com\/facebook\/react\/pull\/5753)<\/small>\n+\n+- #### Rendering `null` now uses comment nodes\n+\n+ We’ve also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React 0.11 and was implemented by rendering `

[@spicyj](https:\/\/github.com\/spicyj) in [#5451](https:\/\/github.com\/facebook\/react\/pull\/5451)<\/small>\n+\n+- #### Functional components can now return `null` too\n+\n+ We added support for [defining stateless components as functions](\/react\/blog\/2015\/09\/10\/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldn’t reliably tell if your component is a function or a class](https:\/\/github.com\/facebook\/react\/issues\/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function. \n+\n+ [@jimfb](https:\/\/github.com\/jimfb) in [#5884](https:\/\/github.com\/facebook\/react\/pull\/5884)<\/small>\n+\n+- #### Improved SVG support\n+\n+ All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https:\/\/github.com\/facebook\/react\/issues\/1657). \n+\n+ [@zpao](https:\/\/github.com\/zpao) in [#6243](https:\/\/github.com\/facebook\/react\/pull\/6243)<\/small>\n+\n+### Breaking changes\n+\n+- #### No more extra ``s\n+\n+ It’s worth calling out the DOM structure changes above again, in particular the change from ``s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don’t want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use ``s in your `render` method. \n+\n+ [@mwiencek](https:\/\/github.com\/mwiencek) in [#5753](https:\/\/github.com\/facebook\/react\/pull\/5753)<\/small>\n+\n+- #### `React.cloneElement()` now resolves `defaultProps`\n+\n+ We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. In React 15, we’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. Only one of our 20,000 React components was negatively affected by this so we feel comfortable releasing this change without keeping the old behavior for another release cycle. \n+\n+ [@truongduy134](https:\/\/github.com\/truongduy134) in [#5997](https:\/\/github.com\/facebook\/react\/pull\/5997)<\/small>\n+\n+- #### `ReactPerf.getLastMeasurements()` is opaque\n+\n+ This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https:\/\/github.com\/facebook\/react\/pull\/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon. \n+\n+ [@gaearon](https:\/\/github.com\/gaearon) in [#6286](https:\/\/github.com\/facebook\/react\/pull\/6286)<\/small>\n+\n+- #### Removed deprecations\n+\n+ These deprecations were introduced nine months ago in v0.14 with a warning and are removed:\n+\n+ - Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`. \n+ [@jimfb](https:\/\/github.com\/jimfb) in [#5832](https:\/\/github.com\/facebook\/react\/pull\/5832)<\/small>\n+\n+ - Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`. \n+ [@jimfb](https:\/\/github.com\/jimfb) in [#5859](https:\/\/github.com\/facebook\/react\/pull\/5859), [@zpao](https:\/\/github.com\/zpao) in [#6016](https:\/\/github.com\/facebook\/react\/pull\/6016)<\/small>\n+\n+ - Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`. \n+ [@jimfb](https:\/\/github.com\/jimfb) in [#5570](https:\/\/github.com\/facebook\/react\/pull\/5570)<\/small>\n+\n+ - Deprecated CommonJS `react\/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds. \n+ [@gaearon](https:\/\/github.com\/gaearon) in [#6285](https:\/\/github.com\/facebook\/react\/pull\/6285)<\/small>\n+\n+ - Passing `children` to void elements like `` was deprecated, and now throws an error. \n+ [@jonhester](https:\/\/github.com\/jonhester) in [#3372](https:\/\/github.com\/facebook\/react\/pull\/3372)<\/small>\n+\n+ - React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now. \n+ [@jimfb](https:\/\/github.com\/jimfb) in [#5495](https:\/\/github.com\/facebook\/react\/pull\/5495)<\/small>\n+\n+### New deprecations, introduced with a warning\n+\n+Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.\n+\n+- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https:\/\/www.npmjs.com\/package\/react-linked-input). \n+[@jimfb](https:\/\/github.com\/jimfb) in [#6127](https:\/\/github.com\/facebook\/react\/pull\/6127)<\/small>\n+\n+- Future versions of React will treat `` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled. \n+[@antoaravinth](https:\/\/github.com\/antoaravinth) in [#5048](https:\/\/github.com\/facebook\/react\/pull\/5048)<\/small>\n+\n+- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`. \n+[@gaearon](https:\/\/github.com\/gaearon) in [#6287](https:\/\/github.com\/facebook\/react\/pull\/6287)<\/small>\n+\n+### New helpful warnings\n+\n+- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead. \n+[@spicyj](https:\/\/github.com\/spicyj) in [#5083](https:\/\/github.com\/facebook\/react\/pull\/5083)<\/small>\n+\n+- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. Unitless *number* values like `width: 300` are unchanged. \n+[@pluma](https:\/\/github.com\/pluma) in [#5140](https:\/\/github.com\/facebook\/react\/pull\/5140)<\/small>\n+\n+- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. \n+[@kentcdodds](https:\/\/github.com\/kentcdodds) in [#5940](https:\/\/github.com\/facebook\/react\/pull\/5940) and [@koba04](https:\/\/github.com\/koba04) in [#5947](https:\/\/github.com\/facebook\/react\/pull\/5947)<\/small>\n+\n+- Elements will now warn when attempting to read `ref` and `key` from the props. \n+[@prometheansacrifice](https:\/\/github.com\/prometheansacrifice) in [#5744](https:\/\/github.com\/facebook\/react\/pull\/5744)<\/small>\n+\n+- React will now warn if you pass a different `props` object to `super()` in the constructor. \n+[@prometheansacrifice](https:\/\/github.com\/prometheansacrifice) in [#5346](https:\/\/github.com\/facebook\/react\/pull\/5346)<\/small>\n+\n+- React will now warn if you call `setState()` inside `getChildContext()`. \n+[@raineroviir](https:\/\/github.com\/raineroviir) in [#6121](https:\/\/github.com\/facebook\/react\/pull\/6121)<\/small>\n+\n+- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`. \n+[@ali](https:\/\/github.com\/ali) in [#5361](https:\/\/github.com\/facebook\/react\/pull\/5361)<\/small>\n+\n+- React DOM now warns about `NaN` values in `style`. \n+[@jontewks](https:\/\/github.com\/jontewks) in [#5811](https:\/\/github.com\/facebook\/react\/pull\/5811)<\/small>\n+\n+- React DOM now warns if you specify both `value` and `defaultValue` for an input. \n+[@mgmcdermott](https:\/\/github.com\/mgmcdermott) in [#5823](https:\/\/github.com\/facebook\/react\/pull\/5823)<\/small>\n+\n+- React DOM now warns if an input switches between being controlled and uncontrolled. \n+[@TheBlasfem](https:\/\/github.com\/TheBlasfem) in [#5864](https:\/\/github.com\/facebook\/react\/pull\/5864)<\/small>\n+\n+- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React. \n+[@jontewks](https:\/\/github.com\/jontewks) in [#6296](https:\/\/github.com\/facebook\/react\/pull\/6296)<\/small>\n+\n+- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`. \n+[@conorhastings](https:\/\/github.com\/conorhastings) in [#5193](https:\/\/github.com\/facebook\/react\/pull\/5193) and [@gaearon](https:\/\/github.com\/gaearon) in [#6310](https:\/\/github.com\/facebook\/react\/pull\/6310)<\/small>\n+\n+- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering. \n+[@conorhastings](https:\/\/github.com\/conorhastings) in [#5358](https:\/\/github.com\/facebook\/react\/pull\/5358)<\/small>\n+\n+- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments. \n+[@chicoxyzzy](https:\/\/github.com\/chicoxyzzy) in [#5390](https:\/\/github.com\/facebook\/react\/pull\/5390)<\/small>\n+\n+### Notable bug fixes\n+\n+- Fixed multiple small memory leaks. \n+[@spicyj](https:\/\/github.com\/spicyj) in [#4983](https:\/\/github.com\/facebook\/react\/pull\/4983) and [@victor-homyakov](https:\/\/github.com\/victor-homyakov) in [#6309](https:\/\/github.com\/facebook\/react\/pull\/6309)<\/small>\n+\n+- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. \n+[@jquense](https:\/\/github.com\/jquense) in [#4051](https:\/\/github.com\/facebook\/react\/pull\/4051)<\/small>\n+\n+- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes. \n+[@milesj](https:\/\/github.com\/milesj) in [#5787](https:\/\/github.com\/facebook\/react\/pull\/5787)<\/small>\n+\n+- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`. \n+[@ianobermiller](https:\/\/github.com\/ianobermiller) in [#5892](https:\/\/github.com\/facebook\/react\/pull\/5892)<\/small>\n+\n+- React DOM now supports the `cite` and `profile` HTML attributes. \n+[@AprilArcus](https:\/\/github.com\/AprilArcus) in [#6094](https:\/\/github.com\/facebook\/react\/pull\/6094) and [@saiichihashimoto](https:\/\/github.com\/saiichihashimoto) in [#6032](https:\/\/github.com\/facebook\/react\/pull\/6032)<\/small>\n+\n+- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties. \n+[@stevenvachon](https:\/\/github.com\/stevenvachon) in [#6133](https:\/\/github.com\/facebook\/react\/pull\/6133) and [@mnordick](https:\/\/github.com\/mnordick) in [#4779](https:\/\/github.com\/facebook\/react\/pull\/4779)<\/small>\n+\n+- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties. \n+[@rofrischmann](https:\/\/github.com\/rofrischmann) in [#6210](https:\/\/github.com\/facebook\/react\/pull\/6210) and [#6270](https:\/\/github.com\/facebook\/react\/pull\/6270)<\/small>\n+\n+- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements. \n+[@tomduncalf](https:\/\/github.com\/tomduncalf) in [#5187](https:\/\/github.com\/facebook\/react\/pull\/5187), [@milesj](https:\/\/github.com\/milesj) in [#6005](https:\/\/github.com\/facebook\/react\/pull\/6005), and [@ara4n](https:\/\/github.com\/ara4n) in [#5781](https:\/\/github.com\/facebook\/react\/pull\/5781)<\/small>\n+\n+- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. \n+[@syranide](https:\/\/github.com\/syranide) in [#1510](https:\/\/github.com\/facebook\/react\/pull\/1510)<\/small>\n+\n+- React DOM does not mistakingly coerce `children` to strings for Web Components. \n+[@jimfb](https:\/\/github.com\/jimfb) in [#5093](https:\/\/github.com\/facebook\/react\/pull\/5093)<\/small>\n+\n+- React DOM now correctly normalizes SVG `` events. \n+[@edmellum](https:\/\/github.com\/edmellum) in [#5720](https:\/\/github.com\/facebook\/react\/pull\/5720)<\/small>\n+\n+- React DOM does not throw if a `

dillon1000/react

Files changed