选择一个技术栈，应改考虑的维度

  1. 库：在任何网页中添加交互性
  2. 架构：为框架构建的 UI 模式和基础组件
    1. 与这个库，配套的UI框架

  3. 构建工具，编译、打包、代码拆分、压缩、部署、服务端渲染等
    1. 开发工具，Prettier格式化，HMR热更新
    2. 节约搭配工具的时间，更多时间用于构建产品；
    3. 花更少的时间配置工具，专注于组件和业务逻辑
  4. 社区氛围：使用广泛并有文档支持，可逐步采用
  5. 生态圈：一次学习，随处编写（Web、原生应用、3D等）
  6. 灵活支持不同的渲染策略（服务器、客户端或静态）
    1. 可在任何地方部署，并逐步采用
  7. 现在的技术发展规模，与当前团队的契合度
    1. 未来的技术发展趋势
  8. 执行成本，维护成本，技术迁移成本
    1. 执行效率等技术相关点的调研和报告
    2. 最新的技术文档
    3. 更容易上手和培训新人
    4. 更容易升级
    5. 有限的选择范围，避免无意义的争论

汇总，生成一份 《技术选型报告》
image.png
互联网前 100网站采用的技术，约有 6% 的网站采用 React 框架 https://majestic.com/reports/majestic-million
react框架 https://juejin.cn/post/7251786964621557815

如果你正在使用 React 构建项目，你应该使用一个框架；
以便将更多时间用于编写产品代码，而不是自己搭建工具链。别想着自己发明轮子。

react框架

  1. css样式管理
    1. global.css 全局样式
    2. 组件样式
    3. tailwind css
  2. 资源管理
    1. images 图片
    2. fonts 字体
    3. icon 图标
    4. svg图片，图标
    5. static 静态资源
    6. 第三方工具
  3. 路由
  4. plugins 插件系统
  5. 代码优化
    1. 代码拆分，按需加载
    2. 如何只加载当前页面所需的 JavaScript？
  6. 多端部署
    1. 线上部署
      1. Docker部署
      2. ECS服务器部署， nginx
    2. 客户端，兼容客户端和服务端
    3. 服务端 SSR
    4. 移动端
  7. 安全性
    1. 身份验证

全屏的思维导图，从视觉还是编辑体验上，要比 鱼雀自带的在编辑器里面的用起来，从使用上来说，要好的多。

技术选型思维导图，百度脑图
http://naotu.baidu.com/file/1e9b0f59f5b7facec54c945c0a735811?token=b3c7ea7108f8456f

react技术体系

  1. react体系
  2. antd组件体系
  3. midwayjs体系

react技术体系.png

src元框架
原框架.png

  • react
  • react-dom
  • react-router-dom
  • connected-react-router
  • redux
  • redux-thunk
  • redux-saga
  • antd
  • webpack
  • vite
  • babel-core
  • eslinst
  • jest
  • 封装react脚手架

前端核心模块

  1. Layout页面布局
  2. 目录结构
  3. 路由配置
  4. 权限管理
  5. 异常处理
  6. 数据处理
    1. mock 数据
    2. axios 封装
  7. 全局配置


    locale 国际化多语言
    form 表单
    table 表格
    admin 后台管理
    login 用户登录验证
    markdown 编辑器
    upload 文件上传
    cache 页面缓存
    restful 扩展
    theme 主题
    email 邮件发送
    sqlAlchemy 数据源
    migrate 数据库迁移脚本执行

