如何在React項目中使用AntDesign
更新時間：2022年04月12日 10:43:50 作者：jGjHwTzBzEwSdTb
我們在后臺管理系統(tǒng)React項目開發(fā)中會有Table表格、Form表單、List列表、Button按鈕等組件，這個時候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題，本文就介紹了eact項目中使用AntDesign，感興趣的可以了解一下
0.前言
我們在后臺管理系統(tǒng)React項目開發(fā)中會有Table表格、Form表單、List列表、Button按鈕等組件，這個時候我們可以使用AntDesign來減少開發(fā)中不必要的樣式問題。
1.AntDesign是什么？
Ant Design 是一個 UI 設計語言，是一套提煉和應用于企業(yè)級后臺產(chǎn)品的交互語言和視覺體系
2.AntDesign如何使用？
首先你要安裝 yarn或npm或cnpm
$ yarn create react-app antd-demo # or $ npx create-react-app antd-demo # or $ npm create react-app antd-demo // 若網(wǎng)絡緩慢可使用cnpm淘寶鏡像 $ cnpm create react-app antd-demo
工具會自動初始化一個腳手架并安裝 React 項目的各種必要依賴
然后我們進入項目并啟動。
$ cd antd-demo $ yarn/npm/cnpm start
此時瀏覽器會訪問 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
而后需要引入AntD
現(xiàn)在從 yarn 或 npm 安裝并引入 antd。
$ yarn add antd
3.如何具體使用AntDdesign的組件
通用步驟是，先用import引入antd的具體某一個組件，然后根據(jù)規(guī)則及API使用
例：
3-1.如何使用 antd 的Table組件
import React from 'react';
import { Table } from 'antd';
import './App.css';
const columns = [
{ title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
];
const data = [
{
key: 1,
name: 'one',
age: '10',
},
{
key: 2,
name: 'two',
age: '20',
},
];
const App = () => (
<div className="App">
<Table columns={columns} dataSource={data} />
</div>
);
export default App;樣式如圖：
3-2.如何使用 antd 的Button組件
import React from 'react';
import { Button } from 'antd';
const App = () => (
<div className="App">
<Button type="primary">Primary Button</Button><br/>
<Button>Default Button</Button><br/>
<Button type="dashed">Dashed Button</Button><br/>
<Button type="text">Text Button</Button><br/>
<Button type="link">Link Button</Button><br/>
</div>
);
export default App;
4.后續(xù)
總結：總體來說要使用ant具體的某一個組件，就要仔細觀看組件的API，以API為基準來進行開發(fā)。
好處：用Ant開發(fā)，省去了寫css樣式的問題，同時，組件里也有相應的JS方法，便于開發(fā)
到此這篇關于如何在React項目中使用AntDesign的文章就介紹到這了,更多相關React使用AntDesign內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了React hooks的優(yōu)缺點詳解，幫助大家更好的理解和學習使用React，感興趣的朋友可以了解下， 希望能夠給你帶來幫助2021-09-09
這篇文章主要為大家介紹了React的diff算法核心復用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
React Native AsyncStorage本地存儲工具類
這篇文章主要為大家分享了React Native AsyncStorage本地存儲工具類，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
基本路由跳轉是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉方式,感興趣的朋友一起看看吧2023-12-12
React避坑指南之useEffect 依賴引用類型問題分析
這篇文章主要介紹了React避坑指南之useEffect 依賴引用類型問題分析,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了React前端解鏈表數(shù)據(jù)結構示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了React Native 資源包拆分實戰(zhàn)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要介紹了Vite?+?React?如何從0到1搭建一個開源組件庫，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06