Compiling React with Babel CLI

Question

I am new to React and trying to learn. I am trying to compile a JSX simple file manually using babel CLI. I am using the following command.

npx babel src/App.js --out-file static/App.js

However it kind of gets stuck, and does not return.

Following are the contents of App.js

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Answer 1

You need the transform-react-jsx plugin

Working example :

npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-react-jsx
npx babel App.js --out-file dist/App.js --plugins=@babel/plugin-transform-react-jsx

Which produces :

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('example'));