2020年08月_做你的猫miao

原创 Hook and Mobx demo

一、import React, {useState, useEffect, useCallback} from 'react'// import { CloseOutlined } from '@ant-design/icons';export default function HookFour() { const [list, setlist] = useState(['a', 'ab', 'abc', 'b', 'cn']) const [oldlist] = useState(['a', '

2020-08-06 14:17:04 278

原创 React模拟后台项目（八）添加用户页面

一、添加用户页面 src/pages/user/usersCreate/index.js// 导入库import React, {Component} from 'react'import { connect } from 'react-redux'import { withRouter } from 'react-router-dom'// 导入组件import { postUsersData } from '../store/actionCreators'// 导入样式import {

2020-08-02 21:41:32 366 2

原创 React模拟后台项目（八）附加 user仓库文件配置

一、用户页面仓库 src/pages/user/store/index.jsimport reducer from './reducer';import * as actionCreators from './actionCreators';import * as constants from './actionTypes'; export {reducer, actionCreators, constants} 二、用户页面仓库 src/pages/user/store/actionT

2020-08-02 21:37:54 185

原创 React模拟后台项目（八）user页面文件配置

一、用户页面 src/pages/user/index.js// 导入库import React, {Component} from 'react';import {connect} from 'react-redux';import { getUsersData, deleteUsersData, putUsersData,} from './store/actionCreators'import { withRouter } from 'react-router-dom'/

2020-08-02 21:34:08 350

原创 React模拟后台项目（七）Login页面文件配置

一、登录 src/page/login/index.js// 导入库// 导入Reactimport React, { Component } from 'react'import {connect} from 'react-redux'import {Redirect} from 'react-router-dom'import { loginAction} from './store/actionCreators'// 导入样式// 导入styled import {

2020-08-02 21:29:36 1149

原创 React模拟后台项目（六）components文件配置

一、错误处理 components/err/404.jsimport React, { Component } from 'react' class Err404 extends Component { render() { return ( <div> this is Err404 index </div> ) }}export default

2020-08-02 21:24:00 299

原创 React模拟后台项目（五）接口文件配置（ajax）

一、请求封装 src/api/request.jsimport axios from 'axios'// 判断当前的运行环境// isDev 为真开发环境 --- npm run serve// isDev 为假非开发环境（测试环境，生产环境）- npm run buildconst isDev = process.env.NODE_ENV === 'development'const request = axios.create({// 根据环境设置不同的baseURL// ba

2020-08-02 21:17:05 709

原创 React模拟后台项目（四）路由文件配置

一、路由封装 src/router/privateRoute.js// 导入react全家桶import React from 'react'import { Route, Redirect } from 'react-router-dom'// 手册：https://reacttraining.com/react-router/web/example/auth-workflow // 自定义私有路由高阶组件const PrivateRoute = ({component: Compone

2020-08-02 21:07:30 530

原创 React模拟后台项目（三）修改全局样式文件配置

一、统一全局样式文件 src/static/reset.jsimport {createGlobalStyle} from 'styled-components';export const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, b

2020-08-02 21:00:19 900

原创 React模拟后台项目（二）公共Store文件配置

一、导出公共仓库 src/store/index.js// 导入模块import thunk from 'redux-thunk'import { createStore, applyMiddleware } from 'redux'import { composeWithDevTools } from 'redux-devtools-extension'// 导入reducerimport reducers from './reducers'// 创建仓库const store = c

2020-08-02 20:55:33 443

原创 React模拟后台项目（一）入口文件配置

一、入口index文件 src/index.js// 导入库import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import {Provider} from 'react-redux';import { ConfigProvider } f

2020-08-02 20:50:56 1481

weixin_46030044的博客