# create-react-app+ts+dva

**Repository Path**: linzantian/base-react

## Basic Information

- **Project Name**: create-react-app+ts+dva
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 基于create-react-app  --3.4.1版本 创建
<code>
    npx create-react-app demo --typescript
</code>

支持 typescript 版本 当然你可以在所有你想要的地方写javascript   
还有就是 css sass less 都可以自由使用，混合使用 包括 css_module less_module sass_module  
*.module.css   
*.module.less   
*.module.sass  

#### 修改地方
1. 添加less 支持 以及less 的css module 支持
2. 添加打包分析工具 webpack-bundle-analyzer
3. 注释 ManifestPlugin 插件。
4. 注释 WorkboxWebpackPlugin.GenerateSW 插件
5. 添加 @babel/plugin-syntax-jsx 插件
6. 添加 @babel/plugin-proposal-decorators 插件
7. 添加 babel-plugin-import 插件

#### 添加插件
1. 添加react-router-dom 插件。
2. 添加antd 插件。
3. 添加fetch 插件。
4. 添加dva-core 插件
5. 添加dva-loading 插件
6. 添加react-redux 插件

#### 添加 types 
1. @types/history
2. @types/react-redux
3. @types/react-router-dom

#### 版本号信息：
````
    "antd": "^4.2.0",
    "dva-core": "^2.0.2",
    "dva-loading": "^3.0.20",
    "fetch": "^1.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "react-router-dom": "^5.1.2"
````

#### 使用说明

执行install.sh 选择想要的配置执行完成后 yarn start 即可

#### 关于异步加载页面说明

 * @    import(异步加载) 和 require(同步)的加载方式决定着是否异步加载 
 * **注:** 
 * 一般用于比较大的页面插件比较多的页面单独分离出来。
 * 注意如果是首页的话几乎没有效果。第一个js无论如何都会被加载。
 * 所以你单独吧首页拆出来还是会加载主js 这样的话不但没有效果。反而你多了请求去请求首页的js
 * 所以这边的异步加载只适用于将一比较大的页面单独抽离出来。
 * 所以在写的时候特需要注意几点：
 *  比如 异步页面a 依赖组件 b。 b有500k左右的大小。 
 *  这时候如果你同步的组件中引用了b组件。那么打包的时候就会将这个b组件打包进 主js中。这样反而适得其反。
 *  我们要做的异步基本是一些只用一次比较大的页面单独抽离出来这样打包的时候 会重新打包的一个js中去。从而使得主js 变小。加快响应。
 *  你可以添加 loadingComponent=>react.component 提供一个loading
 


##### 模板1 simple

直接使用无任何额外的配置

##### 模板2 dva

包含了 dva 数据流的基础目录 已经fetch 的基础封装。antd 的引入。  

[项目链接](https://gitee.com/linzantian/base-react)