React+redux项目搭建流程

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.org

root = 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文件
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大兵的猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值