Javascript React组件未显示在浏览器上，屏幕变空_Javascript_Reactjs_Google Chrome

Javascript React组件未显示在浏览器上，屏幕变空

javascript reactjs google-chrome

Javascript React组件未显示在浏览器上，屏幕变空,javascript,reactjs,google-chrome,Javascript,Reactjs,Google Chrome,文件类应用程序扩展了React.Component{ render（）{ 返回直升机 } } 让divapp=document.getElementById（'app'） ReactDom.render（，divapp）；您还需要head标记中的bable.jsCDN ReactDOMnotReactDOM 文件类应用程序扩展了React.Component{ render（）{ 返回直升机 } } 让divapp=document.getElementById（'app'） Re


文件
类应用程序扩展了React.Component{
render（）{
返回直升机
}
}
让divapp=document.getElementById（'app'）
ReactDom.render（，divapp）；

您还需要

head

标记中的

bable.js

CDN

ReactDOM

not

ReactDOM


文件
类应用程序扩展了React.Component{
render（）{
返回直升机
}
}
让divapp=document.getElementById（'app'）
ReactDOM.render（，divapp）；

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

看看这个

根据:

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

请看一下：

使用首选文本在本地跟随的说明编辑


文件
类应用程序扩展了React.Component{
render（）{
返回直升机
}
}
让divapp=document.getElementById（'app'）
ReactDOM.render（，divapp）；

检查一下！请在标题部分添加babel库文件或复制并运行此代码。它成功了，您的解决方案成功了。我不知道为什么我们也需要包括巴贝尔脚本，但不知怎么的，它起了作用。而且我觉得写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 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>