react
文章平均质量分 55
船长在船上
CSDN前端领域博客专家,CSDN前端领域优质创作者,资深前端开发工程师,专注web前端领域开发,在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。
展开
-
react Ant Design 实现menu导航菜单
效果图:代码实现:import React, { useEffect, useState } from 'react'import { Menu } from 'antd';import {useNavigate, useLocation} from 'react-router-dom'// import { ReadOutlined, EditOutlined, DatabaseOutlined ,MailOutlined,AppstoreOutlined} from '@ant...原创 2022-04-02 11:48:50 · 4550 阅读 · 1 评论 -
react报错‘react-scripts‘ 不是内部或外部命令,也不是可运行的程序
报错:解决方法:yarn add react-scripts或者npm install react-scripts原创 2022-03-31 13:42:32 · 5508 阅读 · 0 评论 -
react安装报错ReactDOM.render is no longer supported in React 18. Use createRoot instead.
查看文件package.json中react、react-domz最新安装的版本发现问题所在:react-dom.development.js: 86警告:ReactDOM。React 18不再支持渲染"react": "18.0.0","react-dom": "18.0.0",解决办法:降低版本到17.0.2安装:yarn add react@17.0.2 react-dom@17.0.2 --savenpm installreact@17.0.2 react-dom@..原创 2022-03-30 17:29:17 · 5207 阅读 · 3 评论 -
react 报错Assign arrow function to a variable before exporting as module default
警告代码:const defaultState = { mykey: 1}export default (state=defaultState, action) => { let newState = JSON.parse(JSON.stringify(state)) switch(action.type){ case "addKeyFn": newState.mykey++; break; default:原创 2022-03-30 16:41:45 · 1170 阅读 · 0 评论 -
react配置px2rem(react-create-app的基础上)
安装:npm i lib-flexible postcss-px2rem-exclude --s在webpack.config.js:const px2rem = require('postcss-px2rem-exclude');找到postcss-loader:{ loader: require.resolve('postcss-loader'), options: { ident: 'postcss', plugins: () =>原创 2020-08-24 10:47:00 · 1747 阅读 · 0 评论 -
React面试题(二)
React 路由是一个构建在 React 之上的强大的路由库,它有助于向应用程序添加新的屏幕和流。这使 URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为,并用于开发单页 Web 应用。React 路由有一个简单的 API。......原创 2022-08-28 07:00:00 · 810 阅读 · 1 评论 -
React面试题(一)
它 JSX 是 JavaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能例子render() {return()}Props 是 React 中属性的简写。它们是只读组件,必须保持纯,即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。......原创 2022-08-27 07:00:00 · 293 阅读 · 1 评论 -
react项目优化配置
通过 craco 来修改 webpack 配置,从而实现 CDN 优化craco.config.js原创 2022-06-12 07:00:00 · 615 阅读 · 2 评论 -
react打包体积分析
安装分析打包体积的包:yarn add source-map-explorer原创 2022-06-12 07:00:00 · 970 阅读 · 0 评论 -
react 富文本编辑器react-quill
安装富文本编辑器:yarn add react-quill原创 2022-06-12 07:00:00 · 3764 阅读 · 0 评论 -
react基于mobx封装管理用户登录的store
基于mobx封装管理用户登录的store原创 2022-06-12 07:45:00 · 245 阅读 · 0 评论 -
使用axios封装http工具模块
封装axios,简化操作实现步骤代码实现原创 2022-06-12 07:00:00 · 404 阅读 · 0 评论 -
react ant-desian实现表单校验
为 Form 组件添加validateTrigger属性,指定校验触发时机的集合原创 2022-06-11 10:53:28 · 1604 阅读 · 0 评论 -
React系列之配置基础路由
配置登录页面的路由并显示到页面中:实现步骤代码实现原创 2022-06-11 10:44:26 · 480 阅读 · 0 评论 -
React系列之使用create-react-app快速搭建react项目
实现步骤使用create-react-app生成项目 进入根目录 启动项目 调整项目目录结构保留核心代码原创 2022-06-11 10:14:19 · 366 阅读 · 0 评论 -
React系列之Hooks进阶理解
使用场景参数只会在组件的初始渲染中起作用,后续渲染时会被忽略。如果初始 state 需要通过计算才能获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调原创 2022-06-08 10:26:01 · 257 阅读 · 0 评论 -
React系列之useEffect概念理解
对于 React 组件来说,主作用就是根据数据(state/props)渲染 UI,除此之外都是副作用(比如,手动修改 DOM)常见的副作用useEffect函数的作用就是为react函数组件提供副作用处理的!原创 2022-06-08 10:07:13 · 1783 阅读 · 0 评论 -
运行ant-design-pro报错ERROR in ./node_modules/swagger-ui-react/swagger-ui.js 2:107055-107070Module not
重新安装yarn add swagger-ui-react --save原创 2022-06-08 09:46:21 · 1941 阅读 · 6 评论 -
React系列之useState
只能出现在函数组件中;不能嵌套在if/for/其它函数中(react按照hooks的调用顺序识别每一个hook)原创 2022-06-09 07:00:00 · 1713 阅读 · 0 评论 -
React系列之Hooks基础
有了hooks之后,为了兼容老版本,class类组件并没有被移除,俩者都可以使用原创 2022-06-08 07:00:00 · 174 阅读 · 0 评论 -
React系列之生命周期
组件的生命周期是指组件从被创建到挂载到页面中运行起来,再到组件不用时卸载的过程,注意,只有类组件才有生命周期(类组件 实例化 函数组件 不需要实例化)原创 2022-06-07 14:35:18 · 97 阅读 · 0 评论 -
React系列之表单处理(受控表单组件、非受控表单组件)
React组件的状态的地方是在state中,input表单元素也有自己的状态是在value中,React将state与表单元素的值(value)绑定到一起,由state的值来控制表单元素的值,从而保证单一数据源特性原创 2022-06-06 22:44:13 · 392 阅读 · 0 评论 -
React系列之JSX基础
优势:注意:JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的 @babel/plugin-transform-react-jsx 包,用来解析该语法 能够在JSX中使用表达式语法原创 2022-06-06 09:20:47 · 374 阅读 · 0 评论 -
react系列之组件状态
说明:能够为组件添加状态和修改状态的值;在react hook出来之前,函数式组件是没有自己的状态的原创 2022-06-05 19:31:59 · 324 阅读 · 0 评论 -
react系列之事件绑定
说明:能够独立绑定任何事件并能获取到事件对象e语法on + 事件名称 = { 事件处理程序 } ,比如:注意点react事件采用驼峰命名法,比如:onMouseEnter、onFocus示例通过事件处理程序的参数获取事件对象e.........原创 2022-06-05 19:20:21 · 650 阅读 · 0 评论 -
React学习总结之第六章redux
redux是一个专门用于做状态管理的JS库(不是react插件库)原创 2022-05-29 07:00:00 · 152 阅读 · 0 评论 -
React学习总结之第五章React路由(一)
第五章React路由5.1. 相关理解5.1.1. SPA的理解单页Web应用(single page web application,SPA)。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面,只会做页面的局部更新。 数据都需要通过ajax请求获取, 并在前端异步展现。5.1.2. 路由的理解什么是路由? 一个路由就是一个映射关系(key:value) key为路径, value可能是function或component 路由分类 后端路由: 理解:原创 2022-05-28 07:42:46 · 131 阅读 · 0 评论 -
React学习总结之第四章React ajax
第四章React ajax4.1. 理解4.1.1. 前置说明React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装)4.1.2. 常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用 封装XmlHttpRequest对象的ajax promise风格 可以用在浏览器端和node服务器端 .原创 2022-05-28 07:38:09 · 153 阅读 · 0 评论 -
React学习总结之第三章React应用(基于React脚手架)
使用create-react-app创建react应用原创 2022-05-28 07:28:13 · 150 阅读 · 0 评论 -
React学习总结之第二章React面向组件编程
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件,React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用原创 2022-05-22 18:46:13 · 231 阅读 · 1 评论 -
React学习总结之第一章React入门
虚拟DOM对象最终都会被React转换为真实的DOM,我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。原创 2022-05-22 18:19:56 · 146 阅读 · 1 评论 -
react解包并配置Less解包config文件目录
1、解包并配置Less在项目根目录运行解包命令:git init git add .git commit -m '解包前'yarn eject //或者 npm run eject解包之后,项目根目录会出现config文件目录,找到webpack.config.js,搜索sassModuleRegex后,在下方添加:{ test:/\.less$/, use:getStyleLoaders( 'less-loader' )}...原创 2022-03-31 14:07:42 · 915 阅读 · 0 评论 -
react解包配置config文件
在项目根目录中先做git提交,否则无法解包。(为了方便随时做版本回滚)git initgit add .git commit -m '解包前'yarn eject //我这里用的yarn,也可用npm run eject解包之后,项目中会出现config目录,可配置自己需要的。当运行yarn eject可能会报错,参考文章:react报错‘react-scripts‘ 不是内部或外部命令,也不是可运行的程序_船长在船上的博客-CSDN博客报错:解决方法:yarn add reac原创 2022-03-31 13:50:04 · 1507 阅读 · 0 评论 -
react Ant Design使用a标签href属性警告解决方法
return ( <header> <img src={logoImg} alt="" className="logo" /> <div className="right"> <Dropdown overlay={menu}> <a className="ant-dropdown-link" onClick={e =&.原创 2022-03-30 17:18:53 · 867 阅读 · 0 评论 -
react报错export ‘Switch‘ (imported as ‘Switch‘) was not found in ‘react-router-dom‘
react-router-dom从V5升级到V6后改变:(1) Switch 重命名为 Routes(2) Route 的新特性变更 ,component/render被element替代(3) 嵌套路由变得更简单原创 2022-03-30 14:05:15 · 1854 阅读 · 0 评论 -
vs code编写react代码 jsx中html标签Tab键自动补全
找到设置项进入设置界面在设置界面搜索includeLanguages打开settings.json文件:添加代码如下:"emmet.includeLanguages": { "javascript": "javascriptreact"}T重启后即可生效原创 2020-06-10 16:49:54 · 955 阅读 · 0 评论 -
react 解决重命名生命周期componentWillMount
解决方式:componentWillMount重命名为:UNSAFE_componentWillMount原创 2020-06-06 17:33:24 · 3972 阅读 · 0 评论 -
浏览器对ES6新语法支持兼容处理
安装使用:npm install --save-dev babel-polyfillbabel-polyfill用正确的姿势安装之后,引用方式有三种:1.require("babel-polyfill");2.import"babel-polyfill";3.module.exports={ entry:["babel-polyfill","./app/js"]};注:第三种方法适用于使用webpack构建的项目,加入到webpack配置文件(webpack....原创 2020-06-03 10:05:06 · 701 阅读 · 0 评论 -
babel-plugin-import配置babel按需引入antd模块
安装yarn add babel-plugin-import运行 npm run eject打开package.json文件 "babel": { "presets": [ "react-app" ]}添加配置:"babel":{"presets":["react-app"],"plugins":[["import",{...原创 2020-06-03 09:57:21 · 1981 阅读 · 0 评论 -
安装react初始化项目报错 :无法加载文件 C:UsersAdministratorAppDataRoaming pmcreate-react-app.ps1,因为在此系统上禁止运行
创建react项目时报了这个错误不想把项目放在C盘,所以我是放在别的盘的。就在你想放的盘里建好文件夹,然后shift+鼠标右键 >>> 在此处打开Powershell窗口,然后输入命令行就行啦。错误提示如下:解决方法如下:1、搜索框输入:Windos PowerShell 并且以右键管理员身份运行2、打开了命令行之后,输入set-ExecutionPolicy RemoteSigned,并且把权限改权限为A,然后通过 get-ExecutionPolic..原创 2020-06-02 16:30:13 · 2284 阅读 · 0 评论