React 组件未显示在浏览器上，屏幕为空答案

【问题标题】：React component is not being displayed on browser, getting empty screenReact 组件未显示在浏览器上，屏幕为空
【发布时间】：2019-08-08 10:08:29
【问题描述】：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><!--core react library-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!--help us inject react into the dom-->

<title>Document</title>
</head>
<body>
    <div id="app">
       

    </div>
    <script type="text/babel">

    class App extends React.Component{
       render(){
          
            return <div>Helo</div>
        }
    }
    let divapp=document.getElementById('app')
    ReactDom.render(<App />,divapp);
    </script>
</body>
</html>

我已经尽我所能，搜索了很多答案，但没有一个有帮助，我只是不明白为什么我的代码不起作用，我已经用讲师的代码交叉检查了我的代码，我仍然有一个我面前的空白屏幕，请帮助。

【问题讨论】：

检查一次raw.githubusercontent.com/reactjs/reactjs.org/master/static/…！

标签： javascript reactjs google-chrome

【解决方案1】：

<html lang="en">
  <head>
      <meta charset="UTF-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  <title>Document</title>


  </head>
  <body>
    <script type="text/babel">
            class App extends React.Component {
              render() {

                      return <div>Helo</div>
                  }
              }
              let divapp=document.getElementById('app')
              ReactDOM.render(<App />,divapp);
    </script>
    <div id="app">    
    </div>

  </body>
  </html>

【讨论】：

请在header部分添加babel库文件或复制并运行这段代码。

【解决方案2】：

我建议您遵循 create-react-app 方法，这是从 reactjs 开始的非常简单的方法。

看看这个。

https://reactjs.org/tutorial/tutorial.html

下：

设置选项 2：本地开发环境

看看：

使用您喜欢的文本在本地跟随的说明编辑器

【讨论】：

【解决方案3】：

head 标签中也需要bable.js CDN。
ReactDOM 不是ReactDom

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><!--core react library-->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!--help us inject react into the dom-->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<title>Document</title>
</head>
<body>
    <div id="app">
       

    </div>
    <script type="text/babel">

    class App extends React.Component{
       render(){
          
            return <div>Helo</div>
        }
    }
    let divapp=document.getElementById('app')
    ReactDOM.render(<App />,divapp);
    </script>
</body>
</html>

【讨论】：

它有效，您的解决方案有效。我不知道为什么我们还需要包含 Babel 脚本，但不知何故它起作用了。我也觉得写 ReactDom 而不是 ReactDOM 太愚蠢了。谢谢