React+redux項目搭建流程步驟分析
更新時間：2025年01月08日 10:27:48 作者：大兵的貓
本文介紹了如何搭建一個React項目,包括創(chuàng)建項目、去除無用文件夾、配置項目、安裝craco擴(kuò)展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用于擴(kuò)展webpack配置，注意版本號與下方一致
npm install @craco/craco@alpha -D
項目根目錄下創(chuàng)建craco.config.js擴(kuò)展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ā)人員維護(hù)一致的編碼風(fēng)格
vscode安裝插件
根目錄新建文件：.editorconfig，并寫入以下內(nèi)容
# http://editorconfig.org root = true [*] #表示所有文件適用 charset = utf-8 #設(shè)置文件字符集 indent_style = space #縮進(jìn)風(fēng)格 indent_size = 2#縮進(jìn)大小 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縮進(jìn)
"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)文章
基于PixiJS實現(xiàn)react圖標(biāo)旋轉(zhuǎn)動效
PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能，這篇文章主要介紹了用PixiJS實現(xiàn)react圖標(biāo)旋轉(zhuǎn)動效,需要的朋友可以參考下2022-05-05
React-Native中禁用Navigator手勢返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-09-09
React 中常用的幾種路由跳轉(zhuǎn)方式小結(jié)
基本路由跳轉(zhuǎn)是最常見的一種方式,下面介紹React 中常用的幾種路由跳轉(zhuǎn)方式,感興趣的朋友一起看看吧2023-12-12
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
jsx就是javsscript與xml結(jié)合的一種格式，是js語法的一種擴(kuò)展，只要把html代碼寫在js中就是jsx。react中定義組件有3種寫法：函數(shù)的方式、es5的寫法、es6（類）的寫法2022-08-08
這篇文章主要介紹了React冒泡和阻止冒泡的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React項目中服務(wù)器端渲染SSR的實現(xiàn)與優(yōu)化詳解
在傳統(tǒng)的 React 項目里,頁面的渲染工作是在瀏覽器里完成的,而服務(wù)器端渲染（SSR）則是讓服務(wù)器先把 React 組件渲染成 HTML 字符串,再把這個 HTML 字符串發(fā)送給瀏覽器,下面我們就來看看具體實現(xiàn)方法吧2025-03-03
本文介紹了ReactNative實現(xiàn)的橫向滑動條效果,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),補(bǔ)充介紹了ReactNative基于寬度變化實現(xiàn)的動畫效果,感興趣的朋友跟隨小編一起看看吧2024-02-02
在使用reactjs庫的時候,會遇到將一段html的字符串,然后要將它插入頁面中以html的形式展現(xiàn),本文主要介紹了react解析html字符串方法實現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要介紹了react中ref獲取dom或者組件的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05