https://github.com/easychen/easy-starter2
react + mobx + react-router v4 + react-next-i18n starter for create-react-app 2.x
https://github.com/easychen/easy-starter2
Last synced: 11 months ago
JSON representation
react + mobx + react-router v4 + react-next-i18n starter for create-react-app 2.x
- Host: GitHub
- URL: https://github.com/easychen/easy-starter2
- Owner: easychen
- Created: 2019-02-15T15:57:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-09T17:25:56.000Z (over 2 years ago)
- Last Synced: 2025-04-05T20:11:14.237Z (about 1 year ago)
- Language: JavaScript
- Size: 3.08 MB
- Stars: 18
- Watchers: 3
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Easy-starter 说明
[Easy-starter]() 是一个整合了 react 、 react-router v4 和 mobx 的起始项目脚手架。clone 到本地，然后运行 yarn start 就可以开始进行开发。
## 添加页面
### 在 component 中添加页面，比如 index.js
```
import React, { Component } from 'react';
import { observer , inject } from 'mobx-react';
import { Redirect } from 'react-router-dom';
@inject("store")
@observer
export default class Index extends Component
{
render()
{
return
Welcome to {this.props.store.appname}
;
}
}
```
### 在 App.js 中 import 它
```
import Index from './component/Index';
```
### 并添加到 Switch 标签里边
```
```
这样就能访问到对应的页面了
## 添加全局数据和方法
只供单个组件使用的数据写到 state 里边即可；多个组件用的数据写到 store/AppState.js 里边。
```
@observable var-you-added = "EasyStarter";
```
之后可以直接在组件中调用：
```
{this.props.store.var-you-added}
```
对网络请求、文件写入等异步操作，应该全部写入到 AppState.js 中。需要使用 @action 修饰符，建议使用 async/await 来处理异步。
```
@action
async get_resume( id )
{
var params = new URLSearchParams();
params.append("id" , id);
const { data } = await axios.post( 'http://o.ftqq.com/?m=resume&a=detail' , params );
if( parseInt( data.code , 10 ) === 0 )
{
this.current_resume_id = data.data.id;
this.current_resume_title = data.data.title;
this.current_resume_content = data.data.content;
}
return data ;
}
```
## 自带 SCSS 支持
可直接 import .scss 文件。
## 自带 i18n 支持
使用 react-i18n 进行国际化，配置见 ./i18n.js ，语言包文件在 ./public/locales 下，为 Json 格式。
## 默认添加 DocumentTitle 设置页面 title