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

Question

我是 React 的新手，我尝试关注有关预转译 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 部分。之后它应该可以正常工作。

Answer 2

安装babel和插件一起改造react-jsx

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

运行下面命令编译jsx文件

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

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

How to transpile a JSX file in command line

reactjs

react-jsx

babeljs