• Blogs (9)
    • πŸ“± 236 - 992 - 3846

      πŸ“§ jxjwilliam@gmail.com

    • Version: β€πŸš€ 1.1.0
  • 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.js

    2. 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