该项目是对 React 技术栈以及前端工程化的相关实践。
愿景：沉淀出一套针对中台系统的开发相对完善的使用方案。
效果展示，建议本地打开。
- 部分模块展示：
- redux 实现一个 todoList:
Usage
本地运行
yarn install, npm install
yarn start, npm start
打包
yarn build, npm run build
发布
yarn deploy, npm run deploy
Tech Stack
- 编译打包: Babel Webpack(4.x)
- 热更新: webpack-dev-server
- UI 库: React & React-Dom(^16.11.0)
- UI 组件: Antd(3.x)
- 路由: react-router(4.x)、react-router-redux
- 状态管理: redux (TodoList: Graghql + Relay)
- JS: ES6、ES7
- 样式: less
- Ajax: Fetch
- 跨域: CORS
- 代码校验: Eslint(Airbnb 规范)
- 网关: demo
- 表单: daForm
articles
- React 性能优化实践
- 压缩打包优化
- css 模块化
- 使用 React 全家桶搭建一个后台管理系统
- redux middleware 源码分析
- 探寻 webpack 插件机制
- React16.x 特性剪辑
Module
- 音乐模块
- 音乐列表
- 工具模块
- 工资、房租、身体指数、年龄的智能计算器
- 富文本编辑器
- 待办事项
- 画廊模块
- 图片瀑布流(撸了个插件 jswaterfall)
- 搜索模块
- 搜索引擎(集成百度、360、搜狗搜索)
- 其它
- one for all 表单方案 —— daForm
Project Structure
├── build.js 项目打包后的文件
├── config webpack配置文件
│ ├──...
│ ├──webpack.config.dev.js 开发环境配置(启动速度优化)
│ ├──webpack.config.prod.js 生产环境配置(打包体积优化)
├── node_modules node模块目录
├── public
│ └──index.html
├── scripts
│ ├── build.js 打包项目文件
│ ├── start.js 启动项目文件
│ └── test.js 测试项目文件
├── src
│ ├── client
│ │ ├── store redux中的store
│ │ ├── devTools.js 开发者工具
│ ├── common 核心目录
│ │ ├── api 请求api层
│ │ ├── actions redux中的action
│ │ ├── components 通用功能组件
│ │ ├── container 通用样式组件
│ │ ├── images
│ │ ├── pages 页面模块
│ │ ├── reducers redux中的reducer
│ │ ├── utils 工具类
│ │ │ ├── index.js
│ │ │ ├── config.js 通用配置
│ │ │ ├── menu.js 菜单配置
│ │ │ └── ajax.js ajax模块
│ │ └── routes.js 前端路由
│ └── server 服务端目录(日后用到)
│ └── controller
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
todoList
- 使用 suspense 替代 react-loadable
- 状态管理库迁移至 graghql
