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.
Prerequisite: install Babel
$ npm install --global babel
Where you previously had this as part of your development/build process:
$ jsx --watch source/ build/
$ babel source/ --watch --out-dir build/
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
$ 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
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
<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.