Okay，完成了專案的基本搭建React從入門到架構（2）–如何配置你的“CSS和JS路徑”以後，我們得到了這樣的一個頁面：

有的同學會說，Okay，我知道怎麼寫了，我就在這個Return的內容裡，寫我的整個頁面就可以了～！

這確實是一種辦法，但是這樣React的特性就完全被浪費掉了。。
我們先看一點兒最簡單的元件化方法：

（1）前端元件化

既然<App />和less檔案都是可以元件化，那麼<App />可不可以解構呢？直接上程式碼：

• （a）我們首先建立了一個header.js檔案，和App.js在同一個路徑下，然後按照App.js
  進行復制，並修改名稱等，如圖所示；
• （b）我們在header.js檔案中複製原先的<div className="AppHeader">這段程式碼進行渲染，如圖所示；
• （c）然後我們在App.js檔案中引入header.js檔案，格式如下：
  import Header from './Header';
  在App.js檔案的第五行；
• （d）我們接著在App.js檔案中的return()函式進行修改，如下：

<div className="App">
        <Header />
        <div className
 
="AppCenter">
          <div className="AppSlider">
            This is Sub Slider
          </div>
          <div className="AppContent">
            This is Sub Content
          </div>
        </div>
        <div className="AppFooter">
        This is Footer
        </
 
div>
  </div>

執行一下，和之前的一樣。

這樣，我們就實現了Header部分的元件化。

既然能把Header提取出來，是不是可以造輪子了呢？

是不是可以把表格、樹形圖、側邊欄都封裝成像Header一樣的公共元件呢？

那麼，有沒有別人封裝好的輪子，我可以直接拿來用呢？

說到這裡，很多人可能想起了Bootstrap，沒錯，Bootstrap後來也推出了自己的React-Bootstrap。
但是我們今天要講的是另外一個公共元件集:

來自螞蟻金服的ant designer

(2) Ant Design的引入

該部分完全可以參考Antd的官方手冊;
當然～我也會進行一些介紹：

（a）首先，在專案的根目錄下執行命令npm -i -D antd

（b）在App.css檔案中引入層疊樣式表，在檔案開始加入程式碼：

@import '~antd/dist/antd.css';

（c）我們嘗試在App.js檔案中，引入一個Ant d的Button看一看：

Okay，重新整理一下：