React+redux项目搭建流程

1.创建项目

1. create-react-app my-project --template typescript              // 创建项目并使用typescript

复制代码

2.去撤除没用的文件夹，只保留部分有用的文件

3.项目配置：
配置项目的icon
配置项目的标题
配置项目的别名等（craco.config.ts）
配置tsconfig.json
4.安装craco用于扩展webpack配置，留意版本号与下方一致

1. npm install @craco/craco@alpha -D

复制代码

项目根目次下创建craco.config.js扩展webpack配置

1. const CracoLessPlugin = require("craco-less");
2. const path = require("path");
3. const resolve = (dir) => path.resolve(__dirname, dir);
4. module.exports = {
5.   plugins: [{ plugin: CracoLessPlugin }],
6.   webpack: {
7.     alias: {
8.       //别名配置
9.       "@": resolve("src")
10.     }
11.   }
12. };

复制代码

tsconfig.json配置

1. {
2.   "compilerOptions": {
3.     "allowJs": false,
4.     "jsx": "react-jsx",
5.     "baseUrl": ".",
6.     "paths": {
7.       "@/*": ["src/*"]
8.     }
9.   }
10. }

复制代码

启动下令修改为craco

5.代码格式化配置
集成editorconfig
editorconfig有助于为不同的IDEA上处置惩罚同一项目的多个开发人员维护一致的编码风格
vscode安装插件

根目次新建文件：.editorconfig，并写入以下内容

1. # http://editorconfig.org
3. root = true
4. [*] #表示所有文件适用
5. charset = utf-8  #设置文件字符集
6. indent_style = space #缩进风格
7. indent_size = 2#缩进大小
8. end_of_line = lf#控制换行类型
9. trim_trailing_whitespace=true #去除行尾的任意空白字符
10. insert_final_newline=true#始终在文件末尾插入一个新行
12. [*.md] #表示仅md文件适用以下规则
13. max_line_length=off
14. trim_trailing_whitespace=false

复制代码

prettier安装并配置

1. npm install prettier -D

复制代码

根目次创建文件.prettierrc，并写入以下配置，如需其他配置可自行网上查阅

1. {
2.   "useTabs": false,  // 使用tab缩进
3.   "tabWidth": 2,  // tab代表几个空格
4.   "printWidth": 80, // 当行字符长度
5.   "singleQuote": false,  // 是否使用单引号
6.   "trailingComma": "none",  // 多行输入是否添加尾逗号
7.   "semi": true  // 语句末尾是否加分号
8. }

复制代码

eslint安装并配置

1. npm install eslint -D  // 安装eslint
2. npx eslint --init   // 初始化配置

复制代码

配置选择

最终目次布局划分

css重置
新建文件：src/assets/css/reset.less // 自界说css重置文件

1. npm install normalize.css  // 别人封装的公共css重置文件
2. npm install craco-less@2.1.0-alpha.0  // 引入less支持
4. import "normalize.css";  // src/index.tsx文件引入
5. import "./assets/css/reset.less";  // src/index.tsx文件引入

复制代码

6.路由配置
src/router/index.tsx文件

1. import type { RouteObject } from "react-router-dom";
2. import { Navigate } from "react-router-dom";
3. import React, { lazy } from "react";
4. // import Discover from "@/views/discover";
5. // import Mine from "@/views/mine";
6. // import Focus from "@/views/focus";
7. // import Download from "@/views/download";
9. // 懒加载模式，打包时会分包
10. const Discover = lazy(() => import("@/views/discover"));
11. const Recommend = lazy(() => import("@/views/discover/c-views/recommend"));
12. const Ranking = lazy(() => import("@/views/discover/c-views/ranking"));
13. const Songs = lazy(() => import("@/views/discover/c-views/songs"));
14. const DJradio = lazy(() => import("@/views/discover/c-views/djradio"));
15. const Artist = lazy(() => import("@/views/discover/c-views/artist"));
16. const Album = lazy(() => import("@/views/discover/c-views/album"));
18. const Mine = lazy(() => import("@/views/mine"));
19. const Focus = lazy(() => import("@/views/focus"));
20. const Download = lazy(() => import("@/views/download"));
22. const routes: RouteObject[] = [
23.   {
24.     path: "/",
25.     element: <Navigate to="/discover"></Navigate>
26.   },
27.   {
28.     path: "/discover",
29.     element: <Discover />,
30.     children: [
31.       {
32.         path: "/discover",
33.         element: <Navigate to="/discover/recommend"></Navigate>
34.       },
35.       {
36.         path: "/discover/recommend",
37.         element: <Recommend />
38.       },
39.       {
40.         path: "/discover/ranking",
41.         element: <Ranking />
42.       },
43.       {
44.         path: "/discover/songs",
45.         element: <Songs />
46.       },
47.       {
48.         path: "/discover/djradio",
49.         element: <DJradio />
50.       },
51.       {
52.         path: "/discover/artist",
53.         element: <Artist />
54.       },
55.       {
56.         path: "/discover/album",
57.         element: <Album />
58.       }
59.     ]
60.   },
61.   {
62.     path: "/mine",
63.     element: <Mine />
64.   },
65.   {
66.     path: "/focus",
67.     element: <Focus />
68.   },
69.   {
70.     path: "/download",
71.     element: <Download />
72.   }
73. ];
75. export default routes;

复制代码

路由使用
App.js

1. import { useRoutes, Link } from "react-router-dom";
3. <div className="nav">
4. <Link to="/discover">发现音乐</Link>
5.         <Link to="/mine">我的音乐</Link>
6.         <Link to="/focus">关注</Link>
7. <Link to="/download">下载客户端</Link>
8. </div>
9. {/* Suspense：组件还未加载完毕时的应急显示方案 */}
10. <Suspense fallback="loading...">
11.         <div className="main">{useRoutes(routes)}</div>
12. </Suspense>

复制代码

子组件中使用

1. import { Outlet, Link } from "react-router-dom";
3.   <div>
4.       <div>
5.         <Link to="/discover/recommend">推荐</Link>
6.         <Link to="/discover/ranking">排行榜</Link>
7.         <Link to="/discover/songs">歌单</Link>
8.         <Link to="/discover/djradio">主播电台</Link>
9.         <Link to="/discover/artist">歌手</Link>
10.         <Link to="/discover/album">新碟上架</Link>
11.       </div>
12.       <Outlet />
13.     </div>

复制代码

7.集成redux
安装

1. npm install @reduxjs/toolkit react-redux

复制代码

相关文件

使用方法
import store from “./store”; src/index.tsx 引入
需要使用的文件做如下使用

src/index.tsx文件

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。