关于javascript: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 熟练度，没有做太多的配置。我的项目中用到的货色简直都是一些后盾治理会用到的货色。所以，就练习记录下来。哪里写的有问题，欢送评论区留言。