如何在命令行中转换JSX文件

Question

我是React的新手,我试着关注pretranspile JSX的主题:

https://facebook.github.io/react/docs/tooling-integration.html

我的代码[app.js]非常简单:

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"))

我先安装:

npm install -g babel-cli
npm install react react-dom

然后尝试使用:

babel --watch ./app.js --out-dir ./

但它总是说:

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 |

我想知道如何解决这个问题？

Answer 1

Babel 6及更高版本不再具有React的任何原生变换.您必须添加这样的预设

npm install babel-preset-react

然后运行

babel --presets react --watch ./main.js --out-dir ./

不要忘记这--presets react部分.之后它应该工作得很好.