简单的React组件问题

Question

我在html，css和js下面HTML：

<div id="app1"></div>

JS：

function hello(props){
  return(
  <div className="Person">
    <h1>Name: {props.name}</h1>
    <p>Age: {props.age}</p>
  </div>
  );
}

var app=(
<div>
  <hello name="John" age="82"/>
  <hello name="Jane" age="89"/>
</div>
);

ReactDOM.render(app,document.querySelector("#app1"));

CSS

.Person{
  width:200px;
  color:black;
  box-shadow:0 2px 2px #ccc;
  display:inline-block;
  margin:10px;
  padding:2px;
}

但是此代码仅在组件名称为Person或其他名称导致以下错误的情况下才有效

Uncaught ReferenceError: Person is not defined 
 at pen.js:-5
Uncaught ReferenceError: Person is not defined 
 at pen.js:-4

您可以假设已导入Reactjs和ReactDOM。

Answer 1

[尝试将hello的首字母更改为类似于Hello的国会大厦（仅具有该代码的错误似乎是缓存内容，因为具有不带大写字母的jsx元素，所以它似乎没有编译）