个人总结的react脚手架

react-cli

react应用的起步工程和总结 Github传送门

特点

采用时下流行的技术栈，视图：react，状态管理：redux，路由：react-router 作为基础，配合webpack等开发工具而搭建的项目架构，适用于中小型项目，也可以在此基础上进行调整适合更多类型的项目。

同时还会提供react开发相关的资料、疑问、解决方案等，希望对开发者有所帮助，也对自己的技术有所提升。欢迎大家提供建议

技术栈

• react
• redux
• react-router
• mock
• pace
• whatwg-fetch

项目构建

目录结构

.
├── README.md
├── build                             #构建生成目录
│   ├── bundle                        
│   └── index.html
├── package-lock.json
├── package.json
├── src                             #源代码文件
│   ├── action.js                   #action创建函数文件
│   ├── components                  #组件目录 *1
│   │   ├── layout
│   │   └── notify
│   ├── http.js                     #所有fetch请求  *2
│   ├── index.html                  #webpack生成html的模板 *3
│   ├── index.js                    #入口文件
│   ├── reducer.js                  #reducer  *4
│   ├── router.js                   #路由定义
│   ├── routes                      #路由对应的page目录
│   │   ├── App.js                  #入口文件 *5
│   │   ├── index                   #一个页面对应一个文件夹  *6
│   │   │   ├── Index.js
│   │   │   └── index.scss
│   │   └── login
│   │       ├── Login.js
│   │       └── login.scss
│   ├── static                      #静态文件夹
│   │   └── logo.jpg
│   ├── store.js                    #store创建文件  *7
│   └── utils                       #工具集
│       ├── config.js               #项目配置
│       ├── mock.js                 #本地mock数据
│       ├── pace.css                #首屏加载动画css
│       ├── pace.js                 #首屏加载动画js
│       └── theme.scss              #主题sass变量
├── webpack.config.js               #webpack开发配置文件
└── webpack.production.config.js    #webpack构建配置文件

目录结构说明

1. components 每一个组件对应一个文件夹，包含该组件js以及css，更小的组件也放在该文件夹下
2. 将所有的请求独立出来放在一个文件里，每个fetch请求封装成一个回调函数并export
3. 采用自定义html模板进行打包便于引用cdn等文件，或者其他自定义操作
4. 项目复杂的时候可以创建reducer文件夹，进一步拆分
5. 每个页面都是该组件的字组件，便于引入例如通知等全局组件
6. 每个页面对应一个文件夹，因为一个页面包含的组件较多，利于拆分
7. 独立出来store是便于在非组件的文件中操作reducer的store

开发说明

克隆项目:

git clone https://github.com/Houserqu/react-cli.git

进入项目目录安装依赖:

npm i

开发:

npm run dev

构建:

npm run build