乐趣区

关于javascript:React-基础入门项目练习

作者：

jiezi

在

前言

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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章