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