![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 78
做你的猫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 · 266 阅读 · 0 评论 -
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 · 336 阅读 · 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 · 174 阅读 · 0 评论 -
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 · 325 阅读 · 0 评论 -
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 · 1122 阅读 · 0 评论 -
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 · 281 阅读 · 0 评论 -
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 · 644 阅读 · 0 评论 -
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 · 524 阅读 · 0 评论 -
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 · 872 阅读 · 0 评论 -
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 · 1472 阅读 · 0 评论 -
前端路由封装 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: Component, ...props})原创 2020-06-10 15:26:45 · 335 阅读 · 0 评论 -
前端异步请求封装 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// baseURL: 'htt原创 2020-06-10 15:22:52 · 391 阅读 · 0 评论 -
react 使用screenfull插件 实现全屏特效
一、安装yarn add screenfull二、导入import screenfull from 'screenfull'三、定义方法fullScreen = () => { screenfull.toggle()}四、调用<ButtononClick = {this.fullScreen}>全屏</Button>...原创 2020-04-30 08:35:21 · 2704 阅读 · 1 评论 -
React项目框架初始化操作(建框架,UI,样式,路由)及错误lessOptions?, prependData?, appendData?, sourceMap?解决
一、创建框架 CRA命令: npx create-react-app item注释: npx不可用的可使用cnpm创建二、安装基本插件yarn add react redux react-redux redux-devtools-extension immutable react-immutable react-router-dom三、选择UI框架(此处以Antd UI 为例)框架...原创 2020-04-30 08:31:23 · 793 阅读 · 0 评论 -
React和VUE项目推荐目录结构
一、React项目推荐目录结构src目录api 接口目录components 公共组件(或common)pages 组件目录 orders 订单目录 components(相关组件) store (仓库) index.js (默认组件) style.js (默认样式 import styled from 'styled-compon...原创 2020-04-30 08:16:14 · 688 阅读 · 0 评论