/React-Dev

A starter boilerplate for a universal webapp using express, react, react-router, redux , redux-saga, webpack, and fetch

Primary LanguageJavaScriptMIT LicenseMIT

React Dev redux

这款入门套件旨在让您使用一系列极好的前端技术来启动和运行。

该项目的主要目标是为构建现代Web应用提供稳定的基础。 它的目的不是规定你的项目结构或演示一个`完整的应用程序，而是提供一组工具，旨在使前端开发更健壮，更简单，最重要的是，更有趣。 查看下面的完整功能列表！

目录

  1. 要求
  2. 开始
  3. 启动项目
  4. 项目结构
  5. 项目特点
  6. redux-saga
  7. 代码规范
  8. mock
  9. 测试
  10. 开发
  11. 部署
  12. 服务器端渲染
  13. 性能优化
  14. 参考

要求

  • node ^7.10.0
  • npm ^4.2.0

开始

在确认您的环境符合上述要求后，您可以通过执行以下操作来基于React Dev创建一个新项目：

$ git clone 
https://github.com/Tianlikai/React-Dev.git 
$ cd <my-project-name>

完成后，安装项目依赖项。 建议您使用Yarn进行确定性依赖管理，但cnpm install就足够了。

$ cnpm install  # Install project dependencies (or `yarn add`)

启动项目

完成开始步骤后，即可开始项目！

$ npm start  # Start the development server (or `yarn start`)

在开发过程中，您还可以使用其他脚本：

npm <script> Description
start Serves your app at localhost:9000
build Builds the application to ./dist

项目结构

本项目目录结构综合了按功能组织和mvc结构.

.
├── build                    # webpack 打包配置
│   ├── dev                  # 启动开发服务
│   ├── index                # 打包目录配置
│   ├── prod                 # 启动发布服务
│   ├── webpack.base.conf    # webpack基础配置
│   ├── webpack.dev.conf     # 开发环境 区别配制
│   └── webpack.prod.conf    # 发布环境 区别配置
├── src                      # 应用程序源代码
├── ├── assets               # 样式，图片
│   ├── components           # 可重用组件
│   ├── model                # 按功能组织模块 每个模块包含action、redux-saga、reducer
│   │   ├── login            # 处理login相关业务
│   │   └── route            # 处理路由相关业务
│   ├── redux                # redux 全局文件
│   │   ├── action           # 目录下包含action全局文件
│   │   ├── reducers         # reducer全局文件，合并reducer、按需插入reducer
│   │   └── store            # store全局文件
|   |       ├── enhancers    # Store 增强器 Redux DevTools
|   |       ├── index        # export 增强、结合redux-saga的store
|   |       ├── initState    # 项目状态结构
|   |       ├── middle...    # 中间件打印日志
|   |       └── syncHi...    # store、route同步
│   ├── routes               # 项目路由
│   ├── sagas                # rootSaga 监听所有异步请求
│   ├── services             # 定义所有异步请求 可以按功能组织
│   ├── utils.js             # 工具函数 
│   │   └── request          # 封装fetch 
│   ├── views.js             # 视图文件 每个文件对应一个应用模块
│   │   ├── login            # login页面
│   │   └── main             # main页面
│   ├── app.js               # 项目入口
│   └── index.html           # Main HTML page container for app
└── static                   # 静态文件

项目特点

  • Hot Reloading 当应用程序在开发模式下运行时(npm start)，默认启用热重载。 此功能是通过webpack的Hot Module Replacement功能实现的，代码更新可以在应用程序运行时注入到代码更新中，而不会完全重新加载
  • 优化目录结构，更好的模块分离，model文件集中管理了action、saga、reducer
  • Redux DevTools，可选Redux DevTools Chrome Extension
  • Redux Logger 打印动作及前后状态变化
  • why-did-you-update 检测不必要的组件重渲染（默认关闭）
  • 引入服务层统一管理 fetch 请求此处参考ant-design-pro
  • 生产环境下的编译对代码进行优化

redux-saga

本案例使用Redux-Saga处理异步请求，借鉴ant-design-pro对Redux-Saga的应用案例实现。

代码规范

使用Eslint进行代码约束，详细配置.eslintrc、.eslintignore

mock

本案例使用mockjs模拟数据，目前只是简单应用，准备借鉴roadhog配合roadhog-api-doc实现真是场景的应用

测试

待研究

开发

使用快速编译的 hot reloding

$ npm start

部署

使用npm run build生成的 ./ dist文件夹来部署。

$ npm run build

使用像nginx这样的网络服务器来提供应用程序。 确保将传入的路由请求引导至根目录'./dist/ index.html'文件，以便客户端应用程序将被加载, react路由会通过映射按需加载其余的文件。 如果你不确定如何做到这一点，你可能会发现本文档很有帮助。

服务器端渲染

服务器端实践，正在折腾server-render

性能优化

参考

  • redux 最好是能看书，强烈推荐《深入浅出React和Redux》
  • ant-design-pro 借鉴其对redux-saga异步调用的实践运用和fetch封装
  • redux-saga 基于Generator的异步请求处理方案
  • react-redux-starter-kit github上start比较多的react开发脚手架
  • kenberkeley 好理解版本的react-redux-starter-kit