目錄
- 前言
- React第三方庫使用
- ant-design
- 安裝
- 推薦使用
- react-icons:icon庫
- 安裝
- 簡單使用
- react-router:React 路由新增
- ant-design
- Tailwind CSS ：html通用元件
- Tailwind CSS安裝
- yesicon 中文Icon網
- daisyui
- Echart+echarts-for-react
- 總結
前言
今天來寫一個簡單的後臺管理頁面，沒有後端介面，都是模擬的資料。我這個的目標就是快速上手React開發，能用框架就用框架解決。
React第三方庫使用
- ant-design:ui庫
- react-icons:icon庫
ant-design
這次來了解一下阿里，國內頂級大廠的React UI框架，Ant-Design
ant-design github 地址
Ant Design 中文文件
安裝
確保自己已經安裝了Node，NPM和create-react-app
使用create-react-app建立專案
create-react-app 你的專案名
執行如下程式碼
npm install antd
在App.js中新增
import "./App.css";
import { useState } from "react";
import { Button, DatePicker } from "antd";
function App() {
return (
<div>
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
</div>
);
}
export default App;
推薦使用
-
按鈕
-
全部佈局節點
- Menu：導航選單
- Pagination:分頁
- Tooltip:文字提示
- 全部反饋
react-icons:icon庫
react-icons github倉庫地址
React Icons 官方文件
安裝
npm install react-icons --save
簡單使用
import logo from "./logo.svg";
import "./App.css";
import { Button, DatePicker } from "antd";
//react-icon就是把圖示封裝成元件了
import { FaBeer } from "react-icons/fa";
import { MdAddLocationAlt } from 'react-icons/md';
function App() {
return (
<div>
<>
{/* 透過size修改大小 */}
<MdAddLocationAlt size={100}/>
<FaBeer/>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
</div>
);
}
export default App;
react-router:React 路由新增
React Router6 中文文件
路由配置 | React Router 中文文件 - GitHub Pages
Tailwind CSS ：html通用元件
我其實一直很反對過度封裝，我其實是想要一個開箱即用的程式碼。比如Ant Design Charts，它是要React+TS才能使用。你React+JS還會報錯。我也有Vue甚至Jqeury的html程式碼需要維護，所以我希望用通用的前端元件。
Tailwind CSS 的工作原理是掃描所有 HTML 檔案、JavaScript 元件以及任何 模板中的 CSS 類（class）名，然後生成相應的樣式程式碼並寫入 到一個靜態 CSS 檔案中。
他快速、靈活、可靠，沒有執行時負擔。
Tailwind CSS安裝
Tailwind CSS 入門
如何在React應用程式中整合Tailwind CSS？
按照上述流程走完之後，只需引入output.css即可
yesicon 中文Icon網
yesicon 中文Icon網
這個網站上面有很多的Icon推薦
在 TailwindCSS 中使用 Iconify 圖示
import logo from "./logo.svg";
import "./App.css";
//引入你的output.css路徑
import "./tailwindCss/output.css"
import { Button, DatePicker } from "antd";
//react-icon就是把圖示封裝成元件了
import { FaBeer } from "react-icons/fa";
import { MdAddLocationAlt } from "react-icons/md";
function App() {
return (
<div>
<>
{/* 透過size修改大小 */}
<span class="icon-[mdi--ab-testing]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
<h1 class="text-3xl font-bold underline">Hello world!</h1>
<span class="icon-[mdi--ab-testing]"></span>
<MdAddLocationAlt size={100} />
<FaBeer />
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
{/* <Page/> */}
</>
</div>
);
}
export default App;
daisyui
daisyui其實就是TailWind的BootStrap。因為TailWind封裝了一些預設的 css，但是我們希望開箱即用。所以在TailWind的基礎上面，又進行了一個封裝。又繞回Bootstrap了。所以直接用BootStrap也是可以的，只是Tailwind比較的流行而已。
作為 Tailwind CSS 的外掛來安裝 daisyUI
配置好了之後就可以直接使用了
import logo from "./logo.svg";
import "./App.css";
//引入你的output.css路徑
import "./tailwindCss/output.css"
import { Button, DatePicker } from "antd";
//react-icon就是把圖示封裝成元件了
import { FaBeer } from "react-icons/fa";
import { MdAddLocationAlt } from "react-icons/md";
function App() {
return (
<div>
<>
{/* 透過size修改大小 */}
<span class="icon-[mdi--ab-testing]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
<h1 class="text-3xl font-bold underline">Hello world!</h1>
<span class="icon-[mdi--ab-testing]"></span>
<MdAddLocationAlt size={100} />
<FaBeer />
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
<button class="btn btn-primary">Button</button>
{/* <Page/> */}
</>
</div>
);
}
export default App;
Echart+echarts-for-react
echarts-for-react 是對echarts的簡單封裝
echarts-for-react的使用
其實Echarts核心就是option，其他的都委託給echarts-for-react建立例項。
import logo from "./logo.svg";
import "./App.css";
//引入你的output.css路徑
import "./tailwindCss/output.css"
import { Button, DatePicker, Row, Col } from "antd";
import React, { useState } from 'react';
//react-icon就是把圖示封裝成元件了
import { FaBeer } from "react-icons/fa";
import { MdAddLocationAlt } from "react-icons/md";
import ReactEcharts from 'echarts-for-react';
function App() {
return (
<div>
<>
{/* 透過size修改大小 */}
<span class="icon-[mdi--ab-testing]"></span>
<i class="icon-[material-symbols--arrow-back-ios-new]" />
<h1 class="text-3xl font-bold underline">Hello world!</h1>
<span class="icon-[mdi--ab-testing]"></span>
<MdAddLocationAlt size={100} />
<FaBeer />
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
<button class="btn btn-primary">Button</button>
<BingEch/>
{/* <Page/> */}
</>
</div>
);
}
const BingEch = (props) => {
const [sales, setSales] = useState([5, 20, 36, 10, 10, 20]);
const [stores, setStores] = useState([15, 120, 36, 110, 110, 20]);
// 配置物件
const getOption = (sal, sto) => {
return {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
textStyle: {
fontSize: 13,
color: '#FFFFFF',
},
data: ['重啟', '找人幫忙', '放棄使用', '想法修復']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 1835, name: '重啟' },
{ value: 310, name: '找人幫忙' },
{ value: 234, name: '放棄使用' },
{ value: 135, name: '想法修復' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
};
return (
<div>
<Row gutter={24}>
<Col span={24}>
<ReactEcharts option={getOption(sales, stores)} style={{marginTop:"30px"}} />
</Col>
</Row>
</div>
)
}
export default App;
總結
我後面會嘗試使用TailWindCss為開發，因為我想使用通用的css框架開發。用於解決Vue，React和原生Html的程式碼。