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





我已经尝试了所有可能的方法,搜索了很多答案,但是都无济于事,我只是不明白为什么我的代码无法正常工作,我已经将代码与讲师的代码进行了交叉检查,但之前我还是空白屏幕我,请帮忙。

最佳答案

您还需要bable.js标记中的head 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/[email protected]/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>

09-17 22:43