react+mobx+antd+scss+axios

zzxiexin 1031 0

本项目技术栈 react+antd+mobx+scss+react-router-dom+axios 基于 create-react-app 二次修改搭建步骤:

1.create-react-app 初始化项目,新建 config-overrides.js,配置 antd、mobx 装饰器语法支持

首先参考官网:https://ant.design/docs/react/use-with-create-react-app-cn ,再配置 mobx,配置如下:

const {  override,  fixBabelImports,  addDecoratorsLegacy} = require("customize-cra");
module.exports = override(  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  }),  addDecoratorsLegacy()
);

到此,项目已经支持 antd 和 mobx 了。

2.配置 react-router-dom

我简单的设置了三个页面,index、one、two,新建 routes--->index.js,配置如下:

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import One from "../pages/one/one";
import Two from "../pages/two/two";
import Index from "../pages/index/index";
const Routes = (  
  <Switch>
    <Route path="/one" component={One} />
    <Route path="/two" component={Two} />
    <Route path="/index" component={Index} />
    <Redirect from="/" to="/index" />
 </Switch>);
 export default Routes;

3.配置简单的 mobx

项目根目录下新建 stores 文件夹,在里面新建 index.js,然后对需要的页面新建对应的 js 文件,在 class 里面设置好需要观察的数据、操作等(其实就是 observable、compute、action、autorun 等),
在项目的入口文件导入所有需要的 store,并且将其实例化,最后注入到 index.js,代码如下:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "mobx-react";
import Stores from "./stores";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(  <Provider {...Stores}>
    <Router>
      <App />
    </Router>
  </Provider>, document.getElementById("root")
);
serviceWorker.unregister();
  1. 新建 src/api,在里面新建 axios.js 和 api.js,axios 用来设置 axios 一些请求头、拦截器、基本的请求封装,api 则用来封装所有的接口请求,方便查找

  2. 新建 src/setupProxy.js,安装 http-proxy-middleware, 配置基本跨域请求

至此,react 基本的项目架构已经有了,至于 scss、css module,create-react-app 自己已经集成了相关的配置,直接使用即可。附上最后效果图:


react+mobx+antd+scss+axios-第1张图片-前端这点事

项目地址:https://github.com/zzxiexin/react-mobx-tpl

标签: React 项目搭建

上一篇当前文章已是最后一篇了

下一篇开启Chrome多线程下载

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~