![](/img/trans.png)
[英]Facing problem during installing react project and setting up of Node Js
[英]Setting Up Easy First React Project
我在建立第一個極其簡單的React項目時遇到了麻煩。 根div顯示在我的屏幕上,但是Greeting對象(Hello world)沒有顯示。
這是HTML:
<link rel="stylesheet"d type"text/css" href="re.css" />
<html>
<div id="root"></div>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (<p>Hello world</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
這是CSS(不重要):
#root {
width: 40%;
height: 300px;
margin-top: 3em;
left: 30%;
position: absolute;
border: 3px solid black;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
謝謝!
問題似乎是html結構,您應該將所有內容包裝在內,就像這樣,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" d type "text/css" href="re.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Greeting extends React.Component {
render() {
return (<p>Hello world</p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
);
</script>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.