Transform JSX to JS using babel

Just follow the instructions at https://www.npmjs.com/package/babel-plugin-transform-react-jsx

First, create a new folder, test, and from the folder init a new project:

npm init

Install babel CLI

npm install --save-dev babel-cli

Then install babel-plugin-transform-react-jsx

npm i babel-plugin-transform-react-jsx

In the test folder create a sample jsx file index.jsx

var profile = <div><img src="avatar.png" className="profile" /><h3>{[user.firstName, user.lastName].join(' ')}</h3></div>;

And finally, run the transofmation command in you terminal from the test folder:

.\node_modules\.bin\babel --plugins transform-react-jsx index.jsx

You'll see the output in you terminal window.

You can configure webpack and use babel as a loader to transpile your jsx

var webpack = require('webpack');var path = require('path');module.exports ={context: path.join(__dirname, "src"),devtool: "inline-sourcemap",entry: "./main.js",module: {loaders: [{test: /\.js?$/,exclude: /node_modules/,loader: 'babel-loader',query: {presets: ['react', 'es2015','stage-0'],}}]},output: {path: __dirname+ "/src",filename: "client.min.js"}}

Tutorials

As of 2023 if you are using babel to transform jsx to js, this is what you will need to do:

Install Packages

Install the following globally on your machine:

npm install -g @babel/clinpm install -g @babel/corenpm install -g @babel/preset-react

or install the following as a project dependency (my personal preference):

npm install --save-dev @babel/clinpm install --save-dev @babel/corenpm install --save-dev @babel/preset-react

Create Configuration File

Create a .babelrc config file at the root of your project with the following setting as a bare minimum:

{"presets": ["@babel/preset-react"]}

You should review the babel docs if you have a more complicated use case and determine what additional settings you may need to add. You can find the settings for compiling jsx to js on the @babel/preset-react page.

Compile

You can compile any jsx file into js by running the following command in your terminal:

npx babel [jsx-file-here.jsx] -d [output-directory]

If your jsx file imports anything please keep the following in mind:

1. This will not import any imported code. You will need to also compile any files that are imported. You can then use your code as a browser module: see next 2 points.
2. JS imports are widely supported now (see also) but you will need to add type="module" to the script tag in your HTML.
3. Remember you must include the file extension .js in your import statements still! No browser will intuptret import Foo from './bar' as import Foo from './bar.js.
4. If you do not want to do the previous you can use something like rollup.js to bundle all the files into a single script.