手把手教你從零開(kāi)始react+antd搭建項(xiàng)目
之前的文章都是自己的學(xué)習(xí)日志,主要是防止自己遺忘之前遇到的坑。這次將從最基礎(chǔ)的項(xiàng)目搭建開(kāi)始講起,做一個(gè)基于react和antd的后臺(tái)管理系統(tǒng)。我會(huì)一步步進(jìn)行下去,所以看完本文你哪怕不了解react,應(yīng)該也會(huì)使用react做一個(gè)簡(jiǎn)單的項(xiàng)目。話不多少,直接開(kāi)始。完整項(xiàng)目請(qǐng)前往GitHub查看,體驗(yàn)請(qǐng)點(diǎn)擊這里。如果覺(jué)得可以請(qǐng)給一顆star,謝謝各位。
1、開(kāi)發(fā)環(huán)境:
node.js -v 12.16.3
create-react-app -v 3.4.1
antd -v 4.3.3
項(xiàng)目開(kāi)始前請(qǐng)自行全局安裝create-react-app,macos請(qǐng)?jiān)谥噶钋凹由蟬udo不然會(huì)有報(bào)錯(cuò)說(shuō)沒(méi)有權(quán)限訪問(wèn)硬盤(pán)。
npm install -g create-react-app
2、項(xiàng)目構(gòu)建:
初始化項(xiàng)目直接使用腳手架工具create-react-app的指令,本文接下來(lái)使用的是tsx。如需jsx版本,請(qǐng)?zhí)^(guò)模板設(shè)置。這里簡(jiǎn)單介紹一下jsx,jsx是javascript的語(yǔ)法糖。他是react打造的,react為了做到多平臺(tái)自己在js的基礎(chǔ)上封裝了一些合成事件。例如react中的onClick事件其實(shí)和原生js的click事件是不太一樣的。
jsx版本的指令為:
npx create-react-app project-name
tsx版本如下:
等待安裝完成后,項(xiàng)目的初始化工作已經(jīng)完成了。
現(xiàn)在進(jìn)入項(xiàng)目目錄:cd react-admin(這里替換為你的項(xiàng)目名稱(chēng)),執(zhí)行指令進(jìn)入開(kāi)發(fā)模式吧。
npm start
接下來(lái)我們進(jìn)入正題,由于react默認(rèn)沒(méi)有router功能,所以需要安裝react-router、react-router-dom。
如果需要狀態(tài)管理的同學(xué)可以安裝redux、react-redux、redux-actions。
需要按需加載的同學(xué)可以安裝@loadable/component,注意ts版本可能會(huì)報(bào)錯(cuò),創(chuàng)建一個(gè)loadable.d.ts的文件里面寫(xiě)上以下代碼即可解決。
declare module '@loadable/component'
需要使用loadash的同學(xué)自行安裝loadash。
接下來(lái)安裝antd組建庫(kù)。
npm i antd react-router react-router-dom redux react-redux redux-actions @types/redux-actions @types/react-router-dom @loadable/component axios loadash --save
create-react-app默認(rèn)是使用sass的,如需使用less等其他css預(yù)處理器,請(qǐng)自行安裝。
另外這里簡(jiǎn)單說(shuō)個(gè)題外話。create-react-app默認(rèn)使用的是react-scripts,是不能修改webpack配置的。如果需要修改webpack配置,有兩種解決方案:
1、使用社區(qū)的第三方庫(kù)比如react-app-rewired等。
2、執(zhí)行指令:npm run eject這樣會(huì)在當(dāng)前目錄生成scripts和config文件夾。你可以修改webpack的配置。注意:該操作為永久性的,不可逆。
話歸正題,安裝完這些基礎(chǔ)庫(kù)以后。初始化你的項(xiàng)目目錄,這里可以根據(jù)自己的喜好設(shè)置目錄結(jié)構(gòu),我的目錄結(jié)構(gòu)如下:
接下來(lái)打開(kāi)router目錄寫(xiě)router.tsx的代碼。這里只展示主要代碼:
接下來(lái)就可以使用數(shù)組來(lái)完成route的配置了,例如:
import loadable from '@loadable/component'; import { RouteComponentProps } from 'react-router'; const Index = loadable(() => import('../pages/index')); const Login = loadable(() => import('../pages/login')); export interface RouteConfigProps { path: string, exact: boolean, component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>, id: number, name?: string, routes?: Array<RouteConfigProps> } export const routeConfig: Array<RouteConfigProps> = [ { path: '/login', exact: true, component: Login, id: 1, name: '登陸', routes: [] }, { path: '/index', exact: false, component: Index, id: 2, name: '首頁(yè)', routes: [] } ]
接下來(lái)就去app.tsx里面引入路由配置吧,順便把a(bǔ)ntd的一些配置也整理一下。
import React from 'react'; import { Provider } from 'react-redux'; // redux提供的provider。 import zhCN from 'antd/es/locale-provider/zh_CN'; // antd的中文包 import { HashRouter } from 'react-router-dom'; import { MyRouter } from './router'; // 剛才的router.tsx import { ConfigProvider, message, notification } from 'antd'; import storeConfig from './store'; // redux的倉(cāng)庫(kù) import moment from 'moment'; // momentjs。 import 'moment/locale/zh-cn'; // 中文包moment.js import 'antd/dist/antd.css'; // 引入antd的樣式表 import './App.css' moment.locale('zh-cn'); // 將moment.js設(shè)置為中文 const store = storeConfig(); // 初始化redux的store,如不需要狀態(tài)管理器,redux相關(guān)可以忽略。 message.config({ // antd的message組件配置,during持續(xù)時(shí)間單位為秒,maxcount最多顯示個(gè)數(shù) duration: 2, maxCount: 2 }); notification.config({ placement: 'topRight', // antd的通知組件配置,placement彈出位置。bottom距離底部的距離,during持續(xù)時(shí)間單位為秒 bottom: 50, duration: 2, }); function App() { return ( <Provider store={store}> <ConfigProvider locale={zhCN}> <HashRouter> <MyRouter /> </HashRouter> </ConfigProvider> </Provider> ); } export default App;
這樣就大功告成了,接下來(lái)就是編寫(xiě)自己需要的組件了。
到此這篇關(guān)于手把手教你從零開(kāi)始react+antd搭建項(xiàng)目的文章就介紹到這了,更多相關(guān)react+antd搭建項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React+高德地圖實(shí)時(shí)獲取經(jīng)緯度,定位地址
思路其實(shí)沒(méi)有那么復(fù)雜,把地圖想成一個(gè)盒子容器,地圖中心點(diǎn)想成盒子中心點(diǎn);扎點(diǎn)在【地圖中心點(diǎn)】不會(huì)動(dòng),當(dāng)移動(dòng)地圖時(shí),去獲取【地圖中心點(diǎn)】經(jīng)緯度,設(shè)置某個(gè)位置的時(shí)候,將經(jīng)緯度設(shè)置為【地圖中心點(diǎn)】即可2021-06-06React 數(shù)據(jù)獲取與性能優(yōu)化詳解
這篇文章主要為大家介紹了React 數(shù)據(jù)獲取與性能優(yōu)化方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10react 可拖拽進(jìn)度條的實(shí)現(xiàn)
本文主要介紹了react 可拖拽進(jìn)度條的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件
這篇文章主要為大家詳細(xì)介紹了如何基于React.js實(shí)現(xiàn)兔兔牌九宮格翻牌抽獎(jiǎng)組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-01-01react18中react-redux狀態(tài)管理的實(shí)現(xiàn)
本文主要介紹了react18中react-redux狀態(tài)管理的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05