Search code examples
reactjsbabeljsjsxbabel-clibabel-core

Manually Transpiling React JSX with Babel-cli

How can I compile a .jsx file using the npx babel-cli [inpfile].jsx --out-file [outfile].js --plugin=@[someplugin] command. I have tried --plugin=@plugin-transform-react-jsx but it gives error on the very first JSX expression.

I have babel-cli, babel-core etc. packages installed.

I can use create-react-app and everything works fine but I want to do this manually, compiling JSX.

Also if ES6 to ES5 conversion is possible with the same procedure; please state it also.

Any help would be appreciated.

Solution

  • You would just simply install the latest babel packages (looks like you were trying to install the old ones). Here's a few steps:

    • Install needed packages:
    npm i -D @babel/core @babel/cli @babel/preset-env @babel/preset-react
    • Run your test jsx file:
    npx babel path/to/yourFile.jsx --presets=@babel/preset-env,@babel/preset-react