Transpiling jsx using babel for react app

Question

I am trying to transpile a jsx file using babel and its giving an error.

The content of the file is as follows, ( src/app.js )

class Channel extends React.Component{
    render() {
        return(
            <li> Something </li>
        )
    }
}

I used the following commands to transpile and watch the file for changes.

1) babel src/app.js --watch --out-file js/app.js
2) babel src/app.js --presets es2015 --watch --out-file js/app.js

In both the cases I recieved the following error,

SyntaxError: src/app.js: Unexpected token (4:12)
  2 |     render() {
  3 |         return(
> 4 |             <li> Something </li>
    |             ^
  5 |         )
  6 |     }
  7 | }

It shows that the error is at the start of the html tags embedded in the javascript file (jsx). Babel is expected to know the html tags and treat it and compile it, but I don't know why does it behave like that.

Note: I installed babel using the babel documentation from the official website.

Answer 1

You'll need the react preset as well.

To install it:

npm i babel-preset-react

To use it:

babel src/app.js --presets es2015,react --watch --out-file js/app.js