《Node+MongoDB+React 项目实战开发》已出版
前言
从深圳回长沙已经快4个月了，除了把车开熟练了外，并没有啥成长和进步，长沙这边要么就是连续下一个月雨，要么就是连续一个月高温暴晒，上班更是没啥子意思，长沙这边的公司和深圳落差挺大的，至于幸福指数，额，我感觉除了离家近之外，并没有什么其它感觉，同样是每天除了上班就是在上下班的路上，而且人开始变 ...
react-codemirror2 代码编辑器
CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/
安装：
npm install react-codemirror2 codemirror --save
使用：
1 import 'codemirror/lib/codemirror.js';
2 import 'codemirror/lib/codemirror.css';
3 // 主题风格
4 import 'codemirror/theme/solarized.css';
5 // 设 ...
React Hook 中 useState 异步回调获取不到最新值及解决方案
预先了解 setState 的两种传参方式
1、直接传入新值 setState(options);
列如：
const [state, setState] = useState(0);
setState(state + 1);
2、传入回调函数 setState(callBack);
例如：
const [state, setState] = useState(0);
setState((prevState) => prevState + 1); // prevState 是改变之前的 state 值，return ...
React 并发功能体验-前端的并发模式已经到来。
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
React 是一个开源 JavaScript 库，开发人员使用它来创建基于 Web 和移动的应用程序，并且支持构建交互式用户界面和 UI 组件。React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Fa ...
React.forwardRef 理解
React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：
官方解释：
https://react.docschina.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components
个人代码实例 理解 ...
实现一个带有动效的 React 弹窗组件
我们在写一些 UI 组件时，若不考虑动效，就很容易实现，主要就是有无的切换（类似于 Vue 中的 v-if 属性）或者可见性的切换（类似于 Vue 中的 v-show 属性）。
1. 没有动效的弹窗
在 React 中，可以这样来实现：
interface ModalProps {
open: boolean;
onClose?: () => void;
children?: any;
}
const Modal = ({op ...
React Hooks使用避坑指南
函数组件比类组件更加方便实现业务逻辑代码的分离和组件的复用，函数组件也比类组件轻量，没有react hooks之前，函数组件是无法实现LocalState的，这导致有localstate状态的组件无法用函数组件来书写，这限制了函数组件的应用范围，而react hooks扩展了函数组件的能力。可是在使用的过程中，也要注意下面这些问题，否 ...
react-dnd 用法详解
本文详细讲解了 react-dnd 的 API 以及用法，并且附上了可供参考的 Demo，希望能够给需要的朋友提供一下帮助。
一、概念
React DnD 是一组 React 高阶组件，使用的时候只需要使用对应的 API 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式，不需要开发者自己判断拖动状态 ...
react之react-router
1.什么是react-router
react-router是第三方为react开发单页应用开发出来的一个库，只有学习了react-router之后，我们就可以使用react开发spa应用了，源码地址：
https://github.com/ReactTraining/react-router 官网地址：https://reacttraining.com/react-router/
2.什么是spa应用
spa的全称是signal page applicati ...
React Hook用法详解（6个常见hook）
1、useState：让函数式组件拥有状态
用法示例：
// 计数器
import { useState } from 'react'
const Test = () => {
const [count, setCount] = useState(0);
return (
<>
<h1>点击了{count}次</h1>
<button onClick={() => setCount(count + 1)}>+1</button>
</>
);
...
react-ant-admin后台管理系统，用于快速创建后台项目模板
TypeScript 版GitHub(国外地址) |
TypeScript 版码云(国内镜像)
JavaScript 版GitHub(国外地址) |
JavaScript 版码云(国内镜像)
此框架使用与二次开发，前端框架使用 react，UI 框架使用 ant-design，全局数据状态管理使用 redux，ajax 使用库为 axios。用于快速搭建中后台页面。欢迎各位提issue
react
react-router- ...
React---使用react脚手架搭建项目
一、 使用create-react-app创建react应用
1.1. react脚手架
xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖
可以直接运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架 ...
TypeScript在React项目中的使用总结
序言
本文会侧重于TypeScript（以下简称TS）在项目中与React的结合使用情况，而非TS的基本概念。关于TS的类型查看可以使用在线TS工具👉TypeScript游乐场
React元素相关
React元素相关的类型主要包括ReactNode、ReactElement、JSX.Element。
ReactNode。表示任意类型的React节点，这是个联合类型，包含情况众多；
ReactElem ...
前端框架之争丨除了Vue、Angular和React还有谁与之争锋
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。
原文参考：https://www.sitepoint.com/most-popular-frontend-frameworks-compared/
近些年，前端开发领域涌现出了大量框架，让人眼花缭乱，不知如何选择。今天我们将为您对比五个最流行的前端JavaScript框架，并作 ...
React中Connect原理
用法
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
作用：连接React组件与Redux Store
mapStateToProps允许我们将 store 中的数据作为 props 绑定到组件上
mapDispatchToProps将action作为props绑定到MyComp上。
mergeProps不管是stateProps还是dispatchProps，都需要和ownProps merge 之后 ...
React展示markdown文件
概述
实现方式
依赖的主要 package
前端页面
markdown 文件位置
实现效果
概述
markdown 文件虽然可以转成 html 文件再展示在浏览器中， 但多了一层转换总觉得有些麻烦，特别是对于需要频繁改动的 markdown 文件。
所以，这里探索了一种直接在 React 工程中显示 Markdown 内容的方式。 把 markdown 文件当成静态 html ...
开发 React Electron App 的第一步
在此记录一下如何用 React + Electron 开发一个最基本的桌面程序。
看似简单，其实过程中是有不少坑的，不是几句 npm install 就能搞定的。
本文以 Windows 为运行环境。
Create React App
创建 React 项目还是用最方便的 cli 工具 create-react-app:
npx create-react-app react-electron-app
Add Electron
接下来除了添 ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 《Integrate Create React app with .NET Core 5》 [1]
Camilo Reyes 演示了如何将 Create React app 与 .NET Core 集成，以生成一个移除了几个依赖项的脚手架。
Create React app 是社区中创建一个全新 React 项目的首选方式。该工具生成了基础的脚手架用于开始编写代码，并抽 ...
React Native从入门到实战--开发环境搭建
前言：
从今天起开启一门全新的课程学习，就是React Native，远在18年https://www.cnblogs.com/webor2006/p/9350428.html其实当时就已经做过开篇，然而很遗憾，这块的学习彻底给放弃了，造成三四年过去了，此技能依然完全不懂。。那为啥又突然要拣起它呢？原因是最近在学习这个系列课程时【我的博客】：
既将要学习到在And ...
ASP.NET Core 集成 React SPA 应用
AgileConfig的UI使用react重写快完成了。上次搞定了基于jwt的登录模式（AntDesign Pro + .NET Core 实现基于JWT的登录认证），但是还有点问题。现在使用react重写后，agileconfig成了个确确实实的前后端分离项目。那么其实部署的话要分2个站点部署，把前端build完的静态内容部署在一个网站，把server端也部署在一个站点。然 ...
