From JSXTransformer to Babel

June 22nd, 2015. Tagged: react

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: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...

Meanwhile, hit me up on twitter @stoyanstefanov