如何将 React 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 | });

但是当我使用 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 语法。请参阅以下 link： http://babeljs.io/docs/plugins/transform-react-jsx/ 你需要安装 babel-plugin-transform-react-jsx 插件并像这样在 .babelrc 文件中使用它：

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

那么你的 babel 命令应该可以工作了。

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

How to convert react JSX files to simple JavaScript file [offline transformation]

javascript

reactjs

react-jsx