Question

我是react.js的新手。刚开始学习它。所以我的问题可能看起来很愚蠢，但请回答。

我创建了一个简单的.js文件，其中包含以下代码：

var Hello=React.createClass({
    render: function(){
        return (<h1>Hello World</h1>);
    }
});

使用JSX语法并将其转换为简单的JavaScript文件我使用以下命令：

babel --preset react JSX_Files --watch --out-dir public/javascripts

这里 JSX_Files 是我的源文件夹， public / javascripts 是我想要转换的.js文件的文件夹。

但我在转型时遇到了错误：

SyntaxError: JSX_Files/example.js: Unexpected token (3:16)
  1 | var Hello=React.createClass({
  2 |     render: function(){
> 3 |         return (<h1>Hello World</h1>);
    |                 ^
  4 |     }
  5 | });

但是当我使用Babel REPL（http://babeljs.io/repl/）时，它会毫无错误地转换它。

现在请告诉我我做错了什么。为什么我在离线转换时遇到语法错误。

Answer 1

尝试babel --presets react JSX_Files --watch --out-dir public/javascripts（预设结束时的s）。

Answer 2

如果您使用的是babel-cli，则需要使用插件将jsx语法转换为浏览器理解的js语法。请参阅以下链接： http://babeljs.io/docs/plugins/transform-react-jsx/ 您需要安装babel-plugin-transform-react-jsx插件并在.babelrc文件中使用它：

{
  "plugins": ["transform-react-jsx"]
}

然后你的babel命令应该有效。

如何将JSX文件转换为简单的JavaScript文件[离线转换]

2 个答案: