Transform JSX to JS using babel

Question

I'm new to babel and I'm trying to convert my main.jsx file to main.js. I installed the following babel plugin.

npm install --save-dev babel-plugin-transform-react-jsx

Created a file called .babelrc in the application root directory.

{
   "plugins": ["transform-react-jsx"]
}

My app is using the express server, so on running node app.js I was expecting the babel to transform main.jsx to main.js but nothing happens. Can any one point out what I'm doing wrong ?

Answer 1

if you are only using babel to transform jsx to js, this is what you need :

installation

• install babel-cli as global (optional) sudo npm install -g babel-cli
• install babel-preset-es2015 (optional. if your code using es6 standard) npm install babel-preset-es2015
• install babel-preset-react (required)

configuration

in your root of project, add this file .babelrc and write this to it

{
  "presets": ["es2015", "react"]
}

or

{
  "presets": ["react"]
}

run

babel source_dir -d target_dir