How to transpile a JSX file in command line - babeljs

Question

I am pretty new to React, I tried to follow the topic about pretranspile JSX:
https://facebook.github.io/react/docs/tooling-integration.html
My code [app.js] is very simple:
var React = require("react");
var ReactDOM = require("react-dom");
var Todo = React.createClass({
render: function() {
return <button>Add</button>;
}
});
ReactDOM.render(<Todo />, docuemtn.getElementById("div1"))
I first install:
npm install -g babel-cli
npm install react react-dom
Then try to use:
babel --watch ./app.js --out-dir ./
But it always says:
SyntaxError: ./app.jsx: Unexpected token (10:9)
8 | var Todo = React.createClass({
9 | render: function() {
> 10 | return <div>Hello {this.props.name}</div>;
| ^
11 | }
12 | });
13 |
I wonder how to solve this?

Answer 1

Babel 6 and up no longer has any native transforms for React. You have to add a preset like this
npm install babel-preset-react
And then run
babel --presets react --watch ./main.js --out-dir ./
Don't forget the --presets react part. After that it should work just fine.

Answer 2

install babel together with plugin to tranform react-jsx
npm install --save-dev babel-cli babel-preset-env babel-plugin-transform-react-jsx
run below command to compile jsx file
./node_modules/babel-cli/bin/babel.js --plugins transform-react-jsx test.jsx