React 基础入门项目练习

7,690 阅读4分钟

前言

最近在学习React库,自己就从头开始,一步步写出一个后台管理,
从而在实际项目中来理解React的一些知识点。文章中代码比较简略,可以从github地址中查看具体项目代码。

项目预览地址

目前项目用的是mock数据,账号可以随意输入。 React 后台管理demo项目

项目预览截图

  1. 登录 登录
  2. 注册 注册
  3. 首页 首页

项目用到的依赖

  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: github.com/xuRookie/re… 这是代码地址,觉得不错,您可以在地址右上方start点一下,谢谢。

小结

至此,一个基本的react后台管理就出来了,因为是自己联系react熟练度,没有做太多的配置。项目中用到的东西几乎都是一些后台管理会用到的东西。所以,就练习记录下来。哪里写的有问题,欢迎评论区留言。