React + MobX 真实世界示例应用教程
react-mobx-realworld-example-app Exemplary real world application built with React + MobX 项目地址:https://gitcode.com/gh_mirrors/re/react-mobx-realworld-example-app
1. 项目的目录结构及介绍
react-mobx-realworld-example-app/
├── public/
├── src/
│ ├── components/
│ ├── pages/
│ ├── stores/
│ ├── styles/
│ ├── utils/
│ ├── App.js
│ ├── index.js
│ └── ...
├── .env
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── jsconfig.json
├── package-lock.json
├── package.json
├── project-logo.png
└── yarn.lock
目录结构说明
public/ : 包含公开的静态文件,如 index.html
。src/ : 包含项目的源代码。
components/ : 存放可重用的 React 组件。pages/ : 存放页面级别的组件。stores/ : 存放 MobX 状态管理相关的文件。styles/ : 存放全局样式文件。utils/ : 存放工具函数和辅助类。App.js : 应用的根组件。index.js : 应用的入口文件。 .env : 环境变量配置文件。.gitignore : Git 忽略文件配置。.prettierrc : Prettier 代码格式化配置。LICENSE : 项目许可证。README.md : 项目说明文档。jsconfig.json : JavaScript 配置文件。package-lock.json : npm 依赖锁定文件。package.json : 项目依赖和脚本配置。project-logo.png : 项目图标。yarn.lock : Yarn 依赖锁定文件。
2. 项目的启动文件介绍
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import App from './App';
import stores from './stores';
ReactDOM.render(
<Provider {...stores}>
<App />
</Provider>,
document.getElementById('root')
);
文件说明
index.js : 这是应用的入口文件,负责渲染根组件 App
并将其挂载到 DOM 中的 root
元素上。使用 mobx-react
的 Provider
组件将 MobX 的 store 注入到应用中。
3. 项目的配置文件介绍
package.json
{
"name": "react-mobx-realworld-example-app",
"version": "0.1.0",
"private": true,
"homepage": "https://react-mobx-realworld.io",
"license": "MIT",
"devDependencies": {
"custom-react-scripts": "0.2.0",
"gh-pages": "^1.0.0"
},
"dependencies": {
"history": "4.7.2",
"marked": "^0.3.6",
"mobx": "^3.2.2",
"mobx-react": "^4.2.2",
"promise-prototype-finally": "^3.0.0",
"prop-types": "^15.5.10",
"query-string": "5.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router-dom": "4.2.2",
"superagent": "^3.6.0",
"superagent-promise": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test"
}
}
文件说明
package.json : 这是项目的配置文件,包含了项目的名称、版本、许可证、依赖项和脚本命令。
devDependencies : 开发依赖项,如 custom-react-scripts
和 gh-pages
。dependencies : 生产依赖
react-mobx-realworld-example-app Exemplary real world application built with React + MobX 项目地址:https://gitcode.com/gh_mirrors/re/react-mobx-realworld-example-app