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端也部署在一个站点。然 ...
react路由（标签属性、Hooks、路由跳转、传值、守卫、懒加载）总结大全
常用总结
一、基本的
1、BrowserRouter
表示一个路由的跟容器，将来所有跟路由相关的东西，都要包裹在其中
2、HashRouter
表示一个路由的跟容器，将来所有跟路由相关的东西，都要包裹在其中
3、Route
具有两种身份：
1.它是一个路由匹配规则；
2.它是一个占位符，表示将来匹配到的组件都放到这个位置 ( 类似 vue中 ...
干货满满-原来这才是hooks-React Hooks使用心得
序言
---最后有招聘信息哦～React是一个库，它不是一个框架。用于构建用户界面的Javascript库。这里大家需要认识这一点。react的核心在于它仅仅是考虑了如何将dom节点更快更好更合适的渲染到浏览器中。它本身提供的涉及框架的理念是不多的。class组件是如此，hooks组件也是如此。
ClassComponent
我们先回顾一下，这是一个r ...
React中的PropTypes详解
什么是prop-types？prop代表父组件传递过来的值，types代表类型。简单来说就是用来校验父组件传递过来值的类型
propTypes用来规范props必须满足的类型，如果验证不通过将会有warn提示。
React PropTypes的种类有
1 React.PropTypes.array // 队列
2
3 React.PropTypes.bool.isRequired // Boolean ...
从零开始使用 webpack5 搭建 react 项目
本文的示例项目源码可以点击 这里 获取
一、前言
webpack5 也已经发布一段时间了，其模块联邦、bundle 缓存等新特性值得在项目中进行使用。经过笔者在公司实际项目中的升级结果来看，其提升效果显著，热更新时间由原来的 8s 减少到了 2s，会极大的提升开发幸福感。除此之外，webpack5 也带来了更好的 tree shaking 算法， ...
React组件复用的方式
React组件复用的方式
现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行 ...
React-Router路由配置
React-Router
参考学习地址: https://reactrouter.com/web/guides/quick-start
// 5 的版本主要是针对 react Hook 做更好的支持
安装
npm install react-router-dom --save
路由的作用
单页面应用（SPA），路由跳转，切换显示视图
HashRouter与BrowserRouter区别
BrowserRouter：
原理是H5的history API，IE9及以 ...
react中React.createRef()的使用
react中React.createRef()的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script type='text/javascript' src="./react.development.js"></script>
<script type='text/javascript' src="./react-dom.development.js"></script>
<script type='text/ ...
基于Abp React前端的项目建立与运行——React框架分析
基于Abp React前端的项目建立与运行
目录基于Abp React前端的项目建立与运行1 Abp项目配置2 运行WebApi后端项目2.1 创建C3D数据库，并且将数据库对应链接字符串替换2.2 建立数据库进行数据迁移2.3 运行WebApi项目3 运行React前端项目3.1 利用yarn包安装工具3.2 运行React项目3.3 使用React客户端的意义4 React 前端项目架构 ...
React使用less
React使用less
Tags: React, 踩坑
日期: 2021/01/22
使用create-react-app脚手架搭建的react项目，会自带css和sass，但是没有less,如果在项目中需要使用less，需要进行下载并进行一些配置。
首先需要暴露Webpack配置文件,使用命令npm run eject命令释放,找到webpack.config.js文件
搜索Sass找到如下代码
// style files reg ...
react项目实现国际化i18n
本篇教程将从零开始实现一个支持多语言功能的demo
0x00 准备
1. 通过create-react-app 新建项目
npx create-react-app my-app
2. 安装i18n所需的库
npm install react-i18next i18next i18next-browser-languagedetector i18next-http-backend --save
其中，i18next-browser-languagedetector库用于添加语言切换功能，可 ...
React中的合成事件
React中的合成事件
React自己实现了一套高效的事件注册、存储、分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大程度地解决了IE等浏览器的不兼容问题。
描述
React的合成事件SyntheticEvent实际上就是React自己在内部实现的一套事件处理机制，它是浏览器的原生事件的跨浏览器包装 ...
react-dnd 拖拽排序
开始
最近刚刚做完自定义表单的组件，分享一下拖拽排序。
效果图
react-dnd使用说明
必须是这样格式的，不然会报 找不到上下文
<DndProvider backend={HTML5Backend}>
<useDrop>
<useDrag></useDrag>
</useDrop>
</DndProvider>
准备工作
官方文档
https://react-dnd.github.io/react-dnd/about
安装react ...
