随笔分类 - React
在 React 项目中配置路径别名
摘要：1. 使用 craco 库 下载： npm i @craco/craco --save craco的GitHub地址 2. 创建文件 创建名为craco.config.js的文件在项目根路径上，和package.json同一级。 my-app ├── node_modules ├── craco.c
React Hooks 的基本使用
摘要：一、基础 Hook 1. useState 函数式组件获得状态state的方式。 useState 返回一个数组，useState( "参数" ) ，参数即为初始化的值。 可以为 数组、对象、字符串、数字 import React, { useState } from 'react' const [
Redux的使用和在 React 中使用 redux
摘要：React Redux 一、Redux # 下载 redux npm i redux 1. redux的简单使用： const redux = require("redux"); // 初始化 state const initState = { count: 0 } // reducer，纯函数 f
【React】设置 react 支持 less 预编译和 Antd 按需加载
摘要：1. 安装 npm i @craco/craco npm i craco-less #less处理插件 npm i babel-plugin-import #自动导入antd的css样式 2. 配置 在根目录创建craco.config.js 文件 配置： const CracoLessPlugin
在使用React或Vue中，解决多级路由路径刷新页面，样式丢失的问题
摘要：前提： 路由使用 BrowserRouter 模式 在 index.html 中引入了样式 1. 修改路径1 public/index.html 中引入样式时不写./写 /（常用) 2. 修改路径2 在 React 中 public/index.html 中引入样式时不写 / 写 %PUBLIC_U
Error: A is only ever to be used as the child of element, never rendereddirectly.Please wrap your in a .
摘要：原因： React路由版本问题，你可以查看自己的package.json文件，查看react-router-dom的版本，应该是 6 版本。 在 React-Router v6版本中，Route更改了使用方式。 使用 Route 需要在 Routes 标签包裹下： import { BrowserR
React中处理跨域问题
摘要：1. 跨域 跨域问题是前台浏览器造成的，同源策略。两个 URL 的“协议/主机（域名）/端口元组”一致，即同源。 React App在本机 3000 端口上运行 2. 解决办法： 1. cors : 后台服务器端解决 //以Node服务器举例 const express = require("exp
React 中 redux 的配置和使用
摘要：1. 下载依赖 npm i -S redux npm i -S react-redux npm i -S redux-devtools-extension 2. 创建文件 在src文件夹下创建redux文件夹 创建文件夹及文件 store文件夹和其下的index.js actions文件夹(存放操作
在React中配置，支持Less
摘要：1.创建项目 通过脚手架搭建的环境中，默认支持的是CSS和Sass/Scss，需要自己配置Less #通过React脚手架创建项目 npx create-react-app ‘项目名’ 2. 执行命令 # 创建完项目直接执行命令 npm run eject **注意：**如果我们修改了文件，npm
React项目启动时，报错createProxyMiddleware is not a function
摘要：报错如图： 原因： 使用代理中间件的原因。 新版本引用http-proxy-middleware形式改变了，以前是这样： const proxy = require("http-proxy-middleware") 或者这样 const { createProxyMiddleware } = req
配置craco，完成Antd按需导入组件样式和对less支持
摘要：使用@craco配置Antd Ant Design官网中高级设置提到使用craco进行高级设置。但没有给出具体用法，官网如下： 以下是我结合craco的GitHub官方网站，总结下来的使用方法： 1. 使用插件（简单） 1.1 安装依赖 #版本限制 npm i @craco/craco@5.5.0
