2.2-前端技术

2.2 前端技术点¶

2.2.1 前端框架 React¶

本项目使用 React 18 版本，React 主要用于数据展示到界面。

2.2.2 UI 组件库¶

本项目使用 reactstrap 作为 UI 组件库，样式主题色引用 bootstrap 的样式，具体版本如下。

"bootstrap": "^5.2.3",
"reactstrap": "^9.1.5",

reactstrap 组件库和 bootstrap 组件库样式类似，且和 react 框架结合良好，日常使用较多，API 和配置较熟悉，所以选择这个作为组件库，减少了从零开始写 UI 组件消耗的时间成本。

2.2.3 状态管理¶

1、小说内容数据：支持本地上传，或者从服务器搜索加载两种模式。离线模式可以本地上传，上传后以 state 形式保存在 app 中。在线模式中，支持从服务器中查找小说并加载，可以把本地小说上传到服务器。

2、界面样式数据：支持自定义背景图片，背景色，字号，字体，文字颜色，行间隔，保存本地在浏览器存储中。

3、阅读模式数据：模式分为全屏模式、分页模式、章节模式，适合不同类型的小说或者阅读者的需求，界面渲染不同模式的组件。

因为项目数据不复杂，目前使用 React state 进行数据管理，没有使用额外的数据管理库（redux 或者 mobx），未来考虑使用 context、mobx 或 redux 进行状态管理。

2.2.5 其他工具库说明¶

本项目还使用了其他第三方工具库，简介如下：

"axios", 发送网络请求
"classnames", 处理css类名
"deep-copy", 深拷贝对象
"is-hotkey", 键盘快捷键
"lodash", 扩展JS方法
"react-color", 自定义颜色选择器
"react-router-dom", 浏览器界面路由
"react-scripts", react开发脚本工具
"react-select", 选择框组件
"react-sweet-progress", 进度条组件
"react-transition-group", 动画效果组件
"react-icons", 图标

构建打包工具是 webpack，集成在 react-scripts 库中

// babel es6 转换器
"@babel/cli",
"@babel/core",
"@babel/node",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-modules-commonjs",
"@babel/plugin-transform-runtime",
"@babel/preset-env",
"@babel/register",
"@babel/runtime",
"babel-eslint",
"babel-jest",
"babel-loader",
"babel-register",

// 代码格式检查工具
"eslint",
"eslint-config-airbnb-base",
"eslint-plugin-import",

"form-data", APIpost表单数据工具
"jsdoc-to-markdown", 自动生成文档工具
"localforage", 前端存储工具
"match-sorter", 数组处理工具
"multer",
"sort-by",
"web-vitals"