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

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 | }); 

但是，当我用巴贝尔REPL（http://babeljs.io/repl/），将其转换它没有任何错误。

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

Answer 1

如果您使用的是babel-cli，则需要使用插件将jsx语法转换为浏览器可以理解的js语法。 请访问以下链接： http://babeljs.io/docs/plugins/transform-react-jsx/ 您需要安装通天塔 - 插件 - 转换 - 反应 - JSX插件，在那样的.babelrc文件中使用它：

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

然后你巴贝尔命令应该工作。

Answer 2

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