By Sophie Alpert·
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!
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.
As always, the release is available for download from the CDN:
We’ve also published version 0.9.0
of the react
and react-tools
packages on npm and the react
package on bower.
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.
We’ve also added to the add-ons build React.addons.TestUtils, 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.
We’ve also made several other improvements and a few breaking changes; the full changelog is provided below.
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:
<div>Monkeys: {listOfMonkeys} {submitButton}</div>
In v0.8 and below, it was transformed to the following:
React.DOM.div(null, ' Monkeys: ', listOfMonkeys, submitButton);
In v0.9, it will be transformed to this JS instead:
React.DOM.div(null, 'Monkeys:', listOfMonkeys, ' ', submitButton);
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
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 and run it over your source tree to modify files in place. The transformed JSX files will preserve your code’s existing whitespace behavior.
componentDidMount
and componentDidUpdate
no longer receive the root node as a parameter; use this.getDOMNode()
insteadundefined
, the default value returned by getDefaultProps
will now be used insteadReact.unmountAndReleaseReactRootNode
was previously deprecated and has now been removedReact.renderComponentToString
is now synchronous and returns the generated HTML string<html>
tag using React) is now supported only when starting with server-rendered markupdeltaY
is no longer negatedinput
, select
, and textarea
elements, .getValue()
is no longer supported; use .getDOMNode().value
insteadthis.context
on components is now reserved for internal use by Reactdefs
, linearGradient
, polygon
, radialGradient
, stop
crossOrigin
for CORS requestsdownload
and hrefLang
for <a>
tagsmediaGroup
and muted
for <audio>
and <video>
tagsnoValidate
and formNoValidate
for formsproperty
for Open Graph <meta>
tagssandbox
, seamless
, and srcDoc
for <iframe>
tagsscope
for screen readersspan
for <colgroup>
tagspropTypes
in mixinsany
, arrayOf
, component
, oneOfType
, renderable
, shape
to React.PropTypes
statics
on component spec for static component methods.currentTarget
is now properly set.key
is now polyfilled in all browsers for special (non-printable) keys.clipboardData
is now polyfilled in IE.dataTransfer
is now presentonMouseOver
and onMouseOut
in addition to the existing onMouseEnter
and onMouseLeave
eventsonLoad
and onError
on <img>
elementsonReset
on <form>
elementsautoFocus
attribute is now polyfilled consistently on input
, select
, and textarea
__owner__
property to each component’s props
object; passed-in props are now never mutatedReact.renderComponent
within componentDidMount
), events now properly bubble to the parent component.target
, .relatedTarget
, and .type
are now set properly.data
is now properly normalized in IE9 and IE10px
appended for the unitless properties columnCount
, flex
, flexGrow
, flexShrink
, lineClamp
, order
, widows
componentWillUnmount
handlerrenderComponentToString
would store event handlersdisabled
are rendered without a value (previously disabled="true"
, now simply disabled
)key
values containing .
are now supporteddata-reactid
values for performancekey
property changesdocument
only when necessary, improving performance in some cases.returnValue
in modern browsers, eliminating a warning in ChromescrollLeft
and scrollTop
are no longer accessed on document.body, eliminating a warning in ChromeReact.addons.TestUtils
was added to help write unit testsReact.addons.TransitionGroup
was renamed to React.addons.CSSTransitionGroup
React.addons.TransitionGroup
was added as a more general animation wrapperReact.addons.cloneWithProps
was added for cloning components and modifying their propstransitionLeave
in CSSTransitionGroup<input>
elements, checkedLink
is now supported for two-way bindingreact-tools
npm package no longer includes the React core libraries; use the react
package instead.displayName
is now added in more cases, improving error messages and names in the React Dev ToolsJSXTransformer
now uses source maps automatically in modern browsersJSXTransformer
error messages now include the filename and problematic line contents when a file fails to parse