组件未渲染

Question

I'm working through the React 16 course on Udemy. We are using Codepen to create our first React apps in the course. Although the instructor is able to render the component in the video, I follow his code and it doesn't render. Here's the HTML, CSS, and JS code:

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

You have a misprint: Persan vs Person .

Also instead of class you should use className because JSX is just a javascript and keyword class is reserved.

Also instead of p1 element I believe you should use either p or some custom component which will have a name started with a capital letter.

 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> 

Answer 2

The issue is due to the typo Persan in the component declaration. It should be

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

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