React從入門到架構(3)--引入元件,試試Ant designer
阿新 • • 發佈:2018-11-23
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,重新整理一下: