ReactJS – convert jsx to javascript using babel cli

React JSX code can be offline transformed into javascript code using babel compiler command line tool. You may also want to visit React JSX quick introduction.

Here are quick steps to convert jsx to javascript.

  1. Install babel command line tools using npm. In case you are new to npm, please visit npm tutorial.

    $ sudo npm install -g babel-cli
    $ sudo npm install -g babel-preset-react
    
  2. Create a file jsx-hello.js with the following content
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.getElementById('hello')
    );
    
  3. Run the babel command

    $ babel --presets react jsx-hello.js
    

    You should see the following outcome.

    ReactDOM.render(React.createElement(
      'h1',
      null,
      'Hello world'
    ), document.getElementById('hello'));
    
  4. In case you want to run babel on a directory src, you can use the following command:

    $ babel --presets react src --out-dir build
    src/jsx-hello.js -> build/jsx-hello.js
    
  5. In case you want to run babel on a directory src in watch mode, you can use the following command:

    $ babel --presets react src --watch --out-dir build
    

    watch mode will continuously look for a change in src dir. Whenrever there is any change, it will regenerate build dir.

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments