在一個專案中，通常不會在一個頁面放入太多的 HTML 結構，這樣會變得難以維護。前面也有提到如何拆分成 component，本篇文章則是講解如何在透過 creat-react-app 的專案中，管理各個 components。

先來看 CodeSandbox 的範例：

可以看到在 App.js 中有 3 個區塊，分別是 head、content、footer。前面的文章有提到如何拆分成 component，所以就來依樣畫葫蘆。

分成 3 個 component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Head = () => (
  <div className="head">
    <h1>Head</h1>
  </div>
);

const Content = () => (
  <div className="content">
    <h2>This is content.</h2>
  </div>
);

const Footer = () => (
  <div className="footer">
    <span>This is footer.</span>
  </div>
);

可以看到畫面也是一樣，並且正常運作。但是如果內容一多的話，全部都放在同一個頁面中肯定是會非常難以維護，所以在實務上就會拆分成不同的 .js 檔案，這樣就可以方便管理了。

檔案拆分

  1. 首先在 /src 建立一個 components 的資料夾。
  2. 新增 Head.js、Content.js、Footer.js 這三個檔案。
  3. 如果有用到 JSX 的檔案，就要匯入 React 套件：
1
import React from "react";
  1. 將剛剛在 App.js 中建立的 component 內容一一加入個別對應的 .js 中，例如：
1
2
3
4
5
const Content = () => (
  <div className="content">
    <h2>This is content.</h2>
  </div>
);
  1. 記得匯出：
1
export default Content;
  1. 最後在 App.js 中匯入 components：
1
import Content from "./components/Content.js";

這樣就可以區分成非常乾淨而且方便管理的 components 了。

在區分 component 的概念上，跟 Vue CLI 的資料管理差不多，不管是命名方式還有使用方法都蠻相似的，所以使用起來也非常熟悉。