本篇內(nèi)容介紹了“怎么使用react+antd搭建項(xiàng)目”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、婺源網(wǎng)站維護(hù)、網(wǎng)站推廣。

1、開發(fā)環(huán)境：

node.js -v 12.16.3

create-react-app -v 3.4.1

antd -v 4.3.3

項(xiàng)目開始前請自行全局安裝create-react-app，macos請在指令前加上sudo不然會有報錯說沒有權(quán)限訪問硬盤。

npm install -g create-react-app

2、項(xiàng)目構(gòu)建：

初始化項(xiàng)目直接使用腳手架工具create-react-app的指令，本文接下來使用的是tsx。如需jsx版本，請?zhí)^模板設(shè)置。這里簡單介紹一下jsx，jsx是javascript的語法糖。他是react打造的，react為了做到多平臺自己在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)目名稱），執(zhí)行指令進(jìn)入開發(fā)模式吧。

npm start

接下來我們進(jìn)入正題，由于react默認(rèn)沒有router功能，所以需要安裝react-router、react-router-dom。

如果需要狀態(tài)管理的同學(xué)可以安裝redux、react-redux、redux-actions。

需要按需加載的同學(xué)可以安裝@loadable/component，注意ts版本可能會報錯，創(chuàng)建一個loadable.d.ts的文件里面寫上以下代碼即可解決。

declare module '@loadable/component'

需要使用loadash的同學(xué)自行安裝loadash。

接下來安裝antd組建庫。

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ù)處理器，請自行安裝。

另外這里簡單說個題外話。create-react-app默認(rèn)使用的是react-scripts，是不能修改webpack配置的。如果需要修改webpack配置，有兩種解決方案：

1、使用社區(qū)的第三方庫比如react-app-rewired等。

2、執(zhí)行指令：npm run eject這樣會在當(dāng)前目錄生成scripts和config文件夾。你可以修改webpack的配置。注意：該操作為永久性的，不可逆。

話歸正題，安裝完這些基礎(chǔ)庫以后。初始化你的項(xiàng)目目錄，這里可以根據(jù)自己的喜好設(shè)置目錄結(jié)構(gòu)，我的目錄結(jié)構(gòu)如下：

接下來打開router目錄寫router.tsx的代碼。這里只展示主要代碼：

接下來就可以使用數(shù)組來完成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> | React.ComponentType,
  id: number,
  name?: string,
  routes?: Array
}
export const routeConfig: Array = [
  {
    path: '/login',
    exact: true,
    component: Login,
    id: 1,
    name: '登陸',
    routes: []
  },
  {
    path: '/index',
    exact: false,
    component: Index,
    id: 2,
    name: '首頁',
    routes: []
  }
]

接下來就去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的倉庫
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ù)時間單位為秒，maxcount最多顯示個數(shù)
  duration: 2,
  maxCount: 2
});
notification.config({
  placement: 'topRight', // antd的通知組件配置，placement彈出位置。bottom距離底部的距離，during持續(xù)時間單位為秒
  bottom: 50,
  duration: 2,
});
function App() {
  return (
    
      
        
          
        
      
    
  );
}

export default App;

“怎么使用react+antd搭建項(xiàng)目”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！