A React-Mobx starter kit. React, mobx, react-router-dom, webpack3, all is in.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
public
server
src
.editorconfig
.eslintignore
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
project.config.js
yarn.lock

README.md

React-mobx-starter-kit

Build Status JavaScript Style Guide license

基于React/Mobx/React-Router v4/Webpack v3的脚手架。

Redux替换Mobx的版本,可以查看这个仓库:vortex-react

目录

§ 技术栈

§ 快速开始

§ 项目架构

§ 静态部署

§ 规范

§ 更多文档

§ 技术栈

  • React
  • ES6 + Babel
  • Webpack3
  • Mobx
  • React-Router v4
  • Reactstrap + Bootstrap^4.0.0-alpha.6 (UI)
  • Sass
  • Eslint
  • Express

§ 快速开始

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

看完一脸还是懵逼请移步参看 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 打包构建到目录 ./dist
lint 静态检查
lint:fix 静态检查修复

§ 项目架构

⊙ 目录结构

.
├── build                    # 打包配置
├── public                   # 公共静态资源
├── server                   # express服务
│   └── main.js              # 服务入口js
├── src                      # 应用源文件
│   ├── index.html           # html模板
│   ├── main.js              # 程序启动和渲染
│   ├── normalize.js         # 浏览器的兼容和垫片
│   ├── components           # 全局可复用组件
│   ├── layouts              # 主页布局
│   │   └── PageLayout       # 导航
│   ├── routes               # 动态路由
│   │   ├── index.js         # 主路由
│   │   ├── Home             # 子路由Home
│   │   │   ├── index.js     # 路由定义和异步加载
│   │   │   ├── assets       # 组件的静态文件
│   │   │   ├── components   # 组件
│   │   │   └── routes **    # 子路由
│   │   └── Counter          # 子路由Counter
│   │       ├── index.js     # 路由定义
│   │       ├── components   # 组件
│   │       └── routes **    # 子路由
│   ├── store                # Mobx stores
│   │   ├── stores.js
│   │   └── counterStore.js
│   └── styles               # 样式表
└── tests                    # 单元测试(自行添加)

⊙ 数据流

mobx-flow


§ 静态部署

推荐使用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;
  }
}
sudo service nginx restart

// 切换到工程目录
yarn start

§ 规范

结合airbnb/javascriptJavascript Standard Style以及standard-react,配置.eslintrc

§ 更多文档

React知识地图系列