React+redux項目搭建流程步驟分析
更新時間：2025年01月08日 10:27:48 作者：大兵的貓
本文介紹了如何搭建一個React項目,包括創(chuàng)建項目、去除無用文件夾、配置項目、安裝craco擴展webpack配置、配置代碼格式化、創(chuàng)建路由、集成Redux等步驟,感興趣的朋友跟隨小編一起看看吧
1.創(chuàng)建項目
create-react-app my-project --template typescript // 創(chuàng)建項目并使用typescript
2.去除掉沒用的文件夾，只保留部分有用的文件
3.項目配置：
配置項目的icon
配置項目的標(biāo)題
配置項目的別名等（craco.config.ts）
配置tsconfig.json
4.安裝craco用于擴展webpack配置，注意版本號與下方一致
npm install @craco/craco@alpha -D
項目根目錄下創(chuàng)建craco.config.js擴展webpack配置
const CracoLessPlugin = require("craco-less");
const path = require("path");
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
plugins: [{ plugin: CracoLessPlugin }],
webpack: {
alias: {
//別名配置
"@": resolve("src")
}
}
};tsconfig.json配置
{
"compilerOptions": {
"allowJs": false,
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}啟動命令修改為craco
5.代碼格式化配置
集成editorconfig
editorconfig有助于為不同的IDEA上處理同一項目的多個開發(fā)人員維護一致的編碼風(fēng)格
vscode安裝插件
根目錄新建文件：.editorconfig，并寫入以下內(nèi)容
# http://editorconfig.org root = true [*] #表示所有文件適用 charset = utf-8 #設(shè)置文件字符集 indent_style = space #縮進風(fēng)格 indent_size = 2#縮進大小 end_of_line = lf#控制換行類型 trim_trailing_whitespace=true #去除行尾的任意空白字符 insert_final_newline=true#始終在文件末尾插入一個新行 [*.md] #表示僅md文件適用以下規(guī)則 max_line_length=off trim_trailing_whitespace=false
prettier安裝并配置
npm install prettier -D
根目錄創(chuàng)建文件.prettierrc，并寫入以下配置，如需其他配置可自行網(wǎng)上查閱
{
"useTabs": false, // 使用tab縮進
"tabWidth": 2, // tab代表幾個空格
"printWidth": 80, // 當(dāng)行字符長度
"singleQuote": false, // 是否使用單引號
"trailingComma": "none", // 多行輸入是否添加尾逗號
"semi": true // 語句末尾是否加分號
}eslint安裝并配置
npm install eslint -D // 安裝eslint npx eslint --init // 初始化配置
配置選擇
最終目錄結(jié)構(gòu)劃分
css重置
新建文件：src/assets/css/reset.less // 自定義css重置文件
npm install normalize.css // 別人封裝的公共css重置文件 npm install craco-less@2.1.0-alpha.0 // 引入less支持 import "normalize.css"; // src/index.tsx文件引入 import "./assets/css/reset.less"; // src/index.tsx文件引入
6.路由配置
src/router/index.tsx文件
import type { RouteObject } from "react-router-dom";
import { Navigate } from "react-router-dom";
import React, { lazy } from "react";
// import Discover from "@/views/discover";
// import Mine from "@/views/mine";
// import Focus from "@/views/focus";
// import Download from "@/views/download";
// 懶加載模式，打包時會分包
const Discover = lazy(() => import("@/views/discover"));
const Recommend = lazy(() => import("@/views/discover/c-views/recommend"));
const Ranking = lazy(() => import("@/views/discover/c-views/ranking"));
const Songs = lazy(() => import("@/views/discover/c-views/songs"));
const DJradio = lazy(() => import("@/views/discover/c-views/djradio"));
const Artist = lazy(() => import("@/views/discover/c-views/artist"));
const Album = lazy(() => import("@/views/discover/c-views/album"));
const Mine = lazy(() => import("@/views/mine"));
const Focus = lazy(() => import("@/views/focus"));
const Download = lazy(() => import("@/views/download"));
const routes: RouteObject[] = [
{
path: "/",
element: <Navigate to="/discover"></Navigate>
},
{
path: "/discover",
element: <Discover />,
children: [
{
path: "/discover",
element: <Navigate to="/discover/recommend"></Navigate>
},
{
path: "/discover/recommend",
element: <Recommend />
},
{
path: "/discover/ranking",
element: <Ranking />
},
{
path: "/discover/songs",
element: <Songs />
},
{
path: "/discover/djradio",
element: <DJradio />
},
{
path: "/discover/artist",
element: <Artist />
},
{
path: "/discover/album",
element: <Album />
}
]
},
{
path: "/mine",
element: <Mine />
},
{
path: "/focus",
element: <Focus />
},
{
path: "/download",
element: <Download />
}
];
export default routes;路由使用
App.js
import { useRoutes, Link } from "react-router-dom";
<div className="nav">
<Link to="/discover">發(fā)現(xiàn)音樂</Link>
<Link to="/mine">我的音樂</Link>
<Link to="/focus">關(guān)注</Link>
<Link to="/download">下載客戶端</Link>
</div>
{/* Suspense：組件還未加載完畢時的應(yīng)急顯示方案 */}
<Suspense fallback="loading...">
<div className="main">{useRoutes(routes)}</div>
</Suspense>子組件中使用
import { Outlet, Link } from "react-router-dom";
<div>
<div>
<Link to="/discover/recommend">推薦</Link>
<Link to="/discover/ranking">排行榜</Link>
<Link to="/discover/songs">歌單</Link>
<Link to="/discover/djradio">主播電臺</Link>
<Link to="/discover/artist">歌手</Link>
<Link to="/discover/album">新碟上架</Link>
</div>
<Outlet />
</div>7.集成redux
安裝
npm install @reduxjs/toolkit react-redux
相關(guān)文件
使用方法
import store from “./store”; src/index.tsx 引入
需要使用的文件做如下使用
src/index.tsx文件
到此這篇關(guān)于React+redux項目搭建流程的文章就介紹到這了,更多相關(guān)React redux項目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React封裝高階組件實現(xiàn)路由權(quán)限的控制詳解
這篇文章主要介紹了React封裝高階組件實現(xiàn)路由權(quán)限的控制,在React中,為了實現(xiàn)安全可靠的路由權(quán)限控制,可以通過多種方式來確保只有經(jīng)過授權(quán)的用戶才能訪問特定路徑下的資源,下面來介紹封裝高階組件控制的方法,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了react-native封裝插件swiper的使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟
本篇文章主要介紹了詳解Webpack+Babel+React開發(fā)環(huán)境的搭建的方法步驟，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了從react?hooks閉包陷阱切入淺談react?hooks，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
React中super()和super(props)的區(qū)別小結(jié)
本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
在react-antd中彈出層form內(nèi)容傳遞給父組件的操作
這篇文章主要介紹了在react-antd中彈出層form內(nèi)容傳遞給父組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了React Hook中useState更新延遲問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React中引入less、less-loader問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01