<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>
我已经尽了一切努力,搜索了很多答案,但是都没有帮助,我只是不明白为什么我的代码无法正常工作,我已经将我的代码与讲师的代码进行了交叉检查,但我仍然遇到黑屏出现在我面前,请帮忙。
答案 0 :(得分:0)
您还需要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/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>
答案 1 :(得分:0)
我建议您遵循create-react-app方法,这是从reactjs开始的非常简单的方法。
检查一下。
https://reactjs.org/tutorial/tutorial.html
在:
下设置选项2:本地开发环境
看看:
使用首选文字在本地进行跟踪的说明 编辑器
答案 2 :(得分:0)
<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>