InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

React Tutorials

  • Overview
  • Hello world (jsx)
  • jsx to javascript (babel cli)
  • jsx offline transformation
  • Hello world (javascript)
  • click hander (jsx)
  • click handler (javascript)
  • clock example
  • ajax
  • React FAQ
 
  • Home
  • > Tutorials
  • > Javascript
  • > React

ReactJS – convert jsx to javascript using babel cli

on Feb 9, 2016

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.

Suggested posts:

  1. React jsx hello world with offline transformation
  2. React – JSXTransformer vs babel – which one should be used?
  3. React javascript render hello world
  4. React jsx hello world
  5. Convert mp3 to ogg on Mac using ffmpeg
  6. Mac – how to convert mp4 to webm
  7. Debug javascript using node-inspector, node-debug, nodemon and Chrome
  8. React component tutorial with click handler – javascript version
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged Javascript, React, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress