前言

昨天我们认识了 JSX 语法，透过 JSX 语法我们可以方便地在 JavaScript 中轻松撰刻画 UI 介面。
而今天我们要来认识 React 元件，了解 React 为何要使用元件概念、以及如何实作。

备注：写了几天後，决定把每篇的内容控制在阅读时间 5~10 分钟内，一方面阅读起来更为轻松，一方面也能兼顾之後我下班後写文的品质跟效率。

那我们就开始吧！

何谓 Component ?

从字面上我们得知是 元件 的意思，而元件就是我们网页上可以被重复利用的区块。
例如下图中红色圈起来部份，像 影片区块 不仅会在首页使用、也会在节目、电影等分页上使用。我们可以注意到仅有区块内影片内容不同而已！外框、滑动 Hover 效果等等都是一样的。

优点跟特色

1. 可重复利用
2. 每个元件职责单一，只负责一件事

所以我们才会说 React is all about Components，开发网页时我们只是在将不同元件做组合动作，端看你想要呈现什麽样的 UI 给使用者看。

范例

function Expensive() {
  const money = "10";
  const string = `${money}块钱`;
  return (
    <div>
      <h2>{money}</h2>
      <h2>{string}</h2>
      <p>{1+3}</p>
    </div>
  );
}

在这个范例中，我们可以先知道在 React 中，每个 function 其实就是个元件！

下一篇，我们会来介绍在 Component 中使用表达式、以及如何客制化撰写 Component

参考资料

• [笔记][React]关於Components的那件小事
• 【React.js入门 - 07】 function component