# music-react-ts

**Repository Path**: hao-xiugong/music-react-ts

## Basic Information

- **Project Name**: music-react-ts
- **Description**: 云音乐平台，基于 React18 + React Router + TypeScript + Redux + Ant Design + styled-components 的云音乐在线播放平台。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-10-24
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux, TypeScript, ReactRouter, Ant-Design

## README

# MUSIC REACT TS

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), TypeScript, Styled Components etc.

## Available Scripts

In the project directory, you can run:

### `npm install`

Installs all dependencies.

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

## 项目笔记

### 1. 项目初始化
    
1. 使用 create-react-app 创建项目，添加 TypeScript，styled-components，redux 等支持。
2. 二次封装 axios，结合 TypeScript，添加全局拦截器和单次网络请求拦截器。
3. 使用 craco 配置项目，配置 alias，port 等。
4. 添加代码规范，如 editorconfig，prettier，eslint 等。
5. css 重置，添加全局主题样式、全局数据、全局图片资源等。

### 2. 路由配置

1. 使用 react-router-dom 配置路由，添加路由懒加载(lazy)。
   1. suspense fallback
2. 配置一级二级路由，添加路由过渡回调函数。
   1. outlet suspense

### 3. 状态管理

1. 配置 store
   1. configureStore Provider
2. 创建 slice
   1. name initialState reducers extraReducers
3. useSelector，useDispatch 二次封装类型
4. shallowEqual 浅比较，缓存优化

### 4. 页面搭建和功能介绍

1. AppHeader 全局顶部导航组件
2. 推荐页面搭建
   1. 顶部导航
   2. 轮播图
   3. 热门推荐 header 组件封装
   4. 热门推荐列表
   5. 新碟上架轮播图
   6. 榜单展示
   7. 推荐页右侧栏（用户登录、入驻歌手、热门主播）
3. 播放工具栏样式搭建
4. 歌曲播放功能栏
   1. 播放、暂停
   2. 歌曲进度条监听（进度控制、歌词随时间展示、歌词解析、歌词匹配）
   3. 播放列表和播放模式切换