React: using Babel to transfer jsx to js
Blogs20152015-10-24
The following is my summary when practicing react-0.14.0 examples.
1. jsx->js: Build-time transform
This needs command-line tool babel to do the tranform:
//1. get the command-line tool:
$ npm install -g babel
//2. then watch the jsx file example.js to transform and move to build/example.js
$ babel example.js --out-dir=build
//3. advanced: watch all the jsx tranform in src/ folder and move to build/ folder dynamically.
$ babel src/ --watch --out-dir build/
//4. alternative: in react-0.14.0 basic-commonjs/ folder:
$ npm install
$ ./node_modules/.bin/watchify index.js -v -t babelify -o bundle.js
// to generate bundle.js which combines react, react-dom and index.js2. jsx->js: In-browser transform
This need a file called browser.js to do the transform, which ships with babel-core module.
//1. get browser.js:
$ npm install babel-core
//2. then:
<script src="react/build/react.js"></script>
<script src="babel/browser.js"></script>
//3. add text/babel type:
<script type="text/babel">
React.render(
jsx-stuff,
document.getElementById('app')
);
</script>The reference: From JSXTransformer to Babel
