ReactDOM不渲染一個簡單的div

我想在使用ReactDOM渲染方法的主html文件上渲染一個簡單的div，但div並沒有渲染在屏幕上，也沒有拋出任何異常。我做錯了嗎？ReactDOM不渲染一個簡單的div

app.js：

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

ReactDOM.render(
    <h1> Hi! </h1>, document.getElementById('root') 
);

的index.html：

<!doctype html> 
<html> 
    <head> 
    <title>Example</title> 
    </head> 
    <body> 
    <h1> Hello World! </h1> 
    <div id="root"></div> 
    </body> 
</html>

屏幕只能顯示的「Hello World！」 h1標籤。

我也使用webpack webpack開發服務器和Babel。

來源

2017-02-23 Einat Lugassy

您還沒有''中index.html' app.js'文件 –

原因是你忘了包括您bundle.js文件中html，加入這一行身體：

<script src = "bundle.js"></script>

試試這個：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Example</title> 
    </head> 
    <body> 
     <h1> Hello World! </h1> 
     <div id="root"></div> 
     <script src = "bundle.js"></script> 
    </body> 
</html>

相反的<!doctype html>使用<!DOCTYPE html>。

bundle.js：當您運行webpack，它從你webpack.config.js定義的入口點開始的過程中，它會編譯所有的文件，並創建一個bundle文件。您需要將bundle包含在html文件中。

注意：如果您使用的名稱不是bundle.js，請更改路徑和文件名。

檢查這個答案的用戶定義的組件：Simple Component is not rendering: React js

來源

2017-02-23 08:44:48

ReactDOM不渲染一個簡單的div

回答

相關問題