{"id":16490415,"url":"https://github.com/yuthelloworld/react-mobx-starter-kit","last_synced_at":"2026-05-10T21:55:41.118Z","repository":{"id":98300642,"uuid":"101703486","full_name":"YutHelloWorld/react-mobx-starter-kit","owner":"YutHelloWorld","description":"A React-Mobx starter kit. React, mobx, react-router-dom, webpack3, all is in.","archived":false,"fork":false,"pushed_at":"2017-09-12T15:30:35.000Z","size":272,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-11T20:33:11.540Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YutHelloWorld.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-29T01:15:14.000Z","updated_at":"2017-10-19T22:53:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a117964-8207-49ad-ab6f-b36121e7c923","html_url":"https://github.com/YutHelloWorld/react-mobx-starter-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YutHelloWorld%2Freact-mobx-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YutHelloWorld%2Freact-mobx-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YutHelloWorld%2Freact-mobx-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YutHelloWorld%2Freact-mobx-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YutHelloWorld","download_url":"https://codeload.github.com/YutHelloWorld/react-mobx-starter-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241325521,"owners_count":19944381,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-11T13:47:57.096Z","updated_at":"2025-11-25T04:07:22.630Z","avatar_url":"https://github.com/YutHelloWorld.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-mobx-starter-kit\n\n[![Build Status](https://travis-ci.org/YutHelloWorld/react-mobx-starter-kit.svg?branch=master)](https://travis-ci.org/YutHelloWorld/react-mobx-starter-kit)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/YutHelloWorld/vortex-react/blob/master/LICENSE)\n\n基于[React](https://facebook.github.io/react/)/[Mobx](http://redux.js.org/)/[React-Router v4](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)/[Webpack v3](https://webpack.js.org/)的脚手架。\n\n\u003e Redux替换Mobx的版本，可以查看这个仓库：[vortex-react](https://github.com/YutHelloWorld/vortex-react)\n## 目录\n\n### \u0026sect; [技术栈](#feature)\n\n### \u0026sect; [快速开始](#getting-start)\n\n- [安装](#installation)\n- [启动](#start)\n- [脚本](#script)\n\n### \u0026sect; [项目架构](#project-structure)\n\n- [目录结构](#file-tree)\n- [数据流](#module)\n\n### \u0026sect; [静态部署](#deploy)\n\n### \u0026sect; [规范](#style)\n\n### \u0026sect; [更多文档](#doc)\n\n## \u003ca name=\"feature\"\u003e\u0026sect; 技术栈\u003c/a\u003e\n\n- React\n- ES6 + Babel\n- Webpack3\n- Mobx\n- React-Router v4\n- Reactstrap + Bootstrap\\^4.0.0-alpha.6 (UI)\n- Sass\n- Eslint\n- Express\n\n---\n\n## \u003ca name=\"getting-start\"\u003e\u0026sect; 快速开始\u003c/a\u003e\n\n在开始之前，希望你已通读以下文档\n\n- [React](https://facebook.github.io/react/)\n- [Mobx](https://github.com/mobxjs/mobx)\n- [React-Router-Dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom)\n- [ES6](http://babeljs.io/learn-es2015/)\n\n看完一脸还是懵逼请移步参看 [React知识地图系列](https://github.com/YutHelloWorld/Blog/issues/1)\n\n你可以在[Babel REPL](http://babeljs.io/repl/)验证ES6转ES5、JSX语法。\n\n\u003e 推荐升级到 node 6.x + npm 5.x + yarn ^0.27.5环境。**强烈推荐**使用 [`cnpm`](https://github.com/cnpm/cnpm) 安装依赖\n\u003e 或手动切换到淘宝 npm 源：`npm set registry https://registry.npm.taobao.org/`\n\u003e (经测试，`cnpm` 对于 `node-sass` `PhantomJS`等问题多多的 Package 拥有秒杀能力)\n\n### \u003ca name=\"installation\"\u003e⊙ 安装\u003c/a\u003e\n\n```bash\ngit clone https://github.com/yuthelloworld/vortex-react.git \u003cmy-project-name\u003e\ncd \u003cmy-project-name\u003e\nyarn  # Install project dependencies (or `cnpm install`)\n```\n\n### \u003ca name=\"start\"\u003e⊙ 启动\u003c/a\u003e\n\n```bash\nyarn start  # Start the development server (or `npm start`)\n```\n\n### \u003ca name=\"script\"\u003e⊙ 脚本\u003c/a\u003e\n\n| `yarn \u003cscript\u003e` | 描述                        |\n| --------------- | --------------------------- |\n| `start`         | 启动\u003chttp://localhost:3000\u003e |\n| `build`         | 打包构建到目录 ./dist       |\n| `lint`          | 静态检查                    |\n| `lint:fix`      | 静态检查修复                |\n\n---\n\n## \u003ca name=\"project-structure\"\u003e\u0026sect; 项目架构\u003c/a\u003e\n\n### \u003ca name=\"file-tree\"\u003e⊙ 目录结构\u003c/a\u003e\n\n```bash\n.\n├── build                    # 打包配置\n├── public                   # 公共静态资源\n├── server                   # express服务\n│   └── main.js              # 服务入口js\n├── src                      # 应用源文件\n│   ├── index.html           # html模板\n│   ├── main.js              # 程序启动和渲染\n│   ├── normalize.js         # 浏览器的兼容和垫片\n│   ├── components           # 全局可复用组件\n│   ├── layouts              # 主页布局\n│   │   └── PageLayout       # 导航\n│   ├── routes               # 动态路由\n│   │   ├── index.js         # 主路由\n│   │   ├── Home             # 子路由Home\n│   │   │   ├── index.js     # 路由定义和异步加载\n│   │   │   ├── assets       # 组件的静态文件\n│   │   │   ├── components   # 组件\n│   │   │   └── routes **    # 子路由\n│   │   └── Counter          # 子路由Counter\n│   │       ├── index.js     # 路由定义\n│   │       ├── components   # 组件\n│   │       └── routes **    # 子路由\n│   ├── store                # Mobx stores\n│   │   ├── stores.js\n│   │   └── counterStore.js\n│   └── styles               # 样式表\n└── tests                    # 单元测试(自行添加)\n```\n\n### \u003ca name=\"module\"\u003e⊙ 数据流\u003c/a\u003e\n\n![mobx-flow](https://i.loli.net/2017/08/29/59a4bd2f1d578.png)\n\n---\n\n## \u003ca name=\"deploy\"\u003e\u0026sect; 静态部署\u003c/a\u003e\n\n\u003e推荐使用`nginx` 反向代理静态web服务来启动应用。请将路由指向`~/dist/index.html`，然后让`React-Router`处理剩下的事，更多参考[这个文档](https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#configuring-your-server)。Express在脚手架中用于扩展服务和代理API。\n\n这里以ubuntu为例演示如何用nginx设置反向代理。\n\n- 安装nginx：\n\n```bash\nsudo apt-get install nginx\n```\n\n- 修改配置文件：\n\n```bash\nsudo vi /etc/nginx/sites-available/default\n```\n\n- 将以下内容粘贴到文件中：\n\n```bash\nserver{\n  listen 8001;\n  server_name 127.0.0.1;  //这里可以改成服务器地址\n  location / {\n    proxy_pass http://127.0.0.1:3000;\n  }\n}\n```\n\n- 重启nginx服务，并启动应用，打开浏览器访问 \u003chttp://localhost:8081\u003e。\n\n```bash\nsudo service nginx restart\n\n// 切换到工程目录\nyarn start\n```\n\n---\n\n## \u003ca name=\"style\"\u003e\u0026sect; 规范\u003c/a\u003e\n\n结合[airbnb/javascript](https://github.com/airbnb/javascript)、[Javascript Standard Style](https://standardjs.com/rules-zhcn.html#javascript-standard-style)以及[standard-react](https://github.com/standard/eslint-config-standard-react)，配置`.eslintrc`\n\n## \u003ca name=\"doc\"\u003e\u0026sect; 更多文档\u003c/a\u003e\n\n[React知识地图系列](https://github.com/YutHelloWorld/Blog/issues/1)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuthelloworld%2Freact-mobx-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuthelloworld%2Freact-mobx-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuthelloworld%2Freact-mobx-starter-kit/lists"}