How to convert JSX files offline

ReactJS, 2016-04-07 08:10:40 UTC

For ReactJS project, it is easy to mix an HTML with JavaScript using JSX. We can serve a JSX file to produce an HTML element. But, it's not good because the application must convert it to JavaScript first, then the JavaScript create an HTML element for it. It will kill the application performance, moreover with a big file.

The better way to work with ReactJS-JSX is convert it offline an make your application read the JavaScript file instead JSX.

This is how to do it;


1. Install babel-cli

$ npm install babel-cli

Above example, I don't use global install. If you want, you can add -g option, so you can call babe-cli from everywhere

Just forget about the warning like below because we just use it to convert JSX file instead of create an npm project.


2. Install babel-preset-react

$ npm install babel-preset-react


3. Auto convert it with --watch option

$ babel --presets react jsx_src_folder --watch --out-dir js_output_folder