React 基础入门项目练习

前言

最近在学习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.6
npx 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 = http

ReactDOM.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熟练度，没有做太多的配置。项目中用到的东西几乎都是一些后台管理会用到的东西。所以，就练习记录下来。哪里写的有问题，欢迎评论区留言。