# KR-REACT

**Repository Path**: kr-cli/kr-react

## Basic Information

- **Project Name**: KR-REACT
- **Description**: react基础项目包
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-23
- **Last Updated**: 2022-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React-Family: 基于 create-react-app 的项目全家桶(js 版本)

## npm script 声明

1. npm start: 本地启动
2. npm run start:mock: 本地启动(使用本地 mock 数据)
3. npm run build:*: 生成打包(*对应不同版本服务，可通过 src/service/api.js 配置对应 API_ENV_URL)

\*注：

1. 本地代理地址配置: src/setupProxy.js 配置 target
2. 服务访问相对路径配置: src/service/api.js 配置 API_LIST

## 特性说明

1. 支持 Sass/Scss/Less/Stylus
2. 已安装 react-router-dom
3. 已安装 redux、react-redux
4. 已安装 redux-thunk
5. 已安装 immutable
6. 已安装 axios
7. 已安装 mockjs
8. 支持浏览器 Redux DevTools 插件（需先在 chrome 应用商店添加 Redux DevTools）
9. 支持反向代理（在 src/setupProxy.js 中配置）

## 如何集成 Ant Design

考虑到 Ant Design 不是项目必须 UI 库，未集成至全家桶。

## 目录结构

```
    ├─ /config               <-- eject后生成的配置目录
    |  ├─ /jest
    |  ├─ env.js
    |  ├─ module.js
    |  ├─ paths.js
    |  ├─ pnpTs.js
    |  ├─ webpack.config.js  <-- webpack配置文件
    |  └─ webpackDevServer.config.js
    ├─ /node_modules
    ├─ /public
    |  ├─ favicon.ico        <-- 网页图标
    |  └─ index.html         <-- HTML页模板
    ├─ /scripts              <-- eject后生成的脚本目录
    |  ├─ build.js
    |  ├─ start.js
    |  └─ test.js
    ├─ /src
    |  ├─ /common            <-- 全局公用目录
    |  |  ├─ /fonts          <-- 字体文件目录
    |  |  ├─ /images         <-- 图片文件目录
    |  |  ├─ /js             <-- 公用js文件目录
    |  |  |  ├─ api.js       <-- 统一管理API地址和常量等
    |  |  |  └─ commonLib.js <-- 公用js库（公用函数、常量等）
    |  |  └─ /stylus         <-- 公用样式文件目录
    |  |  |  ├─ frame.styl   <-- 全部公用样式（import其他css）
    |  |  |  ├─ reset.styl   <-- 清零样式
    |  |  |  └─ global.styl  <-- 全局公用样式
    |  ├─ /components        <-- 公共模块组件目录
    |  |  ├─ /header         <-- 头部导航模块（举例）
    |  |  |  ├─ /store       <-- header组件的store
    |  |  |  |  ├─ actionCreator.js
    |  |  |  |  ├─ constants.js
    |  |  |  |  ├─ index.js
    |  |  |  |  └─ reducer.js
    |  |  |  ├─ index.js     <-- header主文件
    |  |  |  └─ header.styl  <-- header样式文件
    |  |  └─ ...             <-- 其他模块
    |  ├─ /pages             <-- 页面组件目录
    |  |  ├─ /home           <-- home页目录（举例）
    |  |  |  ├─ index.js     <-- home主文件
    |  |  |  └─ home.styl    <-- home样式文件
    |  |  ├─ /login          <-- login页目录（举例）
    |  |  |  ├─ /store       <-- login组件的store
    |  |  |  |  ├─ actionCreator.js
    |  |  |  |  ├─ constants.js
    |  |  |  |  ├─ index.js
    |  |  |  |  └─ reducer.js
    |  |  |  ├─ index.js     <-- login主文件
    |  |  |  └─ login.styl   <-- login样式文件
    |  |  └─ ...             <-- 其他页面
    |  ├─ /store             <-- store总集目录（聚合其他组件的store）
    |  |  ├─ index.js
    |  |  └─ reducer.js
    |  ├─ App.js             <-- 项目主模块
    |  ├─ index.js           <-- 项目入口文件
    |  ├─ mock.js            <-- mock数据
    |  └─ setupProxy.js      <-- 反向代理配置
    ├─ README.md
    ├─ package.json
    └─ yarn.lock
```

## className 规范

1. 全局公用级别（不需要模块化）的 className，用 G-xxx。例如 G-autocut(截字)、G-color-red(文字红色)。
2. 页面级别的 className，用 P-xxx。
3. 模块级别的 className，用 M-xxx。

## react 超详细教程

该架构有超详细的教程，从零开始，逐步讲述 React 全家桶的一条龙服务，新手也能快速掌握。

【教程目录】

1 创建 React-APP

2 精简项目

-   2.1 删除文件

-   2.2 简化代码

-   2.3 使用 Fragment 去掉组件外层标签

3 项目目录结构

-   3.1 引入全局公用样式

-   3.2 支持 Sass/Less/Stylus

4 路由

-   4.1 页面构建

-   4.2 使用 react-router-dom

-   4.3 路由跳转

5 组件引入

-   5.1 创建 header 组件

-   5.2 引入 Header 组件

-   5.3 组件传参

6 React Developer Tools 浏览器插件

7 Redux 及相关插件

-   7.1 安装 redux

-   7.2 安装 react-redux

-   7.3 安装 redux-thunk

-   7.4 安装浏览器 Redux 插件

-   7.5 创建 store

-   7.6 复杂项目 store 分解

-   7.7 对接 react-redux 与 store

-   7.8 启动 Redux DevTools

-   7.9 安装使用 immutable

8 Mock.js 安装与使用

9 解决本地开发跨域问题

10 其他常用工具

11 附赠章节：集成 Ant Design

-   11.1 安装 Ant Design

-   11.2 实现按需加载

-   11.3 自定义主题颜色

## 原文及微信公众号

教程原文请关注我的公众号【程序猿 KR】，如有问题欢迎在微信公众号私信交流。
新版本 React16 + TS 已集成，敬请期待...