# React练习项目

**Repository Path**: stawary/react_exercises

## Basic Information

- **Project Name**: React练习项目
- **Description**: 这是一个React练手的项目，用于提升大家对于React的掌握熟练度。使用的技术栈有：React全家桶、axios、qs、less、antd等。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 4
- **Created**: 2020-07-23
- **Last Updated**: 2022-09-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目须知
★ [注] 本项目包管理器使用的是yarn，所以大家在进行包管理时请尽量不要使用npm，否则可能会导致不必要的冲突。  
★ [注] 创建组件尽量使用jsx格式文件与语法。  
★ [注] 精简后的API接口在这里：https://www.showdoc.cc/NeteaseCloudMusic?page_id=4855360201861356。密码202001。大家注册个账号输入项目密码就可以看了。


## 一、项目目录（主要是src下的公共文件）（建议大家使用jsx）
1. api => 调用后台接口
   - axios.js => axios二次配置文件
   - index.js => api方法导出文件（所有的api方法全部导入到这里，并统一从这里导出调用）
   - 每个人调用接口时，请单独写一个属于自己的文件，并在index.js中进入统一的导出。
  
2. assets => 静态资源文件库
   - reset.min.css => 样式重置文件
   - 大家需要静态资源文件（如图片）时，请建一个用自己名字（拼音或者首字母）命名的文件夹，并把需要的内容放在自己的文件夹中。

3. components => 组件库（用于存放所有的功能组件）
   - 每个人自己建一个属于自己的文件件，用于存放自己的组件。

4. store => 公众状态存储库
   - actions文件夹 => [实在想不起这是啥了，翻视频也没找到，大家知道的可以帮忙补充上]
   - reducers文件夹 => [实在想不起这是啥了，翻视频也没找到，大家知道的可以帮忙补充上]
   - action-types.js => 要派发的行为标识
   - index,js => 创建store，应用中间件

5. views => 页面级组件文件夹（用于存放页面级组件）
   - 每个人的页面请单独新建一个文件。

6. App.js(x) => 项目主页
   
7. index.js(x) => 项目主入口文件

## 二、项目分工
1. 主页 —— 郭杰
2. 我的音乐 —— 沈金芝
3. 搜索功能 —— 朱宏宝
4. 登录注册 —— 刘杰
5. 歌曲详情播放页 —— 蒋冠

## 三、React项目搭建步骤：
1. 创建方式有两种：
   - （1）先通过npm或yarn安装react-create-app，然后通过命令`react-create-app [项目名]`来进行创建。
   - （2）也可以在不安装的前提下，直接运行`npx react-create-app [项目名]`来进行创建。
2. 对项目配置文件进行修改
   - 首先，进入到项目中，打开CMD（MAC本为终端，下同），运行`yarn eject`对配置项进行暴露处理。注意，此操作是不可逆的，所以请确认你确实是需要对配置项进行修改再进行操作。
   - 配置文件暴露之后就可以对配置进行二次修改了：
     - 此项目我们需要用到less，但是react原生并不支持less，所以，我们需要进行简单的修改。我们有两种解决办法：
       - ① 我们需要进入到config文件夹中，打开webpack.config.js，搜索sass，将所有搜索到的sass的项复制一份粘贴在当前位置后面，然后将所有复制内容里的sass修改为less（(scss|sass)修改为less），改完之后就可以去安装less进行使用了。（详见下方代码块）。
       - ② 将config文件夹下的webpack.config.js文件中的第48、49行的 `const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; ` 改为 `const cssRegex = /\.(css | less)$/; const cssModuleRegex = /\.module\.(css | less)$/; `。并在第433和450行的“}”后加`,'less-loader'`。（详见下方代码块）。
     - 如果我们需要更改端口号，可以到scripts文件夹下的start.js文件中，找到第44行的 `const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;` 将其末尾的3000改为我们需要的端口号。
     - 
```js （前方数字表示代码行数）
// 方法①（金辉老师）：
50 const sassRegex = /\.(scss|sass)$/;
51 const sassModuleRegex = /\.module\.(scss|sass)$/;
52 const lessRegex = /\.less$/;  // 新增
53 const lessModuleRegex = /\.module\.less$/;    // 新增

... ...

459 {
460   test: sassRegex,
461   exclude: sassModuleRegex,
462   use: getStyleLoaders(
463     {
464      importLoaders: 3,
465      sourceMap: isEnvProduction && shouldUseSourceMap,
466     },
467     'sass-loader'
468   ),
... ...
473   sideEffects: true,
474  },
    // 下方为新增
475  {
476   test: lessRegex,
477   exclude: lessModuleRegex,
478   use: getStyleLoaders(
479     {
480      importLoaders: 3,
481      sourceMap: isEnvProduction && shouldUseSourceMap,
482     },
483     'less-loader'
484   ),
... ...
489   sideEffects: true,
490 },

// 方法②（啸天老师）：
48  const cssRegex = /\.(css | less)$/;   // 修改
49  const cssModuleRegex = /\.module\.(css | less)$/;   // 修改
... ...
427   {
428     test: cssRegex,
429     exclude: cssModuleRegex,
430     use: getStyleLoaders({
431       importLoaders: 1,
432       sourceMap: isEnvProduction && shouldUseSourceMap,
433     },'less-loader'),   // 修改
... ... 
438     sideEffects: true,
439  },
... ...
442  {
443     test: cssModuleRegex,
444     use: getStyleLoaders({
445        importLoaders: 1,
446        sourceMap: isEnvProduction && shouldUseSourceMap,
447        modules: {
448        getLocalIdent: getCSSModuleLocalIdent,
449        },
450     },'less-loader'),   // 修改
451  },
```


## 四、完整API接口地址：
https://binaryify.github.io/NeteaseCloudMusicApi/

## 五、参考内容
1. https://www.jb51.net/article/154680.htm