|
| 1 | +--- |
| 2 | +title: React v0.9 |
| 3 | +layout: post |
| 4 | +author: Ben Alpert |
| 5 | +--- |
| 6 | + |
| 7 | +I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers! |
| 8 | + |
| 9 | +Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes. |
| 10 | + |
| 11 | +As always, the release is available for download from the CDN: |
| 12 | + |
| 13 | +* **React** |
| 14 | + Dev build with warnings: <http://fb.me/react-0.9.0.js> |
| 15 | + Minified build for production: <http://fb.me/react-0.9.0.min.js> |
| 16 | +* **React with Add-Ons** |
| 17 | + Dev build with warnings: <http://fb.me/react-with-addons-0.9.0.js> |
| 18 | + Minified build for production: <http://fb.me/react-with-addons-0.9.0.min.js> |
| 19 | +* **In-Browser JSX Transformer** |
| 20 | + <http://fb.me/JSXTransformer-0.9.0.js> |
| 21 | + |
| 22 | +We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower. |
| 23 | + |
| 24 | +## What’s New? |
| 25 | + |
| 26 | +This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly. |
| 27 | + |
| 28 | +We've also added to the add-ons build [React.addons.TestUtils](/react/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree. |
| 29 | + |
| 30 | +We've also made several other improvements and a few breaking changes; the full changelog is provided below. |
| 31 | + |
| 32 | +## JSX Whitespace |
| 33 | + |
| 34 | +In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code: |
| 35 | + |
| 36 | +```html |
| 37 | +<div> |
| 38 | + Monkeys: |
| 39 | + {listOfMonkeys} {submitButton} |
| 40 | +</div> |
| 41 | +``` |
| 42 | + |
| 43 | +In v0.8 and below, it was transformed to the following: |
| 44 | + |
| 45 | +```javascript |
| 46 | +React.DOM.div(null, |
| 47 | + " Monkeys: ", |
| 48 | + listOfMonkeys, submitButton |
| 49 | +) |
| 50 | +``` |
| 51 | + |
| 52 | +In v0.9, it will be transformed to this JS instead: |
| 53 | + |
| 54 | +```javascript{2,3} |
| 55 | +React.DOM.div(null, |
| 56 | + "Monkeys:", |
| 57 | + listOfMonkeys, " ", submitButton |
| 58 | +) |
| 59 | +``` |
| 60 | + |
| 61 | +We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added. |
| 62 | + |
| 63 | +In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior. |
| 64 | + |
| 65 | +## Changelog |
| 66 | + |
| 67 | +### React Core |
| 68 | + |
| 69 | +#### Breaking Changes |
| 70 | + |
| 71 | +- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead |
| 72 | +- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead |
| 73 | +- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed |
| 74 | +- `React.renderComponentToString` is now synchronous and returns the generated HTML string |
| 75 | +- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup |
| 76 | +- On mouse wheel events, `deltaY` is no longer negated |
| 77 | +- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance) |
| 78 | +- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead |
| 79 | + |
| 80 | +#### New Features |
| 81 | + |
| 82 | +- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly |
| 83 | +- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop` |
| 84 | +- Added support for more attributes: |
| 85 | + - `crossOrigin` for CORS requests |
| 86 | + - `download` and `hrefLang` for `<a>` tags |
| 87 | + - `mediaGroup` and `muted` for `<audio>` and `<video>` tags |
| 88 | + - `noValidate` and `formNoValidate` for forms |
| 89 | + - `property` for Open Graph `<meta>` tags |
| 90 | + - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags |
| 91 | + - `scope` for screen readers |
| 92 | + - `span` for `<colgroup>` tags |
| 93 | +- Added support for defining `propTypes` in mixins |
| 94 | +- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes` |
| 95 | +- Added support for `statics` on component spec for static component methods |
| 96 | +- On all events, `.currentTarget` is now properly set |
| 97 | +- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys |
| 98 | +- On clipboard events, `.clipboardData` is now polyfilled in IE |
| 99 | +- On drag events, `.dragTransfer` is now present |
| 100 | +- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events |
| 101 | +- Added support for `onLoad` and `onError` on `<img>` elements |
| 102 | +- Added support for `onReset` on `<form>` elements |
| 103 | +- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea` |
| 104 | + |
| 105 | +#### Bug Fixes |
| 106 | + |
| 107 | +- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated |
| 108 | +- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component |
| 109 | +- Fixed a case where nesting top-level components would throw an error when updating |
| 110 | +- Passing an invalid or misspelled propTypes type now throws an error |
| 111 | +- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly |
| 112 | +- On composition events, `.data` is now properly normalized in IE9 and IE10 |
| 113 | +- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows` |
| 114 | +- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler |
| 115 | +- Fixed a memory leak when `renderComponentToString` would store event handlers |
| 116 | +- Fixed an error that could be thrown when removing form elements during a click handler |
| 117 | +- Boolean attributes such as `disabled` are rendered without a value (previously `disabled="true"`, now simply `disabled`) |
| 118 | +- `key` values containing `.` are now supported |
| 119 | +- Shortened `data-reactid` values for performance |
| 120 | +- Components now always remount when the `key` property changes |
| 121 | +- Event handlers are attached to `document` only when necessary, improving performance in some cases |
| 122 | +- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome |
| 123 | +- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome |
| 124 | +- General performance fixes, memory optimizations, improvements to warnings and error messages |
| 125 | + |
| 126 | +### React with Addons |
| 127 | + |
| 128 | +- `React.addons.TestUtils` was added to help write unit tests |
| 129 | +- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup` |
| 130 | +- `React.addons.TransitionGroup` was added as a more general animation wrapper |
| 131 | +- `React.addons.cloneWithProps` was added for cloning components and modifying their props |
| 132 | +- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup |
| 133 | +- Bug fix for changing `transitionLeave` in CSSTransitionGroup |
| 134 | +- Performance optimizations for CSSTransitionGroup |
| 135 | +- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding |
| 136 | + |
| 137 | +### JSX Compiler and react-tools Package |
| 138 | + |
| 139 | +- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed |
| 140 | +- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead. |
| 141 | +- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools |
| 142 | +- Fixed an issue where an invalid token error was thrown after a JSX closing tag |
| 143 | +- `JSXTransformer` now uses source maps automatically in modern browsers |
| 144 | +- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse |
0 commit comments