# react-limit

**Repository Path**: dyb881/react-limit

## Basic Information

- **Project Name**: react-limit
- **Description**: react项目的限制性开发。既是源码，也是文档。推荐 react+typescript+tslint
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2019-03-06
- **Last Updated**: 2022-08-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-limit

## 重构到 [react-app](https://github.com/dyb881/react-app)

#### 介绍

---

### [demo](http://dyb881.gitee.io/react-limit)<br>
[![star](https://gitee.com/dyb881/react-limit/badge/star.svg?theme=white)](https://gitee.com/dyb881/react-limit/stargazers)<br>
一定程度的限制，是为了更广阔的拓展<br>
react 项目的限制性开发。既是源码，也是文档。<br>
这并不是一个框架，而是一个 react 项目的文件管理习惯，以及开发约束<br>
程序员都是不善表达，说半天还不如一文档。<br>
开发过程应该严谨记载，并遵守开发规范，保持[项目文档](https://gitee.com/dyb881/react-limit/tree/master/项目文档.md)的更新<br>
不强制使用 typescript，可使用 js/jsx 文件开发<br>

- [开发指南](https://gitee.com/dyb881/react-limit/tree/master/guide)
- [开发规范](https://gitee.com/dyb881/react-limit/tree/master/guide/开发规范.md)
- [开发模式](https://gitee.com/dyb881/react-limit/tree/master/guide/开发模式.md)
- [拓展学习](https://gitee.com/dyb881/react-limit/tree/master/guide/拓展学习.md)

#### 技术架构

---

- 使用语言
  - ES Next - [JavaScript 完整手册](https://juejin.im/post/5bff57fee51d45021a167991)
  - TypeScript - [TypeScript 手册指南](https://www.tslang.cn/docs/handbook/basic-types.html)
- 主体
  - 脚手架 create-react-app - [create-react-app github](https://github.com/facebook/create-react-app)
  - 拓展配置 react-app-rewired - [react-app-rewired github](https://github.com/timarney/react-app-rewired)
  - 代码审查 eslint/tslint - [eslint](http://eslint.cn/docs/rules/)，[tslint](https://zhuanlan.zhihu.com/p/29970355)
- CSS 处理
  - 预处理 less/scss/sass - [less 文档](https://www.html.cn/doc/less/)，[scss/sass 文档](http://sass.bootcss.com/docs/sass-reference)
  - 后处理 postcss - [postcss github 插件集](https://github.com/postcss)
  - 初始化 normalize.css - [normalize.css 中文版](https://www.jianshu.com/p/36193d599619)
  - 模块化 CSS Modules - [CSS Modules 用法教程](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)
- 默认依赖
  - 热更新 react-hot-loader - [react-hot-loader github](https://github.com/gaearon/react-hot-loader)
  - 路由 react-router-dom - [官方文档](https://reacttraining.com/react-router/web/guides/quick-start)，[中文文档](https://www.jianshu.com/p/b117b437dc5a)
  - 动画 react-addons-css-transition-group - [API 文档](https://www.jianshu.com/p/52a8bdbd2acf)
  - 工具库 lodash - 使用 import { 函数名 } from 'lodash' 的方式按需加载 [中文文档](http://lodash.net/docs/4.16.1.html)
  - 请求数据拦截模拟返回数据 mockjs & fetch-mock - [mockjs](http://mockjs.com/examples.html)，[fetch-mock](http://www.wheresrhys.co.uk/fetch-mock)
  - 图片放大预览 react-zmage - [react-zmage github](https://github.com/Caldis/react-zmage)，[声明文件](https://gitee.com/dyb881/react-limit/tree/master/src/types/react-zmage.d.ts)
  - userAgent 解析工具 useragent - [useragent github](https://github.com/3rd-Eden/useragent#readme)
- 状态管理 Mobx/Rudex - [Mobx 中文文档](https://cn.mobx.js.org)，[Rudex 中文文档](https://www.redux.org.cn)，默认 Mobx。
- 推荐 UI 组件
  - ant-design - 阿里体系
    - antd - [PC 端](https://ant.design/docs/react/introduce-cn)
    - antd-mobile - [移动端](https://mobile.ant.design/docs/react/introduce-cn)
    - antV - 数据可视化
      - G2 - [数据可视化 - PC](https://www.yuque.com/antv/g2-docs/get-started)
      - F2 - [数据可视化 - 移动端](https://www.yuque.com/antv/f2/intro)
      - G6 - [交互流程图和关系分析](https://www.yuque.com/antv/g6/xauk5e)
      - L7 - [地理空间数据可视化](https://www.yuque.com/antv/l7/wyb66y)

#### 技术启蒙

---

- ES Next - [JavaScript 完整手册](https://juejin.im/post/5bff57fee51d45021a167991)
- React - [入门教程](http://www.ruanyifeng.com/blog/2015/03/react.html)
- 路由 react-router-dom - [官方文档](https://reacttraining.com/react-router/web/guides/quick-start)，[中文文档](https://www.jianshu.com/p/b117b437dc5a)
- 预处理 less/scss/sass - [less 文档](https://www.html.cn/doc/less/)，[scss/sass 文档](http://sass.bootcss.com/docs/sass-reference)，选一即可。
- 模块化 CSS Modules - [CSS Modules 用法教程](http://www.ruanyifeng.com/blog/2016/06/css_modules.html)
- 状态管理 Mobx/Rudex - [Mobx 中文文档](https://cn.mobx.js.org)，[Rudex 中文文档](https://www.redux.org.cn)，选一即可，默认 Mobx。
- UI 组件 ant-design - [PC 端](https://ant.design/docs/react/introduce-cn)，[移动端](https://mobile.ant.design/docs/react/introduce-cn)

#### 目录结构

---

以下是开发过程中会去查看使用或者修改的文件目录，除了此之外的文件可选查看，不可修改。

- guide - [开发指南](https://gitee.com/dyb881/react-limit/tree/master/guide)
- public - 项目静态文件，不经过编译
  - config.js - 项目配置文件，目前主要是用于移动端调试工具的开关
  - index.html - 入口页面
- src - 源代码，开发项目过程中，一般只会动这里的代码
  - api - 请求相关
    - request - 请求封装，所有接口请求均在此封装
    - config.js - 配置文件，导出如：host，apiPath，params 等配置参数
    - index.ts - 请求器生成并导出，[使用方法](https://gitee.com/dyb881/react-limit/tree/master/src/tool/request)
    - mock.ts - 请求拦截并返回模拟数据，在 App.tsx 引用即可使用
    - axios.ts - 如有请求停止、上传进度监听等需求可创建该文件并使用[axios](https://www.kancloud.cn/yunye/axios/234845)导出请求器
  - component - 全局组件
    - mobile - 移动端组件
    - pc - PC 端组件
    - public - [公用组件](https://gitee.com/dyb881/react-limit/tree/master/src/component/public)
    - project - 项目中使用的组件
  - images - 图片资源
  - page - 项目页面
  - store - 状态管理，可以使用任意状态管理库
  - tool - [常用工具](https://gitee.com/dyb881/react-limit/tree/master/src/tool)
  - types - ts 类型定义，以及引用第三方库类型声明文档
  - App.less - 全局样式定义
  - App.tsx - 项目入口，主要用于状态的注入，和路由定义
  - react-app-env.d.ts - 全局声明文档

### 安装教程

---

1. npm config set registry https://registry.npm.taobao.org // 指定到淘宝镜像
2. npm install --global yarn // 安装 yarn
3. yarn // 安装项目
4. yarn start // 开发模式
5. yarn build // 打包
6. yarn serve // 以服务运行打包后的文件