手把手教你從零開始react+antd搭建項目
之前的文章都是自己的學習日志,主要是防止自己遺忘之前遇到的坑。這次將從最基礎的項目搭建開始講起,做一個基於react和antd的後臺管理系統。我會一步步進行下去,所以看完本文你哪怕不瞭解react,應該也會使用react做一個簡單的項目。話不多少,直接開始。完整項目請前往GitHub查看,體驗請點擊這裡。如果覺得可以請給一顆star,謝謝各位。
1、開發環境:
node.js -v 12.16.3
create-react-app -v 3.4.1
antd -v 4.3.3
項目開始前請自行全局安裝create-react-app,macos請在指令前加上sudo不然會有報錯說沒有權限訪問硬盤。
npm install -g create-react-app
2、項目構建:
初始化項目直接使用腳手架工具create-react-app的指令,本文接下來使用的是tsx。如需jsx版本,請跳過模板設置。這裡簡單介紹一下jsx,jsx是javascript的語法糖。他是react打造的,react為瞭做到多平臺自己在js的基礎上封裝瞭一些合成事件。例如react中的onClick事件其實和原生js的click事件是不太一樣的。
jsx版本的指令為:
npx create-react-app project-name
tsx版本如下:
等待安裝完成後,項目的初始化工作已經完成瞭。
現在進入項目目錄:cd react-admin(這裡替換為你的項目名稱),執行指令進入開發模式吧。
npm start
接下來我們進入正題,由於react默認沒有router功能,所以需要安裝react-router、react-router-dom。
如果需要狀態管理的同學可以安裝redux、react-redux、redux-actions。
需要按需加載的同學可以安裝@loadable/component,註意ts版本可能會報錯,創建一個loadable.d.ts的文件裡面寫上以下代碼即可解決。
declare module '@loadable/component'
需要使用loadash的同學自行安裝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默認是使用sass的,如需使用less等其他css預處理器,請自行安裝。
另外這裡簡單說個題外話。create-react-app默認使用的是react-scripts,是不能修改webpack配置的。如果需要修改webpack配置,有兩種解決方案:
1、使用社區的第三方庫比如react-app-rewired等。
2、執行指令:npm run eject這樣會在當前目錄生成scripts和config文件夾。你可以修改webpack的配置。註意:該操作為永久性的,不可逆。
話歸正題,安裝完這些基礎庫以後。初始化你的項目目錄,這裡可以根據自己的喜好設置目錄結構,我的目錄結構如下:
接下來打開router目錄寫router.tsx的代碼。這裡隻展示主要代碼:
接下來就可以使用數組來完成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: '首頁', routes: [] } ]
接下來就去app.tsx裡面引入路由配置吧,順便把antd的一些配置也整理一下。
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設置為中文 const store = storeConfig(); // 初始化redux的store,如不需要狀態管理器,redux相關可以忽略。 message.config({ // antd的message組件配置,during持續時間單位為秒,maxcount最多顯示個數 duration: 2, maxCount: 2 }); notification.config({ placement: 'topRight', // antd的通知組件配置,placement彈出位置。bottom距離底部的距離,during持續時間單位為秒 bottom: 50, duration: 2, }); function App() { return ( <Provider store={store}> <ConfigProvider locale={zhCN}> <HashRouter> <MyRouter /> </HashRouter> </ConfigProvider> </Provider> ); } export default App;
這樣就大功告成瞭,接下來就是編寫自己需要的組件瞭。
到此這篇關於手把手教你從零開始react+antd搭建項目的文章就介紹到這瞭,更多相關react+antd搭建項目內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- React路由封裝的實現淺析
- react創建項目啟動報錯的完美解決方法
- React UI組件庫之快速實現antd的按需引入和自定義主題
- create-react-app全傢桶router mobx全局安裝配置
- React路由中的redux和redux知識點拓展