React component is not being displayed on browser, getting empty screen

问题: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...

问题:

<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>

I have tried everything I could, searched a lot of answers, but none of them helped, I just can't understand why my code is not working, I have cross checked me code with instructor's code, still i am having a blank screen before me, kindly help.


回答1:

  1. You need bable.js CDN in head tag too.

  2. ReactDOM not 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>


回答2:

I recommended you to follow the create-react-app approach which is very simple and easy way to start with reactjs.

Check this out.

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

Under the :

Setup Option 2: Local Development Environment

Take a look on the :

Instructions for following along locally using your preferred text editor


回答3:

<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>
  • 发表于 2019-03-19 06:27
  • 阅读 ( 180 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除