React.js hooks 练习案例-网易云音乐【day1】

Z时代
2024-01-10
分类：综合

react

案例目的

本人之前的开发项目中曾经接触过react这个框架，因为在开发是模块化进行，所以在开发过程中是一边开发一边学习，没有很好的对 racet 的技术做一个整理。而且 react hooks 的技术越来越成熟，所以想通过这个案例，对 react 的原有技术和新的开发模式 hooks 的运用做一个重新梳理，提高自己对此技术的认识。并且提供给想学习 react hooks 的小伙伴一个参考。

项目结构

开发文件 src
资源文件 assets （css, img …）
共享文件 common
公共组件 components
页面模块 pages
页面路由 router
请求服务 services
数据仓库 store
公共工具 utils
程序入口 App.js
绑定渲染位置 index.js
路径昵称 craco.config.js （例如：@ = src目录）
路径提示 jsconfig.json

说明：store 文件的处理，我这采用的并不把所有共享数据都放在同一个store里面。每个 pages 里面的组件都自己的 store 文件，最外面的数据仓库是实现所以组件 store 的合并，并且提供统一派发的工作。

虽然，这样做会对整体结构提高复杂程度，但是在后维护与问题定位上，会有明显的帮助。

项目使用插件

重置CSS yarn add normalize.css ( npm install --save normalize.css )
配置信息 yarn add @craco/craco 添加 craco.config.js 配置文件
修改 package.json “scripts”:{ “start”:“craco start”, “build”:“craco build”, “test”:“craco test”, “eject”:“react-scripts eject” }
react路由 yarn add react-router-dom
路由配置文件 yarn add react-router-config
js-css样式 yarn add styled-components
蚂蚁金服 yarn add antd
蚂蚁金服图标 yarn add @ant-design/icons
网络请求插件 yarn add axios
共享数据管理 yarn add redux
react使用redux yarn add react-redux
网络请求-中间件 yarn add redux-thunk
数据持久化 yarn add immutable
redux支持immutable yarn add redux-immutable