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')
);
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'));
plugins & presets directly in your package.json file or a dedicated .babelrc file, for easier management (instead of piping it to the cli command as text)@babel/preset-react (preset) instead of transform-react-jsx plugin
npx -p babel-cli babel?