如何將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-cli，則需要使用一個插件將jsx語法轉換為瀏覽器可以理解的js語法。 請參閱以下鏈接： http ://babeljs.io/docs/plugins/transform-react-jsx/您需要安裝babel-plugin-transform-react-jsx插件，並在.babelrc文件中使用它，如下所示：

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

然后您的babel命令應該起作用了。

Answer 2

嘗試babel --presets react JSX_Files --watch --out-dir public/javascripts （位於預設末尾）。