React v0.9

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.

What’s New?

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.

JSX Whitespace

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:

1
2
3
4
<div>
Monkeys:
{listOfMonkeys} {submitButton}
</div>

In v0.8 and below, it was transformed to the following:

1
2
3
4
React.DOM.div(null,
" Monkeys: ",
listOfMonkeys, submitButton
)

In v0.9, it will be transformed to this JS instead:

1
2
3
4
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.

Changelog

React Core

Breaking Changes

  • The lifecycle methods componentDidMount and componentDidUpdate no longer receive the root node as a parameter; use this.getDOMNode() instead
  • Whenever a prop is equal to undefined, the default value returned by getDefaultProps will now be used instead
  • React.unmountAndReleaseReactRootNode was previously deprecated and has now been removed
  • React.renderComponentToString is now synchronous and returns the generated HTML string
  • Full-page rendering (that is, rendering the <html> tag using React) is now supported only when starting with server-rendered markup
  • On mouse wheel events, deltaY is no longer negated
  • 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)
  • On input, select, and textarea elements, .getValue() is no longer supported; use .getDOMNode().value instead
  • this.context on components is now reserved for internal use by React

New Features

  • React now never rethrows errors, so stack traces are more accurate and Chrome’s purple break-on-error stop sign now works properly
  • Added support for SVG tags defs, linearGradient, polygon, radialGradient, stop
  • Added support for more attributes:
    • crossOrigin for CORS requests
    • download and hrefLang for <a> tags
    • mediaGroup and muted for <audio> and <video> tags
    • noValidate and formNoValidate for forms
    • property for Open Graph <meta> tags
    • sandbox, seamless, and srcDoc for <iframe> tags
    • scope for screen readers
    • span for <colgroup> tags
  • Added support for defining propTypes in mixins
  • Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes
  • Added support for statics on component spec for static component methods
  • On all events, .currentTarget is now properly set
  • On keyboard events, .key is now polyfilled in all browsers for special (non-printable) keys
  • On clipboard events, .clipboardData is now polyfilled in IE
  • On drag events, .dataTransfer is now present
  • Added support for onMouseOver and onMouseOut in addition to the existing onMouseEnter and onMouseLeave events
  • Added support for onLoad and onError on <img> elements
  • Added support for onReset on <form> elements
  • The autoFocus attribute is now polyfilled consistently on input, select, and textarea

Bug Fixes

  • React no longer adds an __owner__ property to each component’s props object; passed-in props are now never mutated
  • When nesting top-level components (e.g., calling React.renderComponent within componentDidMount), events now properly bubble to the parent component
  • Fixed a case where nesting top-level components would throw an error when updating
  • Passing an invalid or misspelled propTypes type now throws an error
  • On mouse enter/leave events, .target, .relatedTarget, and .type are now set properly
  • On composition events, .data is now properly normalized in IE9 and IE10
  • CSS property values no longer have px appended for the unitless properties columnCount, flex, flexGrow, flexShrink, lineClamp, order, widows
  • Fixed a memory leak when unmounting children with a componentWillUnmount handler
  • Fixed a memory leak when renderComponentToString would store event handlers
  • Fixed an error that could be thrown when removing form elements during a click handler
  • Boolean attributes such as disabled are rendered without a value (previously disabled="true", now simply disabled)
  • key values containing . are now supported
  • Shortened data-reactid values for performance
  • Components now always remount when the key property changes
  • Event handlers are attached to document only when necessary, improving performance in some cases
  • Events no longer use .returnValue in modern browsers, eliminating a warning in Chrome
  • scrollLeft and scrollTop are no longer accessed on document.body, eliminating a warning in Chrome
  • General performance fixes, memory optimizations, improvements to warnings and error messages

React with Addons

  • React.addons.TestUtils was added to help write unit tests
  • React.addons.TransitionGroup was renamed to React.addons.CSSTransitionGroup
  • React.addons.TransitionGroup was added as a more general animation wrapper
  • React.addons.cloneWithProps was added for cloning components and modifying their props
  • Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
  • Bug fix for changing transitionLeave in CSSTransitionGroup
  • Performance optimizations for CSSTransitionGroup
  • On checkbox <input> elements, checkedLink is now supported for two-way binding

JSX Compiler and react-tools Package

  • Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
  • The react-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 Tools
  • Fixed an issue where an invalid token error was thrown after a JSX closing tag
  • JSXTransformer now uses source maps automatically in modern browsers
  • JSXTransformer error messages now include the filename and problematic line contents when a file fails to parse

React v0.9 RC

We’re almost ready to release React v0.9! We’re posting a release candidate so that you can test your apps on it; we’d much prefer to find show-stopping bugs now rather than after we release.

The release candidate is available for download from the CDN:

We’ve also published version 0.9.0-rc1 of the react and react-tools packages on npm and the react package on bower.

Please try these builds out and file an issue on GitHub if you see anything awry.

Upgrade Notes

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:

1
2
3
4
<div>
Monkeys:
{listOfMonkeys} {submitButton}
</div>

In v0.8 and below, it was transformed to the following:

1
2
3
4
React.DOM.div(null,
" Monkeys: ",
listOfMonkeys, submitButton
)

In v0.9, it will be transformed to this JS instead:

1
2
3
4
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 a JS string like {"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.

Changelog

React Core

Breaking Changes

  • The lifecycle methods componentDidMount and componentDidUpdate no longer receive the root node as a parameter; use this.getDOMNode() instead
  • Whenever a prop is equal to undefined, the default value returned by getDefaultProps will now be used instead
  • React.unmountAndReleaseReactRootNode was previously deprecated and has now been removed
  • React.renderComponentToString is now synchronous and returns the generated HTML string
  • Full-page rendering (that is, rendering the <html> tag using React) is now supported only when starting with server-rendered markup
  • On mouse wheel events, deltaY is no longer negated
  • When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
  • On input, select, and textarea elements, .getValue() is no longer supported; use .getDOMNode().value instead
  • this.context on components is now reserved for internal use by React

New Features

  • React now never rethrows errors, so stack traces are more accurate and Chrome’s purple break-on-error stop sign now works properly
  • Added a new tool for profiling React components and identifying places where defining shouldComponentUpdate can give performance improvements
  • Added support for SVG tags defs, linearGradient, polygon, radialGradient, stop
  • Added support for more attributes:
    • noValidate and formNoValidate for forms
    • property for Open Graph <meta> tags
    • sandbox, seamless, and srcDoc for <iframe> tags
    • scope for screen readers
    • span for <colgroup> tags
  • Added support for defining propTypes in mixins
  • Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes
  • Added support for statics on component spec for static component methods
  • On all events, .currentTarget is now properly set
  • On keyboard events, .key is now polyfilled in all browsers for special (non-printable) keys
  • On clipboard events, .clipboardData is now polyfilled in IE
  • On drag events, .dataTransfer is now present
  • Added support for onMouseOver and onMouseOut in addition to the existing onMouseEnter and onMouseLeave events
  • Added support for onLoad and onError on <img> elements
  • Added support for onReset on <form> elements
  • The autoFocus attribute is now polyfilled consistently on input, select, and textarea

Bug Fixes

  • React no longer adds an __owner__ property to each component’s props object; passed-in props are now never mutated
  • When nesting top-level components (e.g., calling React.renderComponent within componentDidMount), events now properly bubble to the parent component
  • Fixed a case where nesting top-level components would throw an error when updating
  • Passing an invalid or misspelled propTypes type now throws an error
  • On mouse enter/leave events, .target, .relatedTarget, and .type are now set properly
  • On composition events, .data is now properly normalized in IE9 and IE10
  • CSS property values no longer have px appended for the unitless properties columnCount, flex, flexGrow, flexShrink, lineClamp, order, widows
  • Fixed a memory leak when unmounting children with a componentWillUnmount handler
  • Fixed a memory leak when renderComponentToString would store event handlers
  • Fixed an error that could be thrown when removing form elements during a click handler
  • key values containing . are now supported
  • Shortened data-reactid values for performance
  • Components now always remount when the key property changes
  • Event handlers are attached to document only when necessary, improving performance in some cases
  • Events no longer use .returnValue in modern browsers, eliminating a warning in Chrome
  • scrollLeft and scrollTop are no longer accessed on document.body, eliminating a warning in Chrome
  • General performance fixes, memory optimizations, improvements to warnings and error messages

React with Addons

  • React.addons.TransitionGroup was renamed to React.addons.CSSTransitionGroup
  • React.addons.TransitionGroup was added as a more general animation wrapper
  • React.addons.cloneWithProps was added for cloning components and modifying their props
  • Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
  • Bug fix for changing transitionLeave in CSSTransitionGroup
  • Performance optimizations for CSSTransitionGroup
  • On checkbox <input> elements, checkedLink is now supported for two-way binding

JSX Compiler and react-tools Package

  • Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
  • The react-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 Tools
  • Fixed an issue where an invalid token error was thrown after a JSX closing tag
  • JSXTransformer now uses source maps automatically in modern browsers
  • JSXTransformer error messages now include the filename and problematic line contents when a file fails to parse

Community Round-up #16

There have been many posts recently covering the why and how of React. This week’s community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

React in a nutshell

Got five minutes to pitch React to your coworkers? John Lynch (@johnrlynch) put together this excellent and refreshing slideshow:

React’s diff algorithm

React core team member Christopher Chedeau (@vjeux) explores the innards of React’s tree diffing algorithm in this extensive and well-illustrated post.

While we’re talking about tree diffing: Matt Esch (@MatthewEsch) created this project, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.

Many, many new introductions to React!

James Padosley wrote a short post on the basics (and merits) of React: What is React?

What I like most about React is that it doesn’t impose heady design patterns and data-modelling abstractions on me. […] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.

Read the full post…

Taylor Lapeyre (@taylorlapeyre) wrote another nice introduction to React.

React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.

Read the full post…

This “Deep explanation for newbies” by @ProJavaScript explains how to get started building a React game without using the optional JSX syntax.

React around the world

It’s great to see the React community expand internationally. This site features a React introduction in Russian.

React tutorial series

Christopher Pitt explains React Components and React Properties. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the other posts in his React Tutorial series, e.g. on using React + Backbone Model and React + Backbone Router.

Beginner tutorial: Implementing the board game Go

Chris LaRose walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his tutorial or go straight to the code.

Egghead.io video tutorials

Joe Maddalone (@joemaddalone) of egghead.io created a series of React video tutorials, such as this introduction to React Components. [part 1], [part 2]

“React: Finally, a great server/client web stack”

Eric Florenzano (@ericflo) sheds some light on what makes React perfect for server rendering:

[…] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some JavaScript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. […]

What I’ve discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.

Read the full post…

Building a complex React component

Matt Harrison walks through the process of creating an SVG-based Resistance Calculator using React.

Random Tweets

,