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

Question

我是React的新手，我试图关注pretranspile JSX的主题：

我的代码[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部分。之后它应该可以正常工作。

Answer 2

1. 将babel与插件一起安装以转换react-jsx

   npm install --save-dev babel-cli babel-preset-env babel-plugin-transform-react-jsx
   

2. 运行以下命令编译jsx文件

   ./node_modules/babel-cli/bin/babel.js --plugins transform-react-jsx test.jsx