Skip to content

A React-Mobx starter kit. React, mobx, react-router-dom, webpack3, all is in.

License

Notifications You must be signed in to change notification settings

YutHelloWorld/react-mobx-starter-kit

Repository files navigation

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知识地图系列

About

A React-Mobx starter kit. React, mobx, react-router-dom, webpack3, all is in.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published