前言
昨天我们认识了 JSX 语法，透过 JSX 语法我们可以方便地在 JavaScript 中轻松撰刻画 UI 介面。
而今天我们要来认识 React 元件，了解 React 为何要使用元件概念、以及如何实作。
备注：写了几天後，决定把每篇的内容控制在阅读时间 5~10 分钟内，一方面阅读起来更为轻松，一方面也能兼顾之後我下班後写文的品质跟效率。
那我们就开始吧！
何谓 Component ?
从字面上我们得知是 元件 的意思，而元件就是我们网页上可以被重复利用的区块。
例如下图中红色圈起来部份，像 影片区块 不仅会在首页使用、也会在节目、电影等分页上使用。我们可以注意到仅有区块内影片内容不同而已！外框、滑动 Hover 效果等等都是一样的。
优点跟特色
- 可重复利用
- 每个元件职责单一，只负责一件事
所以我们才会说
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