React：React Testing Library（RTL）教程
> 原文链接：https://www.robinwieruch.de/react-testing-library
第一次翻译文章，可能会难以阅读，建议英文过关的都阅读原文
Kent C. Dodds的 React Testing Library (RTL) 是Airbnb的 Enzyme 的替代品。Enzyme 为测试 React 组件提供了很多实用的工具，而 React Testing Library（简称RTL）则是后退一步并提出疑问： ...
React + Sass
Sass很多公司面试都喜欢问这个，今天就写一篇简单的sass安装+使用过程技术栈很简单，就React + Sass，本文着重讨论sass不整太多东西
创建项目：create-react-app react-sass
安装依赖：npm install --save-dev node-sass
create-react-app 创建的react项目默认就是支持Sass的，
使用只要安装node-sass即可使用 ...
「译」Blazor VS React / Angular / Vue.js
原文作者: Christian Findlay
原文链接： https://christianfindlay.com/2020/06/04/blazor-vs-react-angular-vue-js/
Blazor是一项新的Microsoft技术，允许开发人员使用C＃为浏览器编写代码, 本文将Blazor与其他三个常见SPA框架进行了比较：React，Angular和Vue.js, JavaScript是当前基于浏览器的单页应用程序（SPA）最 ...
React函数式组件值之useEffect()
Effect Hook 可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找 dom。
可以这样说，在使用了useState或是useEffect这样的hooks之后，每次组件在render的时候都生成了一份本次render的state、function、effects，这些与之前或是之后的ren ...
React函数式组件值之useState()
react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react 特性，而不仅限于 class 组件。react hooks 的出现，标示着 react 中不会在存在无状态组件了，只有类组件和函数组件。
状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。相比类组件，函 ...
create-react-app 基于ts项目，使用react-router-dom搭建项目
准备工作
来个react项目 create-react-app 基于TS的项目
ts项目安装后 删除node_modules，重新 yarn install， 不然jsx会报错
安装React-router-dom
yarn add react-router-dom
npm install --save react-router-dom
npm i --save-dev @types/react-router-dom
React-router-dom + React-router 功能对比
React-route ...
react增删改查
react增删改查
import React, { Component } from 'react'
import axios from 'axios'
export default class List extends Component {
constructor() {
super()
this.state = {
list: [],
username: "",
age: ""
}
}
componentDidMount() {
...
React高阶组件中使用React.forwardRef的技巧
之前使用react.forwardRef始终无法应用于react高阶组件中，最近终于捣鼓出来了，于是记录下来。关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。
一、React.forwardRef使用示例
下面就是应用到React组件的错误示例：
const A=React.forwardRef((props,ref)=><B {...props} ref ...
react-redux 的使用
前言
最近在学 react，看到 react-redux 这里，刚开始觉得一脸懵逼，后面通过查阅相关资料和一些对源码的解释，总算有点头绪，今天在这里总结下。
类似于 vue，React 中组件之间的状态管理 第三方包为：react-redux。react-redux 其实是 Redux的官方React绑定库，它能够使你的React组件 ...
react-leaflet：将React和Leaflet结合起来
https://react-leaflet.js.org/
React Leaflet provides bindings between React and Leaflet. It does not replace Leaflet, but leverages it to abstract Leaflet layers as React components. As such, it can behave differently from how other React components work, notably:
React-Leaflet提供React和Leafl ...
react antDesign hook 大数据表格虚拟滚动
业务使用
// 使用虚拟列表
const virtualComponents = useVirtualTable({
height: 350 // 设置可视高度
})
const components = useMemo(() => {
return {
body: {
wrapper: virtualComponents.body.wrapper
},
table: virtualComponents.table
}
}, [ virtualComponents] ...
使用create-react-app搭建TypeScript+React+Ant Design开发环境
一、使用create-react-app创建一个支持TypeScript+React的开发环境：
要创建一个支持TypeScript的Create React App项目，可以运行：
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
要将TypeScript添加到已有的Create React App项目，请先安装它：
npm ...
基于React.js网页版弹窗|react pc端自定义对话框组件RLayer
基于React.js实现PC桌面端自定义弹窗组件RLayer。
前几天有分享一个Vue网页版弹框组件，今天分享一个最新开发的React PC桌面端自定义对话框组件。
RLayer 一款基于react.js开发的PC端自定义Layer弹出框组件。支持超过30+参数自由配置，通过轻巧的布局设计、极简的调用方式来解决复杂的弹出层功能，为您呈上不一样的弹窗效果 ...
react-router-dom基本使用+3种传参方式
//App.js
import {
BrowserRouter as Router,
Route,
Link,
} from "react-router-dom";
// 引入组件
import Home from "....";
import News from "...."
function App() {
return (
<Router>
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Route exact path="/" component={Hom ...
手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件
DevUI是一支兼具设计视角和工程视角的团队，服务于华为云DevCloud平台和华为内部数个中后台系统，服务于设计师和前端工程师。官方网站：devui.designNg组件库：ng-devui（欢迎Star）
引言
“他在正午、黄昏，在一天里的许多时刻去感受它、记录它，结果也就让我们看到了那么多的不同。他描绘它的角度没 ...
图解React SSR中的hydrate
React CSR：水车模型
当初在理解 React CSR 时做过一个比喻，把单向数据流比作瀑布模型：
瀑布模型：由props（水管）和state（水源）把组件组织起来，组件间数据流向类似于瀑布。数据流向总是从祖先到子孙（从根到叶子），不会逆流
（摘自深入 React）
单组件的微观视角下，我们把props理解为水管（数据通道），接收外部 ...
React Native之原理浅析
一、JavaScriptCore
讲react Native之前，了解JavaScriptCore会有帮助，也是必要的。react Native的核心驱动力就来自于js Engine. 你写的所有js和JSX代码都会被JS Engine来执行, 没有JS Engine的参与，你是无法享受ReactJS给原生应用开发带来的便利的。在iOS上，默认的就是JavaScriptCore， iOS 7之后的设备 ...
React Native 使用 react-native-webview 渲染 HTML
在 App 中，渲染 html 是一个非常常见的功能，有可能是直接渲染 html 字符串或者是通过 URL 渲染远程 HTML页面。react Native 提供了一个 WebView 组件以供我们实现 HTML 的渲染。
早先 WebView 是在 react Native 核心包中，后来为了减小 React Native 核心包的体积，便将其单独提出到 ...
使用react 实现拖拽功能
一、关于拖动
图片默认可以拖动，其他元素的拖动效果同图片。正常的 div 是不能被拖动的，鼠标点击选择后移动没有效果，需要加 draggable="true" 使得元素可以被拖动。
二、拖拽相关的几个事件
被拖拽元素的事件：ondragstart，ondragend
放置元素的事件：ondragenter、ondragover、ondragleave、ondrop&nb ...
React教程(二) : TypeScript
使用--typescript参数新建React项目
create-react-app react-ts-demo --template typescript
新建Header.tsx文件，加入以下代码：
import React, { FC } from 'react';
interface MyProps {
Name: string,
ID: number
}
export const Header:FC<MyProps> = props => {
return(
<>
`${pro ...
