前言

最近在学习React库，本人就从头开始，一步步写出一个后盾治理，从而在理论我的项目中来了解React的一些知识点。文章中代码比拟简略，能够从github地址中查看具体我的项目代码。

我的项目预览地址

目前我的项目用的是mock数据，账号能够随便输出。
React 后盾治理demo我的项目

我的项目预览截图

  1. 登录

  1. 注册

  1. 首页

我的项目用到的依赖

  1. react // 外围库
  2. antd // UI库
  3. axios // 申请依赖
  4. Echarts // 我的项目中的图表
  5. react-loadable // 动静加载
  6. react-router-config // 路由配置
  7. react-router-dom // 路由依赖
  8. redux、react-redux、redux-saga // redux一系列依赖
  9. 其余

目录

  1. 装置 create-react-app脚手架并创立我的项目
  2. 依据集体习惯或公司规范欠缺目录构造
  3. 应用react-loadable动静加载组件
  4. 配置axios对立申请
  5. 配置react-redux及redux-sagas
  6. 代码地址

初始化我的项目

create-react-app 也是 React 官网举荐的一个脚手架工具，装置好脚手架就能够创立我的项目了，如下：

// Node >= 8.10 和 npm >= 5.6npx create-react-app 项目名称cd 项目名称npm start 或者 yarn start
留神
npx不是拼写错误 -- 它是 npm 5.2+ 附带的 package 运行工具

欠缺目录构造

这个是目前我本人用到的这样来定义，目录构造依据本人需要即可。

项目名称    |    |---src                                // 资源文件    |         |    |         |---assets                // 图片、字体等其余动态资源文件    |    |---components        // 公共组件    |    |---routes                // 路由配置文件    |    |---store                // 状态存储    |    |---style                // 公共css文件    |    |---utils                // 公共办法    |    |---views                // 页面    |    |---index.js          // 入口文件    |    |---craco.config.js        // 因为咱们不必 npm run reject将配置裸露进去，    |                                            // 这个配置文件是用来对 create-react-app 的    |                                            // 默认配置进行指定的一个计划。    |--- 其余文件

我的项目文件解析

入口文件 index.js

import React from 'react';import ReactDOM from 'react-dom';import { HashRouter } from 'react-router-dom' // 路由import { renderRoutes } from "react-router-config" // 配置动态路由的一个工具库import { Provider } from 'react-redux'import { ConfigProvider } from 'antd'import zhCN from 'antd/es/locale/zh_CN'import http from '@/utils/http'    // 封装的http申请import routes from '@/routes'import '@/style/index.scss'import configureStore from '@/store'import rootSaga from '@/store/sagas'// 将 Saga 与 Redux Store 建设连贯const store = configureStore()rootSaga.map(saga => store.runSaga(saga))// 将http挂在的全局下，页面中就能够间接去援用，应用：$http['get'|'post'|...]React.$http = httpReactDOM.render(  <Provider store={store}>    <ConfigProvider locale={zhCN}>      <HashRouter>        {renderRoutes(routes)}      </HashRouter>    </ConfigProvider>  </Provider>,  document.getElementById('root'));

路由文件

// 因为装置了 react-loadable，所以咱们能够想vue中路由一样，写一个对立的配置文件import React from 'react'import { Redirect } from 'react-router-dom'import RouteComponents from './components'const routes = [  {    path: '/login',    component: RouteComponents.Login  },  {    path: '/forget',    component: RouteComponents.Forget  },  {    path: '/404',    component: RouteComponents.NotFound  },  {    render: (props) => {      const token = getToken()      if (!token) {        return <Redirect to="/login" />      }      return <RouteComponents.Layout {...props} />    },    routes: [      {        path: '/',        exact: true,        render: () => <Redirect to="/home" />      },      {        path: '/home',        component: RouteComponents.Home      },      {        path: '/user',        component: RouteComponents.User      }     ]  },  {    path: '*',    component: RouteComponents.NotFound  }]export default routes// -------分割线---components.js文件内容----------------import React from 'react'import Loadable from 'react-loadable'import Loading from '@/components/loading' // 封装的一个loading组件const Layout = Loadable({  loader: () => import('@/views/Layout'),  loading: Loading})...export default {    Layout,    ...}

store文件

// index.js，应用 redux-saga 中间件import createSagaMiddleware from 'redux-saga'import { createStore, applyMiddleware } from 'redux'import concatReducer from './reducers'export default function configureStore(initialState) {  const sagaMiddleware = createSagaMiddleware()  return {    ...createStore(concatReducer, initialState, applyMiddleware(sagaMiddleware)),    runSaga: sagaMiddleware.run  }}

配置axios对立申请（cookie，拦挡，对立报错等）

为什么封装axios？ 首先，咱们应用axios作为申请形式，各方面性能吧都不错。其次，在单页利用中，波及到的申请会十分多，对于申请拦挡、响应拦挡、谬误对立解决等惯例操作，咱们把axios进行二次封装会节俭大量的代码，益处不必我多说了。我的示例比较简单，代码如下：

import axios from 'axios'import { message } from 'antd'...省略局部const http = axios.create({  baseURL: MOCK_API,  // withCredentials: true,  timeout: 1000 * 60 * 3})http.interceptors.request.use(function(config) {  const { url } = config  if (!whiteApi.includes(url)) {    const token = window.sessionStorage.getItem('token')    if (!token) {      return Promise.reject({        "code": 4002, // 我本人定义的code码，这个依据本人需要        "message": "为获取到令牌，请先登录",        "data": null      })    }    config.headers.Authorization = token  }  return config}, function(error) {  return Promise.reject(error)})http.interceptors.response.use(function(response) {  const data = response.data  if (data.code === 200) {    return data.data  } else {    message.error(data.message || data.desc)    return Promise.reject(response)  }}, function(error) {  if (error.code === 4002) {    message.error(error.message)    window.location.href = '#/login'    return Promise.reject(error)  }  return Promise.reject(error.response)})export default http

Mock Api

因为我的项目只是为学习演示，没有做真正的后盾申请，目前所有申请都是mock的数据，这里就举荐目前有用到的两个收费的在线api。目前这两个的应用这里不做具体介绍，如果后续有须要，在来对此介绍一番。

  1. RAP接口治理平台
  2. fastmock在线接口Mock平台

因为公司网络限度起因，在公司中拜访不到Rap的地址，所以示例我的项目就应用的fastmock，两个都是十分好用。

views下页面内容

因为页面中根本都是表格，内容信息介绍的展现，没有什么很特地的，这里就不在过多形容，具体的能够在代码中去查看

代码地址（如何感觉有用，记得给个赞奥。）

GitHub: https://github.com/xuRookie/react-tutorials
这是代码地址，感觉不错，您能够在地址右上方start点一下，谢谢。

小结

至此，一个根本的react后盾治理就进去了，因为是本人分割react熟练度，没有做太多的配置。我的项目中用到的货色简直都是一些后盾治理会用到的货色。所以，就练习记录下来。哪里写的有问题，欢送评论区留言。