Javascript 反应组件呈现为空

当我试图在另一个组件中使用react组件时，我的react组件呈现为空时出现问题

例如：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          <loadMore />
        </p>
      </div>
    );
  }
}

class loadMore extends Component {
    render() {
        return (
            <p>Pirate</p>
        )
    }
}

export default App;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
欢迎反应


);
}
}
类loadMore扩展组件{
render（）{
返回(
海盗

)
}
}
导出默认应用程序；

现在我的输出是：

但我实际期望的是

标记将填充

海盗

，但它们看起来是空的，我似乎无法让它出现

---

我错过了什么？

React类必须以大写字母开头。：）

React希望所有组件都大写，只需将extends类和jsx中的loadMore更改为loadMore即可