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

回答

相关问题