From JSXTransformer to Babel

As announced, starting with React v0.14 (next release), the JSXTransformer.js won't be part of the release. Also `react-tools` npm package is no more. So whatchagonnawannado is switch to Babel. Here's how.

Build-time transform

Prerequisite: install Babel

$ npm install --global babel

Where you previously had this as part of your development/build process:

$ jsx --watch source/ build/

...now becomes

$ babel source/ --watch --out-dir build/

Easy-peasy!

In-browser transform

Required warning: in-browser transforms are just for testing and playing and prototyping. Never for live sites.

Now with that out of the way, let's see how to switch to Babel.

Prerequisite: a file called browser.js. You'll find in in your node_modules, e.g.

$ ls /usr/local/lib/node_modules/babel/node_modules/babel-core/browser.js

Slightly easier to find if you npm install babel-core:

$ ls /usr/local/lib/node_modules/babel-core/browser.js 

Anyway, find browser.js and put it somewhere handy. Now where you used to have:

<script src="react/build/react.js"></script>
<script src="react/build/JSXTransformer.js"></script>

.. now you do:

<script src="react/build/react.js"></script>
<script src="babel/browser.js"></script>

Finally, instead of the invalid type="text/jsx" you used to add to your script tags, now you do type="text/babel", like:

<script type="text/babel">
  React.render(
    <h1 id="my-heading">
      <span><em>Hell</em>o</span> world!
    </h1>,
    document.getElementById('app')
  );
</script>

That's all folks

Not too bad, eh? And the bonus: you get tons of ES6 (ECMAScript2015) features and beyond, just by adopting Babel. Enjoy!

For example directory structure and working examples with both Babel and JSXTransformer, navigate these waters.

Tell your friends about this post on Facebook and Twitter