创建和嵌套组件

React 应用由组件构成。组件是 UI 的一部分，拥有自己的逻辑和外观。React 组件是返回标记的 JavaScript 函数。

函数组件（推荐）

函数组件是一个返回虚拟 DOM 的函数：

function MyButton() {
  return <button>我是一个按钮</button>;
}

// 在其他组件中使用
export default function MyApp() {
  return (
    <div>
      <h1>欢迎来到我的应用</h1>
      <MyButton />
    </div>
  );
}

注意：React 组件名必须以大写字母开头，HTML 标签必须小写。

类组件（了解即可）

类组件继承自 React.Component，必须实现 render 方法：

class ClassComponent extends React.Component {
  constructor(props) {
    super(props); // 调用父类构造函数，this.props = props
  }
  render() {
    return <div>hello {this.props.name}</div>;
  }
}

现代 React 开推荐使用函数组件 + Hooks，类组件主要用于维护老项目。

---

添加样式

使用 className

<img className="avatar" />

/* CSS 文件 */
.avatar {
  border-radius: 50%;
}

使用内联样式

<div style={{ color: "red", fontSize: "16px" }}>红色文字</div>

---