React快速开发框架

本框架主要用于快速搭建项目

使用的基本库:webpack+react+react-router+typescript

ps:有不足之处请多多包涵,提出意见或者建议

目的:

前端开发大多数时间是基于市面上比较流行的成品框架开始进行开发,途中遇到的问题大都和业务相关,和技术原理相关性偏弱。并且,我在使用这些流行框架的时候也发现功能有点过多,导致很多代码都没有去仔细思考。因此,基于自己的实际项目及想法,从头搭建一个建议的项目,后续根据项目的迭代慢慢更新、优化。

框架基础库:

ReactAntdAxiosdayjsi18nextlodashstyle-componentswebpack

项目答疑:

为什么不使用Redux做全局数据管理?

之前的项目都是用过Redux,但是就项目体量来说,我暂时没有体会到Redux的便利性,我个人来说对于中小项目不使用Redux写的更舒服,数据链路更加清晰;因此我使用React自带的Reducer进行处理全局数据管理;
2.

为什么使用style-components?

为了解决多组件样式污染的问题,不过缺点就是同一个Wrapper中不能相同样式
3.

webpack进行了哪些优化?

目前根据在做的项目进行代码分隔,css压缩,通用生产环境优化等处理

代码地址:项目模版

准备工作

安装依赖

npm i

安装推荐插件并重启VSCode

  • dbaeumer.vscode-eslint
  • editorconfig.editorconfig
  • esbenp.prettier-vscode
  • stylelint.vscode-stylelint
  • styled-components.vscode-styled-components
  • lokalise.i18n-ally
  • bradlc.vscode-tailwindcss

启动项目

npm run start

打包项目

npm run build

目录说明

  • src/api 所有接口的位置
  • src/asset 静态资源
  • src/hooks hook的位置
  • src/layouts 页面布局,其中包含了Wrapper鉴权
  • src/pages/ 业务页面
  • src/router 路由配置
  • src/store/ 全局store,通过useStore()获取内容
  • src/theme/ 通用样式配置
  • src/utils 工具函数
  • types/ 全局类型定义
  • .env.development 开发环境的环境变量配置
  • .env.production 生产环境的环境变量配置
  • .eslintignore eslint配置文件
  • .gitignore git配置文件
  • .prettierignore prettier配置文件
  • .styleintignore styleint配置文件
  • public/index.html 打包模版html文件,可以更改其中的等待页面内容
  • .tailwind.config.js tailwind的配置文件
  • webpack.config.js webpack通用配置文件
  • webpack.dev.js webpack开发环境配置文件
  • webpack.prod.js webpack生产环境配置文件
相关推荐
Fluxart.ai2 小时前
电商商品图审核怎么自动化?规则引擎、人工复核与发布门禁
java·前端·自动化
why技术2 小时前
AI 写的文章,可能都带着手敲一遍都去不掉的“隐形水印”。
前端·人工智能·后端
愚公搬代码2 小时前
【愚公系列】《Android应用案例开发大全》016-LBS类应用掌上杭州(辅助工具类的开发)
android·前端
CodeSheep2 小时前
又一个华为天才少年,离职了!
前端·后端·程序员
kyriewen3 小时前
面试官说"打开你的AI工具"——我才发现,他考的根本不是写代码
前端·人工智能·面试
IT_陈寒4 小时前
Vue的双向绑定把我坑惨了,原来这个场景不能用
前端·人工智能·后端
hunterandroid4 小时前
[Android 从零到一] Compose LazyColumn 性能优化:key、稳定性与重组治理
android·前端
lichenyang4534 小时前
从一次团队邀请开始:用 React、NestJS 与 Socket.IO 做可靠的实时通知
前端
vtian4 小时前
一篇文章吃透 Monorepo:pnpm + Turborepo + Changesets 全流程实战(含 8 个踩坑)
前端
默_笙4 小时前
❗ 点击计数按钮,为什么"峨眉队"也跟着重新渲染?React.memo 说:我记住了
前端·javascript