登录社区云，与社区用户共同成长
邀请您加入社区
基于React框架开发的通讯录页面，结合AntDesign组件库和TailwindCSS实现。核心功能包括字母分组展示联系人、右侧字母索引导航（使用AntDesignAnchor组件）、响应式布局和美观的UI设计。技术亮点包括React组件化开发、深度定制的AntDesignAnchor组件、TailwindCSS原子化样式，以及平滑滚动和吸顶效果优化。该方案适用于各类联系人管理系统，具有高扩展性
前端安全防护实战中，主要涉及三个方面：XSS (Cross-Site Scripting) 攻击的防御、CSRF (Cross-Site Request Forgery) 攻击的防御，以及浏览器的同源策略
react useEffect中removeEventListener没生效问题解决
React是一种流行的JavaScript库，用于构建用户界面。搭建一个React项目并不难，但确保项目的结构和配置正确可以帮助你更有效地开发和维护应用程序。以下是搭建React项目的一些步骤：
解决craco启动react项目卡死在Starting the development server的问题
vue2项目npm迁移pnpm，同时兼容npm
搭建这个项目，完全是自我踩坑趟过来的，并且基于我的开发经验，让大家快速入门上手前端项目开发，并少走弯路。教程适合初学者，若有问题欢迎大佬及时提出！
这一章的目的是让我们认识一下react源码架构和各个模块。在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。react的核心可以用ui=fn(state)来表示，更详细可以用。
之所以是将 Suspense 放在最后来分析，是因为对 Suspense 的处理涉及到多个状态，这些状态在之前的步骤中或许会被修改，因此在了解其他步骤之后再来看 Suspense 或许更容易理解。从上面的描述即可以看出，Suspense 是一个加载数据的标准，lazy 只是该标准下实现的一个工具方法。beginWork - second pass，由于此时 DidCapture 存在，会将 pri
storybook 使用 （react-create-app ts篇）,只为快速得到应用
Uncaught Error: Minified React error #130; visit http://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for
React是一个用于构建用户界面的 JavaScript 库，起源于Facebook的一个内部项目Instagram，后来发现非常好用，最终于2013年被Facebook开源。React目前已经形成了一套生态，并且不仅在前端开发领域广为流行，在很多其他平台应用程序开发领域都获得了广泛使用。无论是通过CDN引入库的方式在HTML页面中使用React，还是用脚手架来搭建React项目，他们开发Reac
useState，useEffect，useRef，useSelector，useDispatch的基本使用1，关于useState的使用，使用useState()进行状态管理importReact,{useEffect,useRef,useState}from'react'functionApp(props){//setName为设置name的值的函数，useState可设置name的默认值co
react项目中Manifest: Line: 1, column: 1, Syntax error.报错解决方法原因：在创建的项目中，pubilc文件夹下有个文件是manifest.json但是在自己创建的的时候，把这个文件删除掉了。控制台就会出现报错 Manifest: Line: 1, column: 1, Syntax error.解决方法：react创建的项目中找到public文件夹中的
打包打包是一个将文件引入并合并到一个单独文件的过程，最终形成一个 “bundle”。接着在页面上引入该 bundle，整个应用即可一次性加载。代码分割随着写的应用增大，打的代码包也会增大。尤其是在整合了体积巨大的第三方库的情况下，可能后面的运行会因代码包的体积过大而导致加载时间过长。对代码包进行分割可以避免搞出大体积的代码包。 代码分割是由诸如Webpack，Rollup和 Browserify（
1.路由的使用首先安装 npm install react-router-dom --save-dev； 之后引入，引入的时候，发现跟我学习的资源上有些不同，作出了一些更新，导致会出现一些错误，下面就简单说一下今天的项目实战遇到的问题，还有一个没解决，找了很多资料，等后面解决了再来补充。遇到的一些error1.Matched leaf route at location "/Detail" doe
删除yarn.lock(rm rf yarn,lock);yarn init(弹出的一些描述根据实际需求填写即可);。yarn install;yarn start;localhost:3000
react：配置环境量PUBLIC_URL=/preffix（设置打包后资源地址前缀）配置api地址添加前缀/preffix页面路由添加前缀/preffix注意:1.为了方便修改前缀，最好项api和页面路由都在环境量中定义各自的前缀变量，存储前缀信息2.为了方便统一管理路由，定义常量存储路由列表(对于动态路由，可以使用function动态返回路由地址)nuxt:router: {base: pre
react中使用lazy函数进行路由懒加载import React, { Component,lazy,Suspense} from 'react'//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(() => import('@/pages/Login'))//2.通过<Suspe
问题描述：input框基本上是最常见的输入框了，很多时候搜索时我们会带有空格，一般会在处理数据时做字符串正则表达式的替换，这次使用高阶组件传入一个input或者textarea等获得一个失去焦点即去除首尾空格的组件~~高阶组件代码：使用代码：...
首先介绍下动态加载函数：require.ensure([], (require)=>{//.default 是为了使用被引入文件的 default输出项let A = require('./a.js').default; })或者直接：//.default 是为了使用被引入文件的 default输出项 let A = require('./a.js').default;...
案例在React.FC中实现。视图代码import Taro from "@tarojs/taro";import {View, Picker} from "@tarojs/components";import {AtList, AtListItem, AtTextarea} from "taro-ui";import React, {useEffect, useState} from "reac
问题导向react生命周期何时调用？以及应用场景？如果你都有了答案，可以忽略本文章，或去react学习地图寻找更多答案学习更多react学习地图
cnpm install @antv/x6 --save复制代码import React, { Component } from 'react'import { Graph, Node, Point } from '@antv/x6'class antv extends Component {constructor(props){super(props);}componentDidMount()
cnpm install @antv/g2 --save复制代码：import React, { Component } from 'react'import { Chart } from '@antv/g2';class Hello extends Component {constructor(props){super(props);this.state = {data: [{ name: '.
最近的项目中有国际化的需求，经过调研之后决定使用react-intl进行。特地记录一下开发中需要注意的点及踩过的坑。1.在class组件中如何使用以及ts类型的声明通常在函数组件中我们直接通过useIntl这个钩子函数来使用，但是在class组件中是没法使用钩子函数的。这个时候就需要用到react-intl提供的另外一个方法injectIntl。具体使用方法如下// 定义的props要继承reac
目录一、问题描述二、问题原因分析三、问题解决四、总结一、问题描述今天写新需求的时候，老js文件中动辄几千行，前人把好多东西都揉在一起。想着新功能就写在新的js文件中好了。于是引用了新的js文件，可是报出了如下错误二、问题原因分析隐约知道应该是引入方面或者是导出方面的问题，但是也没有准确定位到在哪里有问题最后在网上检索了下相关问题，好像也不是很沾边于是又看了看代码，很明显发现ctrl点击的时候不跳转
项目场景：电商后台管理系统，有一个功能要在web端生成发票、发货单（图片），并支持打印。客户是澳洲人，只考虑Chrome即可。解决方案：由于原型中发票的样式有一丢丢复杂，所以我们采用后端提供数据，前端编排打印模板的方案来实现。前端采用浏览器默认的打印方法window.print()//点击打印按钮handlePrint = async () => {const { data } = awai
视频播放器
Virtual DOM 及 Diff 算法1.JSX 到底是什么使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API.<div className
html写法：<div className="pack-unfold">{isShow.includes(item.chapterId)?<spanclassName='pack' onClick={() => this.isShow(item.chapterId,0)}>收起</span>:<spanclassName='unfold'onClic
、点击第一个输入框回车后，光标定位在第二个输入框中在第二个输入框内Input增加id属性在第一个输入框内Input属性内必须写onpressEnter
Strapi 是什么?Strapi 是基于 Node.js 开发的，开源，无头内容管理系统（Headless CMS)。当安装完成后，你可以在界面编写内容(文字)，上传图片。最后，你可以用API的方式去调用这些内容(以JSON形式返回)。Strapi 官网截图21云盒提供了极简单的 Strapi 部署方法，你可以在21云盒子上通过以Node环境的方式进行部署。如何部署?注册成为21云盒子会员For
笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波 。公众号：前端Sharing陆续更新前端文章。本文篇幅较长，将从编译阶段 ->路由阶段 ->渲染阶段 ->细节优化 ->状态管理 -&g
文章目录1.前言2.路由基础3.如何获取动态路由参数4. 路由传参5. 路由重要属性属性1.前言React的路由是一个独立被分割出去的库，在使用路由前需使用下面命令在项目中引入该库：cnpm install react-router-dom --save2.路由基础咋们由浅入深，先来学习最基础的路由使用。静态路由示例：index.js:import React from 'react'import
封装一个路由，以后我们再使用的时候，不用一个一个写Route那些，只需要调用自己写的方法，并且只需要改动一个文件引入需要的组件就可以了。views文件夹下新建router文件夹，里面新建RouterView.js和router.config.jsrouter.config.js配置路由需要的组件以及路径import Home from '../views/Home'import Find from
1、首先在react项目中安装下第三方包svgaplayerwebyarn add svgaplayerweb -Dornpm i svgaplayerweb -D2、存放svga资源文件source.jsexport const svga = {"sky":'sky.svga',}3、封装好的svga.js 文件import {svga} from './source.js';//svga的资源
一 介绍基于react 16.8+ ,react-router 4+ 开发的react缓存组件，可以用于缓存页面组件，类似vue的keepalive包裹vue-router的效果功能。采用react hooks全新api,支持缓存路由，手动解除缓存，增加了缓存的状态周期，监听函数等。后续版本会完善其他功能。demo缓存组件 + 监听二 快速上手下载npm install react-keepali
范围选择：先点击选择一个单元格，再按Ctrl键点击另外一个单元格，我们认为是范围选择动作。而且这2个动作必须是顺序且连续的。点击的第一个单元格，记录在SelectCell1属性当中；顺序？搞个属性，记录动作类型即可。//table.js//处理单元格选择主要是改变相关样式数据handleCellSelect = (e,i,j) => {if(e.ctrlKey){// 按下ctrl key不
import { useCallback, useEffect, MutableRefObject } from "react";type keyType = KeyboardEvent["keyCode"] | KeyboardEvent["key"];type keyFilter = keyType | Array<keyType>;type EventHandler = (eve
项目中遇到一个缓存问题，提交审批后刷新页面，数据状态未自动更改，要多刷很多次才能改过来。一开始调试发现是models层state数据未修改，手动清除state后还是未能更新。又调试发现请求接口未调用，不过以为是请求未打印的原因，或者是state状态未更新导致未发出请求，却不知道问题就在这。想着应该是react框架的diff算法问题，所以存在缓存，后面一直在改models层，致力于手动更新state
项目介绍web项目使用的是 React+Umi+Antd使用的是umi的脚手架创建项目yarn create @umijs/umi-app链接：umi官网流程1.将web项目打包成静态文件后2.在打包后的文件 再用electron打包成桌面应用（所以其实是用什么框架或者脚手架，都没有什么关系，最后electron需要的是可直接在浏览器访问的静态文件=》npm run build 以后生成的inde
react-admin-template由于现有的一些 react admin 项目都太过复杂，集成了一些我不太需要的功能，所以决定自己撸一个，全面面向 react hooks。基于 antd 的 react 后台管理项目模板，使用 typescript 开发。本项目创意来自 vue-admin-template。没有使用官方的脚手架工具，使用 webpack 打包项目。只集成了基本功能，后续其他
开篇题外话：CodePen是一个在线编辑前端代码的网站，对于前端小白来说非常好用，除了可以同时编辑html、css、js之外，可以实时的看到编写网页的样子，真的很方便。CodePen网站链接：https://codepen.io这里有一篇博文，虽然没有仔细看，但觉得还不错，可以参考看一下：codepen学习————————————————————————分割线———————————————————
关于二次npm start失败且报错的解决办法：在项目都安装完npm start启动试验过hello world这种程序可以运行后因为自定义js文件内部的一些改动，造成了页面展示报错。此时我做了一个很愚蠢的决定，我先关闭了localhost3000的页面，然后关闭了终端重点在于，我并没有停止，而是直接关闭然后我又新建终端运行npm start报错了！npm ERR! code ELIFECYCLE
开发过程中，使用http-proxy-middleware配置代理，发现请求可正常返回数据setupProxy.js请求调用：此时接口正常返回数据，注意请求路径（localhost:3000为系统访问路径）：但将程序打包部署到Nginx上时却发现无法正常访问接口，分析原因如下：开发程序时，是运行在node环境中，此时使用的是http-proxy-middleware进行代理请求，但是打包部署后并非
先赞后看！养成习惯！import React from 'react';import ReactEcharts from 'echarts-for-react';// or var ReactEcharts = require('echarts-for-react');<ReactEchartsoption={this.getOption()}notMerge={true}lazyUpdat
父组件通过props向子组件传值，子组件通过再constructor中props中获取父组件的值，如果子组件要修改父组件的值，再子组件中通过this.state={pops.list}来存下父组件的值，再通过this.setSate({})来修改state,如果需要再把值传给父组件，则通过，方法来实现：在父组件调用子组件的时候，通过prop将方法传给子组件，子组件通过调用父组件的方法来向父组件传值
环境react.js ant design pro 4.0实现效果代码import React from 'react'import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Col ,Row,Button,Form,Input,Card,Slider,Select,message} from 'antd';impor
create-react-app 构建浏览器插件项目TS版初始化项目添加less配置，并使用 less module 的样式方式由于creat react app 没有内置对 less 的支持，所以需要自己添加添加 antd 并配置样式修改 manifest.json 并添加插件使用的图标修改配置使 build 完的 index.html 没有 script 脚本友情链接初始化项目yarn cre
reactjs
——reactjs
联系我们（工作时间：8:30-22:00）
400-660-0108 kefu@csdn.net
乐奇 Rokid 开放社区
