之前做过react项目，但是没有全面搭过框架，顺便研究一波mobx。
项目代码github地址：https://github.com/lingziyb/react-mobx-demo
一、选react脚手架
想：自己搭整个框架还是比较费劲的，所以首先想到用它的脚手架来初始化一个大概的框架结构。
搜：开始搜脚手架，最出名的就是facebook官方出版的create-react-app，那我们就用这个。
二、使用create-react-app初始化项目
工具会帮你初始化一个简单基本的项目并且会自动帮你安装项目所需要的各种依赖
npx create-react-app my-app cd my-app yarn start //或者npm start
此时浏览器会自动访问 http://localhost:3000/，你会看到一个 react 的欢迎界面，如下：代表你的项目已经正常运行了。
运行后的页面.png
三、配置项
1. 展开配置项
配置项打开前.png
虽然项目已经运行，但是在项目目录里是找不到webpack配置项的。比如，我们想配置less、配置alias别名，这时我们需要做一个操作：展开项目（eject）[ 注：这个一个不可逆过程，一旦你执行了，就不能回到初始化 ] 。
yarn eject // 或者 npm run eject
再看项目结构，此时已多了一些其他目录，展开config目录，里面就有webpack配置文件以及其他各种配置，如下：
配置项打开后.png
2. less配置
yarn add less less-loader
修改 webpack配置文件
找到
webpack.config.dev.js与webpack.config.prod.js文件，后缀dev表示开发的配置，prod表示是生产环境的配置，因此两个配置文件都需要修改。修改
webpack.config.dev.js，在module的rules字段中更改以下代码
更改前：
{ test: /\.css$/,
use: [
require.resolve( 'style-loader' ),
{
loader: require.resolve( 'css-loader' ),
options: {
importLoaders: 1,
},
...
],
},更改后：
{ test: /\.(css|less)$/, // 划重点
use: [
require.resolve( 'style-loader' ),
{
loader: require.resolve( 'css-loader' ),
options: {
importLoaders: 1,
},
...
{ loader: require.resolve( 'less-loader' ), // 划重点
}
],
},修改
webpack.config.prod.js，同理，在rules字段中更改以上代码
四、引入路由
1. 更改src目录结构
便于更符合实际项目场景，我们在
src下新建如下几个文件夹：
a.api文件夹存放ajax请求
b.components文件夹存放组件
c.pages文件夹存放页面
d.routes文件夹存放路由
e.stores文件夹存放数据
f.utils文件夹存放工具类函数
2. 设置文件别名
既然有了文件夹来区分不同的功能，为了方便文件的相互，我们可以利用 webpack 来设置别名。
修改
config文件夹下的paths文件
module.exports = {
...
appApi: resolveApp( 'src/api' ),
appComponents: resolveApp('src/components'),
appPages: resolveApp( 'src/pages' ),
appRoutes: resolveApp('src/routes'),
appStores: resolveApp( 'src/stores' ),
appUtils: resolveApp('src/utils'),
...修改
webpack配置项alias
alias: {
...
api: paths.appApi,
components: paths.appComponents,
pages: paths.appPages,
routes: paths.appRoutes,
stores: paths.appStores,
utils: paths.appUtils,
...3. 安装路由组件 react-router
yarn add react-router react-router-dom
在
pages文件夹中新建home.jsx页面和about.jsx页面home.jsx
import React from 'react';import { Link } from 'react-router-dom';class Home extends React.Component {
render() { return ( <div>
<p>这是首页</p>
<Link to="/about">go to About</Link>
</div>
);
}
}export default Home;about.jsx
import React from 'react'import { Link } from 'react-router-dom'class About extends React.Component {
render() { return ( <div>
<p>这是about页面</p>
<Link to="/">go to Home</Link>
</div>
)
}
}export default About;在
routes文件夹中新建index.jsx页面
import React from 'react'import { BrowserRouter as Router, Route } from 'react-router-dom'import Home from 'pages/home';import About from 'pages/about';const Routes = () => (
<Router>
<div>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</div>
</Router>
)
export default Routes;为了页面好看一点点，我们写个App.less
.app {
text-align: center;
border: 1px solid #ddd;
padding: 30px;
p {
color: green;
}
}更改
app.js文件
import React, { Component } from 'react';import Routes from 'routes/index';import './App.less'class App extends Component {
render() { return ( <div className="app">
<Routes />
</div>
);
}
}export default App;此时首页长相：
首页.png
此时about页长相：
about页
五、添加数据管理mobx
1. 按照依赖
yarn add mobx mobx-react
2.开始使用
使用
mobx你还需要安装babel的装饰器插件，以及修改babel的配置
yarn add babel-plugin-transform-decorators-legacy
修改
package.json文件中的babel参数，或者在根目录下新建一个 .babelrc 文件
"babel": { "presets": [ "react-app"
], "plugins": [ "babel-plugin-transform-decorators-legacy"
]
...现在，你可以在你的组件中使用 mobx 来管理你的状态了。关于 mobx 的使用，你可以访问官方文档
3. 修改文件
在
stores里新建index.js、home.js、about.js。 【 注：home.js和about.js我用了两种方式写，都可以的。】home.js
import { observable } from 'mobx';const HomeStore = observable( { title: 'this is home page'} );export default HomeStore;about.js
import { observable } from 'mobx';class AboutStore {
@observable title = 'this is about page';
}export default new AboutStore();index.js
import aboutStore from './about';import homeStore from './home';const store = {
aboutStore,
homeStore
};export default store;修改
app.js
import React, { Component } from 'react';import Routes from 'routes/index';import './App.less';import { Provider } from 'mobx-react';import stores from 'stores/index';class App extends Component {
render() { return ( <div className="app">
<Provider {...stores}>
<Routes />
</Provider>
</div>
);
}
}export default App;修改
pages里的home.jsx
import React from 'react';import { Link } from 'react-router-dom';import { inject } from 'mobx-react';
@inject( 'homeStore' )class Home extends React.Component {
render() { return ( <div>
<p>{this.props.homeStore.title}</p>
<Link to="/about">go to About</Link>
</div>
);
}
}export default Home;修改
pages里的about.jsx
import React from 'react'import { Link } from 'react-router-dom'import { inject } from 'mobx-react';
@inject( 'aboutStore' )class About extends React.Component {
render() { return ( <div>
<p>{ this.props.aboutStore.title }</p>
<Link to="/">goto Home</Link>
</div>
)
}
}export default About;这是现在的首页：【数据变了哟】
首页.png
这是现在的about页：【数据变了哟】
about页.png
六、数据请求axios
yarn add axios
在
api文件夹里增加home.js
import axios from 'axios';export default { /**
* 获取首页列表页数据
* @returns {Promise.<*>}
*/
async getList(){ return await axios.get( 'http://lemonof.com:82/api/getList' ).then( ( res ) => res.data.data );
}
}更改
stores里的home.js
import { observable, action } from 'mobx';import HomeApi from 'api/home';const HomeStore = observable( { title: 'this is home page', list: [], // 获取首页数据
async getList() { this.list = await HomeApi.getList();
}
} );export default HomeStore;更改
pages里的home.jsx
import React from 'react';import { Link } from 'react-router-dom';import { observer, inject } from 'mobx-react';
@inject( 'homeStore' )
@observerclass Home extends React.Component {
componentDidMount() { this.props.homeStore.getList();
}
render() { return ( <div>
<p>{this.props.homeStore.title}</p>
<Link to="/about">go to About</Link>
<div style={{ textAlign: 'left', width: '450px', margin: 'auto' }}>
<p>下面是列表数据：</p>
{
this.props.homeStore.list && this.props.homeStore.list.map( ( el ) => {
return ( <div key={el.id}>标题：{el.title}</div> )
} )
} </div>
</div>
);
}
}export default Home;此时首页长相：【页面没有优化，请将就看】
首页.png
此时about页长相：【页面没有优化，请将就看】
about页.png
作者：寻找自我的兔茽
链接：https://www.jianshu.com/p/dcdb3884d73c
随时随地看视频
