最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

手把手教你從零開(kāi)始react+antd搭建項(xiàng)目

 更新時(shí)間:2021年06月03日 16:11:03   作者:小碼飛馳  
本文將從最基礎(chǔ)的項(xiàng)目搭建開(kāi)始講起,做一個(gè)基于react和antd的后臺(tái)管理系統(tǒng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

之前的文章都是自己的學(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)目。話(huà)不多少,直接開(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)限訪(fǎng)問(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è)題外話(huà)。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的配置。注意:該操作為永久性的,不可逆。

話(huà)歸正題,安裝完這些基礎(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高級(jí)特性Context萬(wàn)字詳細(xì)解讀

    React高級(jí)特性Context萬(wàn)字詳細(xì)解讀

    React的context就是一個(gè)全局變量,可以從根組件跨級(jí)別在React的組件中傳遞。React context的API有兩個(gè)版本,React16.x之前的是老版本的context,之后的是新版本的context
    2022-11-11
  • React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解

    React jsx轉(zhuǎn)換與createElement使用超詳細(xì)講解

    這篇文章主要介紹了React jsx轉(zhuǎn)換與createElement使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2022-11-11
  • React實(shí)現(xiàn)組件之間狀態(tài)共享的幾種方法

    React實(shí)現(xiàn)組件之間狀態(tài)共享的幾種方法

    在開(kāi)發(fā)現(xiàn)代Web應(yīng)用時(shí),管理組件之間的狀態(tài)共享是一個(gè)重要的課題,特別是在使用React這個(gè)流行的前端庫(kù)時(shí),如何有效地在不同組件之間傳遞狀態(tài),確保應(yīng)用的響應(yīng)性和可維護(hù)性,是我們需要掌握的關(guān)鍵技能,在本文中,我們將探討幾種有效的狀態(tài)共享策略,需要的朋友可以參考下
    2025-02-02
  • JavaScript React如何修改默認(rèn)端口號(hào)方法詳解

    JavaScript React如何修改默認(rèn)端口號(hào)方法詳解

    這篇文章主要介紹了JavaScript React如何修改默認(rèn)端口號(hào)方法詳解,文中通過(guò)步驟圖片解析介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • React函數(shù)式組件與類(lèi)組件的不同你知道嗎

    React函數(shù)式組件與類(lèi)組件的不同你知道嗎

    這篇文章主要為大家詳細(xì)介紹了React函數(shù)式組件與類(lèi)組件的不同,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-03-03
  • React render核心階段深入探究穿插scheduler與reconciler

    React render核心階段深入探究穿插scheduler與reconciler

    這篇文章主要介紹了React render核心階段穿插scheduler與reconciler,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧
    2022-11-11
  • Remix后臺(tái)開(kāi)發(fā)之remix-antd-admin配置過(guò)程

    Remix后臺(tái)開(kāi)發(fā)之remix-antd-admin配置過(guò)程

    這篇文章主要為大家介紹了Remix后臺(tái)開(kāi)發(fā)之remix-antd-admin配置過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • react分頁(yè)顯示數(shù)據(jù)的方法

    react分頁(yè)顯示數(shù)據(jù)的方法

    分頁(yè)在很多地方都可以用到,本文主要實(shí)現(xiàn)了react分頁(yè)顯示,主要使用三個(gè)組件,父組件listBox、列表組件List、按鈕組件PageButton,感興趣的可以了解一下
    2021-08-08
  • 詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter

    詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter

    這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • create-react-app項(xiàng)目配置全解析

    create-react-app項(xiàng)目配置全解析

    這篇文章主要為大家介紹了create-react-app項(xiàng)目配置全解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06

最新評(píng)論

惠东县| 古田县| 太康县| 桃江县| 茶陵县| 宿迁市| 靖边县| 襄汾县| 理塘县| 延吉市| 宜城市| 古田县| 临海市| 确山县| 肇东市| 浙江省| 乌苏市| 平邑县| 大竹县| 瑞昌市| 准格尔旗| 峡江县| 万州区| 遵化市| 江川县| 平乐县| 阳春市| 正定县| 女性| 外汇| 颍上县| 沅江市| 建平县| 福贡县| 闸北区| 治多县| 石柱| 青铜峡市| 陵水| 郁南县| 仙居县|