函数组件

React 应用程序由组件组成，组件可以小到一个按钮，也可以大到整个页面。

组件嵌套

声明一个函数组件

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

现在将它嵌套到另一个组件中

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

注意 <MyButton /> 是以大写字母开头的。这样你就知道这是一个 React 组件。React 组件名称必须始终以大写字母开头，而 HTML 标记必须小写。

添加样式

React 使用 className 指定 CSS class，使用 style 指定 CSS style。

为什么不直接使用 class？因为 class 是 JavaScript 的关键字。

<img className="avatar1 avatar2" />

<img style={{ width: "100%", height: "100%" }} />

JSX

这种标记语法称为 JSX，JSX 比 HTML 更严格。必须关闭 <br /> 这样的标记。组件也不能返回多个 JSX 标记。必须将它们封装到一个共享的父标签中，如 <div>...</div> 或一个空的 <>...</>。

JSX 是一种在 JavaScript 代码中编写类似于 XML 格式的语法扩展。

React 使用 React.createElement() 的函数来处理 JSX 代码，然后将其转换成一个表示虚拟 DOM 元素的树结构，这个虚拟 DOM 树结构实际上是一个纯粹的 JavaScript 对象，它描述了组件的层次结构、属性以及内容。

function MyApp() {
  return (
    <></>
  );
}

JSX 可以动态的显示数据，在{}中，可以嵌入变量。

function MyApp() {
  const user = {
    name: "Alice"
  };

  return (
    <div>
      {user.name}
    </div>
  );
}

条件渲染

可以使用 if 语句来有条件地包含 JSX

function MyApp() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? (
        <AdminPanel />
      ) : (
        <LoginForm />
      )}
    </div>
  );
}

渲染列表

可以使用 map 方法将数组转换成 JSX 数组并渲染

function MyApp() {
  const products = [
    { title: 'Cabbage', id: 1 },
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
  ];

  const listItems = products.map(product =>
    <li key={product.id}>
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

每个 <li>...</li> 都有一个 key 属性，应该设置为唯一标识符，React 在进行更新时会用到。

响应事件

可以通过在组件中声明事件处理函数来响应事件

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}