项目优化：公共组件，缓存，
骨架屏，loading效果
[

开发的思维](https://www.yuque.com/js2/datav/gcqk85)

  1. 先根据需求定义好要用到的一些方法
  2. 将所有方法按照逻辑思维都依次罗列出来，再完善相关方法的具体实现逻辑

[

](https://www.yuque.com/js2/datav/gcqk85)

react-boilerplate-pro

https://github.com/AlanWei/react-boilerplate-pro

  1. 基础脚手架
  2. 企业管理系统侧边栏组件 react-sider
  3. 权限验证 react-acl-router
  4. 多语言 intl-context
  5. 企业管理系统中常用模块的组件

react知识点总结
https://blog.csdn.net/qq_42033567/article/details/113850143

2020-08-14 08:55:41

企业管理系统脚手架
页面基础布局
前端权限管理
自动匹配路由，无限级菜单
数据驱动全局通知
按需加载，组合式开发
降低内部复杂度的方式就是分层，通过不断地分层将整体复杂度合理地分散在每一个模块中并将其封装起来
好的模块是为其他模块赋能的，即赋予其他模块更多的能力而不需要其他模块做出任何的妥协或牺牲
模块是否和其上下游的模块强耦合
模块是否能够无缝地迁移到其他的系统并完成同样的工作，可复用性
一个模块自身的封装是否足够优秀以至于并不会因为所处系统的不同而需要做特殊的调整
企业管理系统的确是一个非常宏大的命题
什么是企业管理系统中的核心
布局、权限、菜单、通知、多语言这五个部分
表单部分
框架也许会过时，语言有一天也会被淘汰，做项目时积累下来的知识与经验是永远都不会过时的
理解背后的思想与理念
页面布局方案
菜单匹配逻辑
权限管理机制
消息通知设计
多语言支持
视化页面搭建工具
动态路由
https://redux-form.com/7.4.2/
https://github.com/adam-golab/react-developer-roadmap/blob/master/README-CN.md

前端技术选型

  1. antdpro
    1. antd
    2. umi
    3. aliyun-theme
  2. react-antd社区精选组件 https://ant.design/docs/react/recommendation-cn
    1. image.png
  3. react基础组件 http://react-component.github.io/badgeboard
    1. image.png

antd主题

  1. aliyun
  2. dark

主题配置

主题配置问题汇总 https://github.com/ant-design/ant-design-pro/pull/2946

aliyun-theme

github https://github.com/ant-design/ant-design-aliyun-theme
aliyun-theme主题预览 https://antdtheme.com/aliyun

  1. npm install @ant-design/aliyun-theme

umi中使用 aliyun-theme

  1. import aliyunTheme from '@ant-design/aliyun-theme';
  3. // config.js or .umirc.js
  4. export default {
  5.   "theme": aliyunTheme,
  6. }

less

  1. @import "~@ant-design/aliyun-theme/index.less";

antd中使用 aliyun-theme

  1. import aliyunTheme from '@ant-design/aliyun-theme';
  3. // webpack.config.js: less-loader
  4. {
  5.   loader: 'less-loader',
  6.   options: {
  7.     modifyVars: aliyunTheme,
  8.   },
  9. },

image.png

dark theme

github https://github.com/ant-design/ant-design-dark-theme
dark主题预览 https://antdtheme.com/dark

  1. npm install @ant-design/dark-theme

配置 dark-theme主题

  1. import darkTheme from '@ant-design/dark-theme';
  3. // webpack.config.js: less-loader
  4. {
  5.   loader: 'less-loader',
  6.   options: {
  7.     modifyVars: darkTheme,
  8.   },
  9. },

image.png

后端技术选型

  1. eggjs
  2. mysql, sequelize
  3. redis

React 项目架构

  • React Hooks
  • PWA
  • Redux
  • 项目工程优化
    • 核心 API
    • 公共组件库
    • 工具库
  • react技术栈开发流程
    • 脚手架配置
    • 开发通用组件
    • 自定义 hooks
    • 前端界面开发
    • 后端接口开发
    • 系统安全
    • 项目发布

4.jpg

create-react-app

  1. yarn add less less-loader antd babel-plugin-import
  3. yarn add antd react-router-dom axios
  5. yarn add less@^2.7.3

React 项目工程化

  • 开发工具
  • 开发语言
  • 开发概念
  • 开发效率
  • 设计原则

React 开发语言

  • ECMAScript 2017
  • TypeScript
  • JSX
    • javascript 扩展语法
    • 纯函数指的是：给定固定的输入，就一定会有固定的输出，而且不会有任何副作用
    • 函数式编程
    • 面向对象编程
    • 面向数据编程
  • CSS flex 弹性盒子模布局

开发概念

  • PWA
  • SPA
    • 单页面应用
  • MPA
    • 多页面应用

1.jpg

开发效率

  • 脚手架
    • create-react-app
    • vue-cli

  • iconfont

    • 衍生于 webfont
    • 自定义文字，自定义图标
    • 单色图标，SVG彩色图标
    • 2.jpg

  • snippets 代码片段

    • webstorm
    • sublime & textExpande
    • vscode
  • React Developer Tools
    • 4.jpg
  • 衡量工作效果
    • 复杂的样式未必能带来很好的效果
  • 框架能有效的提高开发效率

设计原则

  • 单一职责原则
  • 模块的解耦
  • 优化代码可维护性

如何解决工程化问题？

  1. 项目架构设计，规划开启一个项目
  2. 项目目录规范定义
  3. 指定项目开发规范
    1. Eslint 规范
  4. 模块化 & 组件化
  5. 前后端接口规范
  6. 性能优化，
  7. 自动化部署（代码压缩，合并，打包）
  8. 从0开始，手把手搭建工程化

如何启动，如何架构 jsx，组件，css，react事件
独立完成 react的项目架构设计

项目工程化解决的问题

  • 提高开发效率
  • 降低维护成本

3.jpg

1 代码规范化

  • html 减少嵌套，使用语义化标签
  • css 样式链接用，中横线 -
    • less / sass 规范样式
    • 单位统一，不要 em, rem, px 混合使用
    • 抽离公共样式
  • js 代码规范 ```jsx 私有变量和函数前，加 _ 函数和变量用 驼峰命名法 组件名命名，大驼峰，以大写字母开头 eslint 规范 代码注释 删除项目中没有用到的代码，变量和函数

定时器和引入的第三方库，离开页面前必须销毁，防止内存泄漏

高阶组件封装 vue 高阶组件 react 高阶组件 props 参数中，设置类型验证和默认值

JS 常用工具库 ```

2 接口规范

  • 请求接口的统一封装
    • 请求 URL的统一管理
  • 返回的数据不能为 null，如果是个数组或对象，不能为 null，没数据，默认返回 [] & {}
  • ajax 异常捕获，code 状态码规范，错误信息都返回在 message 里面

性能优化

  1. 性能优化
  2. 性能监控
  3. 性能报告

自动化测试

  1. 单元测试
  2. 集成测试
  3. e2e测试