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

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

Meanwhile, hit me up on twitter @stoyanstefanov

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章