簡單React組件不會出現

我對React很新穎。我正在嘗試使用webpack和babel創建簡單的反應配置。但我的嘗試都沒有成功。當我運行npm start時，然後從瀏覽器輸入http://localhost:3333，出現一個空白頁面。我只能看到頁面的標題。我錯過了什麼？簡單React組件不會出現

在這裏我的代碼。

webpack.config.js

module.exports = { 
entry: './main.js', 
output: { 
    path: './', 
    filename: 'index.js' 
}, 
devServer: { 
    inline: true, 
    port: 3333 
}, 
module: { 
    loaders: 
    [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['react','es2015'] 
     } 
    }] 
} 
}

的package.json

{ 
"name": "es6-react-setup", 
"version": "1.0.0", 
"main": "index.js", 
"scripts": { 
    "start": "webpack-dev-server" 
}, 
"author": "", 
"license": "ISC", 
"dependencies": { 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3" 
}, 
"devDependencies": { 
    "babel-core": "^6.3.17", 
    "babel-loader": "^6.2.0" 
}, 
"description": "" 
}

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset='UTF-8'> 
    <title>Setup</title>  
</head> 
<body> 
    <div id="app"></div> 
    <script src="index.js"></script> 
</body> 
</html>

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render(<App />, document.getElementbyId('app'));

個

App.js

import React from 'react'; 
class App extends React.Component { 
    render(){ 
     return <div>Hello</div> 
    } 
} 

export default App

編輯：

我刪除index.js和node_modules。之後，我安裝了react-dom babel-loader babel-core babel-preset-es2015和babel-preset-react。然後出現下面的package.json。我也跑webpack命令生成index.js

{ 
    "name": "es6-react-setup", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server", 
    "nw": "webpack --progress --profile --colors" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.3.17", 
    "babel-loader": "^6.2.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3", 
    "webpack": "^1.12.9", 
    "webpack-dev-server": "^1.14.0" 
    } 
}

來源

2015-12-13 Uğur Yeşilyurt

你運行過webpack嗎？是否存在'index.js'？你安裝了預設（它們沒有出現在你的package.json中）？ –

謝謝Felix。我編輯了這篇文章。但頁面仍然是空的。 –

其中main.js被調用？它被稱爲任何地方？ –

你的人仍下落不明

"webpack": "^1.8.5", 
 
"webpack-dev-server": "^1.4.7"

從您的依賴。

來源

2015-12-13 20:50:52

使用install npm install命令添加「webpack」：「^ 1.12.9」，「webpack-dev-server」：「^ 1.14.0」。但還是一樣。 –

將「nw」：「webpack --progress --profile --colors」添加到腳本並嘗試npm run nw。你應該對webpacks的進展有一些反饋。 –

'1055ms構建模塊 5ms的密封 8ms的優化 9ms的散列 22毫秒創建塊資產 3ms的附加塊資產 0毫秒優化塊資產 1ms的優化資產 28ms發射哈希：9c976391f9adba70c8b3 版本：的WebPack 1.12.9 時間： 1169ms 資產大小塊塊名稱 index.js 679 kB 0 [發射]主 + 160個隱藏模塊＃我運行nw後，我得到了上面的線。 –

簡單React組件不會出現

回答

相關問題