组件未呈现

Question

我正在Udemy学习React 16课程.我们正在使用Codepen在课程中创建我们的第一个React应用程序.虽然教师能够在视频中呈现组件,但我遵循他的代码并且它不会呈现.这是HTML,CSS和JS代码:

HTML:

<div class="person">
  <h1>Your name</h1>
  <p1>Manu</p1>
</div>

CSS:

.person {
  margin:10px;
  box-shadow:2px 2px #ccc;
  border: 1px solid #eee;
  padding: 20px;
  width: 200px;
  display: inline-block;
}

JavaScript的:

function Person(){
  return(
    <div className="person">
      <h1>Your name</h1>
      <p1>Tristan</p1>
    </div>
  );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

Answer 1

你有一个印刷错误:Persanvs Person.

也class可以使用className因为JSX只是一个javascript和关键字class保留.

另外,p1我相信你应该使用其中一个p或一些自定义组件,它的名称以大写字母开头.

function Person() {
  return (
    <div className="person">
      <h1>Your name</h1>
      <p>Tristan</p>
    </div>
  );
}

ReactDOM.render(<Person/>, document.querySelector('#p1'));

.person{
  margin:10px;
  box-shadow:2px 2px #ccc;
  border: 1px solid #eee;
  padding: 20px;
  width: 200px;
  display: inline-block;
}

<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>
<div id="p1"></div>