React jsx hello world with offline transformation

React JSX code can be compiled offline to transform into javascript code. This eliminates need to include babel code in browser. To see how it works in browser without offline transformation, you can visit JSX hello world. Here are the steps to do offline transformation in hello world example.

  1. Create jsx-hello.js in src directory with the following content.
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.getElementById('hello')
    );
    
  2. Convert src/jsx-hello.js into compiled and transformed build/jsx-hello.js using the following command. You can visit ReactJS – convert jsx to javascript using babel cli for babel installation instructions.

    $ babel --presets react src --out-dir build
    src/jsx-hello.js -> build/jsx-hello.js
    $ cat build/jsx-hello.js
    ReactDOM.render(React.createElement(
      'h1',
      null,
      'Hello world'
    ), document.getElementById('hello'));
    
  3. Here is the html code which makes use of generated jsx-hello.js file in build dir.
    <script src="https://fb.me/react-0.14.7.js"></script>
    <script src="https://fb.me/react-dom-0.14.7.js"></script>
    
    <div id="hello"></div>
    <script src="/demo2/react/build/jsx-hello.js"></script>
    
    refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments