{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2014/07/13/react-v0.11-rc1.html","result":{"data":{"markdownRemark":{"html":"

It’s that time again… we’re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.

\n

The release candidate is available for download from the CDN:

\n\n

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

\n

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

\n

getDefaultProps

\n

Starting in React 0.11, getDefaultProps() is called only once when React.createClass() is called, instead of each time a component is rendered. This means that getDefaultProps() can no longer vary its return value based on this.props and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.

\n

Rendering to null

\n

Since React’s release, people have been using work arounds to “render nothing”. Usually this means returning an empty <div/> or <span/>. Some people even got clever and started returning <noscript/> to avoid extraneous DOM nodes. We finally provided a “blessed” solution that allows developers to write meaningful code. Returning null is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a <noscript> element, though in the future we hope to not put anything in the document. In the mean time, <noscript> elements do not affect layout in any way, so you can feel safe using null today!

\n
// Before\nrender: function() {\n  if (!this.state.visible) {\n    return <span/>;\n  }\n  // ...\n}\n\n// After\nrender: function() {\n  if (!this.state.visible) {\n    return null;\n  }\n  // ...\n}
\n

JSX Namespacing

\n

Another feature request we’ve been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn’t want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as <Namespace.Component/>.

\n
// Before\nvar UI = require('UI');\nvar UILayout = UI.Layout;\nvar UIButton = UI.Button;\nvar UILabel = UI.Label;\n\nrender: function() {\n  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;\n}\n\n// After\nvar UI = require('UI');\n\nrender: function() {\n  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;\n}
\n

Improved keyboard event normalization

\n

Keyboard events now contain a normalized e.key value according to the DOM Level 3 Events spec, allowing you to write simpler key handling code that works in all browsers, such as:

\n
handleKeyDown: function(e) {\n  if (e.key === 'Enter') {\n    // Handle enter key\n  } else if (e.key === ' ') {\n    // Handle spacebar\n  } else if (e.key === 'ArrowLeft') {\n    // Handle left arrow\n  }\n},
\n

Keyboard and mouse events also now include a normalized e.getModifierState() that works consistently across browsers.

\n

Changelog

\n

React Core

\n

Breaking Changes

\n\n

New Features

\n\n

Bug Fixes

\n\n

React With Addons

\n\n

React NPM Module

\n\n

JSX

\n\n

React Tools Module

\n","excerpt":"It’s that time again… we’re just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog. The release candidate is available for download from the CDN: React Dev build with warnings: https://fb.me/react-0.11.0-rc1.js Minified build for production: https://fb.me/react-0.11.0-rc1.min.js React with Add-Ons Dev build with warnings: https://fb.me/react-with-addons-0.11.0-rc…","frontmatter":{"title":"React v0.11 RC","next":null,"prev":null,"author":[{"frontmatter":{"name":"Paul O’Shannessy","url":"https://twitter.com/zpao"}}]},"fields":{"date":"July 13, 2014","path":"content/blog/2014-07-13-react-v0.11-rc1.md","slug":"/blog/2014/07/13/react-v0.11-rc1.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2014/07/13/react-v0.11-rc1.html"}},"staticQueryHashes":[]}