Posted on by & filed under content, Content - Highlights and Reviews, javascript, programming, Programming & Development, Tech, Web Development.

By Frankie Bagnardi

Frankie Bagnardi is a senior front-end developer creating user experiences for various clients. In his free time, he answers questions on StackOverflow (FakeRainBrigand) and IRC (GreenJello), and enjoys small projects. He is a co-author of the brand new second edition of Developing a React Edge by Bleeding Edge Press

Developing a React Edge 2E

React and the tools around it move fast. Each version comes with new features and drops old ones. You can read the official release notes that cover what has been released in React 0.14, but here in this post we’re going to cover some changes in the ecosystem.


First, react-tools has been officially deprecated. This includes reactify, react-loader, gulp-react, the jsx command line tool, and many more. These were all built on a custom esprima build with jsx and some es6/es7 features added on.

The new recommendation is to use babel. Babel supports JSX, and full ES6 with much of ES7 preemptively. The main developer, Sebastian McKenzie, now works full time at Facebook on babel, and the community is creating plugins for it to do amazing things. For all of these variants mentioned above, replace ‘react’ with ‘babel’ in the name. You then create a file called <code>.babelrc</code> and put a configuration like this in it:

classProperties is the class C { static defaultProps = {...} }, and decorators is the @something. These are pretty stable and unlikely to change, but they aren’t final so keep an eye on the spec changes if you use them.


There are several options to base your builds on (webpack, browserify, system.js, require.js), but webpack has emerged as the top choice for most people. It’s incredibly powerful and uses the dependency tree for everything, instead of the traditional glob approach found in gulp/grunt.

It happens to have possibly the worst docs out of any project with its popularity, so I strongly recommend finding a boilerplate and using their webpack config as a base.

One such boilerplate is react-transform-boilerplate, which brings us to the next change.

Hot module replacement

React Hot Loader is deprecated in favor of react-transform-hmr. It’s a babel plugin, which allows it to leverage the information that babel exposes, making it more reliable and flexible. It opens up a ton of possibilities for developer tooling, including these existing examples (quoted from babel-plugin-react-transform):

  • catch errors inside render() like react-transform-catch-errors
  • enable hot reloading like react-transform-hmr
  • render an inline prop inspector like react-transform-debug-inspector
  • highlight parts of the screen when components update like react-transform-render-visualizer

It sometimes feels like we spend too much time on tooling, but the tooling is what allows us to write modular, maintainable, well tested code. Plus, there are nice things like react-transform that entirely exist to reduce our frustration, which is a valuable resource that should be saved for the interesting problems.

I hope you find the React 0.14 changes that I’ve discussed in this post useful as you create your next app using this great framework.

Learn More in Safari

My new book, “Developing a React Edge, Second Edition” is available as an Early Release title in Safari. The book covers React 0.14 and includes topics such as data flow, composing components, and animations.


Tags: 0.14, Babel, bleeding edge, Javascript, JSX, react,

Comments are closed.