使用Webpack和JSX導入React不被識別

我有點困惑，因爲我的班級爲React分配了三個單獨的指南，並且他們都以不同的方式做事。我還沒有清楚地知道我們正在做的是Webpack，哪些是ES6，哪些是Node，所以如果我描述的東西非常糟糕，請原諒我。使用Webpack和JSX導入React不被識別

我有以下package.json，跳過不必要的字段：

{ 
    "dependencies": { 
     "react": "^0.14.7", 
     "react-dom": "^0.14.7", 
     "webpack": "^1.12.13" 
    }, 
    "devDependencies": { 
     "babel-core": "^6.4.5", 
     "babel-loader": "^6.2.2", 
     "babel-preset-es2015": "^6.3.13", 
     "jshint": "^2.9.1", 
     "jshint-loader": "^0.8.3", 
     "node-libs-browser": "^1.0.0" 
    } 
}

我跑npm install。

現在我有這樣的WebPack配置：

"use strict"; 
let webpack = require('webpack'); 

module.exports = { 
    entry: ["./main.es6"], 
    output: { 
     filename: "compiled.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.es6$/g, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.es6'] 
    }, 
    watch: true 
};

其中按我的理解只是運行main.es6任何文件，它需要通過通天塔裝載機/文獻/進口。我確實有一個.babelrc文件，我可以確認它確實有效（將諸如箭頭函數，類等的東西傳遞給ES5）。

現在，這裏是棘手的部分。我的頁面將是一個彩票圖紙表格;我的React組件是一個傳遞了六個數字的數組並將其附加到現有表的行。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

const Drawing = props => (
<tr> 
    {props.numbers.map(n => <td>{n}</td>)} 
</tr> 
); 

ReactDOM.render(<Drawing />, document.getElementsByTagName("table")[0]);

這讓我在編寫<tr>時出現SyntaxError異常。這種情況引發了我，因爲在我看來，如果React導入成功（顯然它確實如此），那麼應該理解JSX。 'props'風格的箭頭函數顯然有點不同尋常，但（a）class Drawing extends React.Component表單具有相同的問題，（b）我認爲這種無狀態/功能風格現在可以更好地工作，而且我可以看到的好處。

對於編寫一個完整的代碼示例很抱歉，但我不知道這裏有什麼重要，什麼不重要。我無法弄清楚如何正確Google解決這個問題，而且我也無法真正遵循我腦海中的邏輯，因爲我只是被卡住了「好吧，React導入，所以...爲什麼JSX不工作？」

來源

2016-02-06 GreenTriangle

以下行添加到您的.babelrc文件：

任務是把JSX語法到本地JavaScript

{ 
    "presets": ["react"] 
}

IT'IS。如果你還沒有安裝babel反應預設，運行npm install babel-preset-react。

反應導入成功（這顯然是）然後JSX應該被理解。

React不用於轉換JSX語法，它完全由Babel Syntax JSX插件完成。 React在它的庫文件中不使用JSX，因此導入成功。

來源

2016-02-06 14:00:20 xCrZx

謝謝你，我完全沒有想到它會是* Babel *解析JSX。我現在對事情有了更好的理解，感謝。 – GreenTriangle

使用Webpack和JSX導入React不被識別

回答

相關問題