Вводное упражнение по основам React

React.js

предисловие

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

Адрес предварительного просмотра проекта

В текущем проекте используются фиктивные данные, а номер счета можно вводить по желанию.Демонстрационный проект управления фоном React

Скриншот предварительного просмотра проекта

  1. Авторизоваться

登录2. Регистрация注册3. Главная首页

Зависимости, используемые проектом

  1. реагировать // основная библиотека
  2. antd // библиотека пользовательского интерфейса
  3. axios // запрашиваем зависимости
  4. Echarts // Графики в проекте
  5. реактивно-загружаемый // динамическая загрузка
  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+.

Улучшить структуру каталогов

Именно так я сейчас использую его для определения структуры каталогов в соответствии со своими потребностями.

项目名称
	|
	|---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,
	...
}

сохранить файл

// 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 в качестве метода запроса, и производительность хороша во всех аспектах. Во-вторых, в одностраничном приложении будет задействовано много запросов, а для рутинных операций, таких как перехват запросов, перехват ответов и унифицированная обработка ошибок, мы сэкономим много кода, дважды инкапсулируя аксиомы. нужно сказать больше о преимуществах. Мой пример относительно прост, код выглядит следующим образом:

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

Поскольку проект предназначен только для учебных демонстраций и не делает реальных фоновых запросов, все запросы в настоящее время являются фиктивными данными.Вот два бесплатных онлайн-API, которые в настоящее время полезны. В настоящее время использование этих двух здесь подробно не описано, если возникнет необходимость в будущем, я представлю это здесь.

  1. Платформа управления интерфейсом RAP
  2. онлайн-интерфейс fastmock Mock-платформа

Из-за сетевых ограничений компании адрес Rap недоступен внутри компании, поэтому в примере проекта используется fastmock, оба из которых очень просты в использовании.

Контент страницы под просмотрами

Поскольку страницы в основном представляют собой таблицы, в представлении информации о содержимом нет ничего особенного, поэтому я не буду подробно описывать его здесь, вы можете проверить его в коде для деталей.

Кодовый адрес (как найти его полезным, не забудьте дать Zhan.)

GitHub: GitHub.com/xu rookie/hot…Это кодовый адрес, я думаю, это хорошо, вы можете нажать «Пуск» в правом верхнем углу адреса, спасибо.

резюме

На данный момент появилось базовое управление фоном реакции, потому что я сам связался со своим умением реагировать и не слишком много настраивал. Вещи, используемые в проекте, — это почти все вещи, которые будут использоваться некоторыми фоновыми менеджерами. Итак, просто тренируйтесь в записи. Если есть проблема, пожалуйста, оставьте сообщение в области комментариев.

Категории