如何將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在預設結束時）。