README-zh.md

vortex-react

基于React/Redux/React-Router v4/Reactstrap的前端脚手架。

2017/10/17 使用create-react-app进行了重构
2017/8/29 切换到分支mobx查看mobx替代redux的版本

目录

§ 技术栈

§ 快速开始

• 安装
• 启动
• 脚本

§ 项目架构

• 目录结构
• 数据流
• 模块逻辑

§ 开发调试

• Redux DevTools
• 路由

§ 静态部署

§ 更多文档

§ 技术栈

• React
• ES6/7/8 + Babel
• Redux
• React-Router v4
• Reactstrap + Bootstrap^4.0.0-alpha.6 (UI)
• Sass

---

§ 快速开始

在开始之前，希望你已通读以下文档

• React
• Redux
• React-Router-Dom
• ES6

看完一脸还是懵逼请移步参看 React知识地图系列

你可以在Babel REPL验证ES6转ES5、JSX语法。

推荐升级到 node 6.x + npm 5.x + yarn ^0.27.5环境。强烈推荐使用 cnpm 安装依赖 或手动切换到淘宝 npm 源：npm set registry https://registry.npm.taobao.org/ (经测试，cnpm 对于 node-sass PhantomJS等问题多多的 Package 拥有秒杀能力)

⊙ 安装

git clone https://github.com/yuthelloworld/vortex-react.git <my-project-name>
cd <my-project-name>
yarn  # Install project dependencies (or `cnpm install`)

⊙ 启动

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

⊙ 脚本

yarn <script>	描述
start	启动http://localhost:3000
build	打包到 ./build
test	单元测试
coverage	运行单元测试并生成覆盖率
analyze	分析bundle大小

---

§ 项目架构

⊙ 目录结构

.
├── public                  # 公共静态资源
└── src                     # 应用源文件
   ├── index.js             # 程序启动和渲染入口
   ├── components           # 全局可复用组件
   ├── layouts              # 主页布局
   │   └── PageLayout       # 导航
   ├── routes               # 路由
   │   ├── index.js         # 主路由
   │   ├── Home             # 子路由Home
   │   │   ├── index.js     # 路由定义和异步加载
   │   │   ├── assets       # 组件的静态文件
   │   │   ├── components   # 展示组件
   │   │   └── routes **    # 子路由
   │   └── Zen              # 路由页面Zen
   │       ├── index.js     # 路由定义
   │       ├── container    # 容器组件
   │       ├── modules      # module(reducers/constants/actions)
   │       └── routes **    # 子路由
   ├── store                # Redux相关模块
   │   ├── createStore.js   # 创建和使用redux store  
   │   └── reducers.js      # Reducer的注册和注入
   └── styles               # 样式表

⊙ 数据流

⊙ 模块逻辑

---

§ 开发调试

在开发环境，采用了webpack-dev-middleware和webpack-hot-middleware两个中间件，为应用提供Server和HMR。

⊙ Redux DevTools

强烈推荐安装谷歌浏览器插件Redux DevTools Chrome Extension,来查看整个应用状态的时光穿梭旅程。

⊙ 路由

react-router-dom（也就是react-router v4）。最小的逻辑单元为路由，路由内部子组件数据由路由父组件传递。

---

§ 静态部署

推荐使用nginx 反向代理静态web服务来启动应用。请将路由指向~/dist/index.html，然后让React-Router处理剩下的事，更多参考这个文档。Express在脚手架中用于扩展服务和代理API。

这里以ubuntu为例演示如何用nginx设置反向代理。

• 安装nginx：

sudo apt-get install nginx

• 修改配置文件：

sudo vi /etc/nginx/sites-available/default

• 将以下内容粘贴到文件中：

server{
  listen 8001;
  server_name 127.0.0.1;  //这里可以改成服务器地址
  location / {
    proxy_pass http://127.0.0.1:3000;
  }
}

• 重启nginx服务，并启动应用，打开浏览器访问 http://localhost:8081。

sudo service nginx restart

// 切换到工程目录
yarn start

---

§ 更多文档

React知识地图系列