простая проблема с компонентом 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 на capitol, как Hello (ошибка, связанная только с тем кодом, кажется, что кеширование, вероятно, не скомпилировано из-за наличия там элемента jsx без прописных букв), вместо этого вы можете вызвать код {hello('john', 82)} как альтернатива