1.创建项目

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

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

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

npm install @craco/craco@alpha -D

项目根目录下创建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上处理同一项目的多个开发人员维护一致的编码风格
vscode安装插件

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

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

prettier安装并配置

npm install prettier -D

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

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

eslint安装并配置

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

配置选择

最终目录结构划分

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">发现音乐</Link><Link to="/mine">我的音乐</Link><Link to="/focus">关注</Link><Link to="/download">下载客户端</Link></div>
{/* Suspense：组件还未加载完毕时的应急显示方案 */}<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

相关文件


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

src/index.tsx文件