REACT - 技术教程文章
react + antd实现动态菜单【代码】
## react+antdUI实现动态菜单，记录。 import React, { Component } from react; import { Menu } from antd; const { SubMenu } = Menu; interface Props {} type stateType = {menuList: {}[] } type itemType = {id: ,path: , // 页面跳转路劲title: , // 菜单名称icon: , // 图标show: boolean, // 是否显示该菜单children: [] // 子级菜单 }// 模拟数据 const mList = [{id: 01,path: ,title: 用户管理,icon: ,sh...
React-Router 思维导图 大纲【代码】【图】
React-Router （5.2.0）效果router类型组件 BrowerRouter使用HTML5的historyApi(pushState,replaceState,监听popstate事件)来保存页面和路由同步 属性basename:string, 路由的起点path,以 ‘/’开头，但是不能以‘/’结尾 getUserConfirmation: func, 用来确认是否进行路由切换，需要和 组件一起使用才会生效forceRefresh: bool， 是否进行整页刷新，如果为true,切换路由就会刷新页面 keyLength: number， location key的长度，...
React自学——安装【代码】【图】
作为一个全干工程师，前端技能是跑不掉的，简单查了一下目前的前端三大框架，决定入坑react，今天先从一个简单的 Ubuntu 20.04 默认通过apt安装的版本目前是10.x，而最新的LTS版本是14.x，需要通过如下命令安装 >>> curl -sL https://deb.nodesource.com/setup_14.x | sudo bash - >>> sudo apt install nodejs >>> node --version v14.16.1快速创建应用 >>> npx create-react-app my-app关于npm和npx的区别参考：https://www.jian...
React中的虚拟DOM与真实DOM【代码】【图】
React中的虚拟DOM与真实DOM 首先先展示一段代码： <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>03 虚拟DOM与真实DOM</title> </head><body><!-- 准备好一个容器 --><div id="test"></div><div id="demo"></div><!-- 引入react核心库 --><script src="../js/react.de...
reactive是如何实现深层响应的？【代码】【图】
深层响应的 reactive 看过官网文档的都知道，Vue3 的响应性分为浅层和深层，我们常用的 reactive 是深层的。 我们也都知道，reactive 是使用 proxy 来实现响应性的，那么问题来了： 既然 proxy 的拦截操作是浅层的，对于嵌套属性的操作无感，那么 reactive 是如何实现深层响应的呢？ 这个就得看看 源码了。 // reactivity.js function createGetter(isReadonly = false, shallow = false) {return function get(target, key, recei...
react做购物车的功能【代码】
父组件import React, { Component } from react import Lists from ../components/Listsexport default class Cart extends Component {// 数据 状态state = {carts: [{ id: 1, name: 苹果11, price: 10, num: 1 },{ id: 2, name: 小米10, price: 20, num: 1 },{ id: 3, name: 华为meta40, price: 30, num: 1 }]}render() {return (<div>{/* 功能组件 */}<Lists carts={this.state.carts} handlerCartNum={this.handlerCartNum.bin...
React实践报错：TypeError: date.clone is not a function， antd DatePicker报错【代码】【图】
配置 react 17.0.1 antd 4.15.0 想实现的效果 用户点击“修改个人信息”按钮，原出生日期数据回显到antd组件DatePicker中。而出生日期字段birthDate是表单上所有数据userInfo的一个属性。 报错信息报错代码 showModal = () => {const { userInfo } = this.state;this.setState({visibleInfo: true,});// 设置100毫秒的延迟 确保from组件已经加载完毕setTimeout(() => {this.infoFormRef.current.setFieldsValue(userInfo);}, 100);...
react引入antd并配置按需加载和自定义主题【代码】
下载组件库包 yarn add antd使用craco对create-react-app进行自定义配置yarn add @craco/craco根目录创建craco.config.js文件 /* craco.config.js */ module.exports = {// ... };更改package.json "scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"},实现按需打包yarn add babel-plugin-importcraco.config.js添加 babel:{ plugins: [[ "import", {"libraryNam...
react创建新项目【图】
npm install -g create-react-app 全局安装 create-react-app reactdemo 新建并对react项目进行命名（注:项目名称不能有大写） 或者 npx create-react-app reactdemo 新建并对react项目进行命名（注:项目名称不能有大写）新建项目中报错：原因：网络原因， 解决办法：//换源npm config set registry https://registry.npm.taobao.org //配置后通过以下方法验证是否成功npm config get registry再次create-react-app reactdemo 成...
React Router的Route的使用【代码】
Route 是 React Router中用于配置路由信息的组件，每当有一个组件需要根据 URL 决定是否渲染时，就需要创建一个 Route。 1) path 每个 Route 都需要定义一个 path 属性,path 属性是一个url，当 URL 匹配一个 Route 时，这个 Route 中定义的组件就会被渲染出来。 2）Route 渲染组件的方式 （1）component component 的值是一个组件，当 URL 和 Route 匹配时，Component属性定义的组件就会被渲染。例如：<Route path=/foo component=...
react 页面嵌入代码端—codemirror【代码】【图】
介绍：CodeMirror是一个代码编译器。特点：CodeMirror可以直接嵌入Web页面，提供在线代码编辑器的特性页面实现： package.json中添加相关依赖"codemirror": "^5.60.0", "react-codemirror2": "^7.2.1",引入CodeMirror组件以及js,css文件import { UnControlled as CodeMirror } from react-codemirror2; import codemirror/lib/codemirror.css; import codemirror/lib/codemirror.js;引入组件并设置属性const jsonParam= [ { name...
react-amap【代码】
react-amap 安装1、使用npm进行安装，目前是1.2.8版本： cnpm i react-amap12、直接使用sdn方式引入 <script src="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script>1react-amap 使用import React,{Component} from react import {Map,Marker} from react-amap const mapKey = 1234567809843asadasd //需要自己去高德官网上去申请 class Address extends Component { constructor (props) { super (props) th...
Vue？Vue和React深度【图】
我使用Vue和React已经很长一段时间了，两个框架上实践代码量都在10万行以上。不得不说都是都很不错的，帮助开发者减少很多工作量，某种框架是现代化Vue和React在两者之间的选择并不像选择苹果或香蕉一样简单，两者在工程实践上的差异让我们逐渐放弃了Vue。此处以不一样的角度对彼此进行深度对比。常见摇摆问题，观点首先，我重新谈谈常见对比项目，观点的看法，这些部分内容可以通过一些文章或者Vue官方对比文档查到，主要目的是帮...
react中的组件/模块, 组件化/模块化【代码】
React中的组件/模块, 组件化/模块化 1、基本概念 1.1、什么组件？1、一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等) 2、把这些局部功能组装到一起就形成了完整的一个大的功能 3、主要目的在于: 复用代码, 提高项目运行效率。1.2、什么组件化？如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。1.3、什么模块？多个组件形成模块, 或者是一个提供特定功能的js文件, 主要特点在于耦合...
OpenLayers+React+GeoServer 地图开发记录【代码】
OpenLayers+React+GeoServer 地图开发记录 引入Openlayers初始化Draw 绘制多边形Draw - 回退上一步绘制Draw - 结束绘制Draw - 清除绘制回显多边形引入Openlayers npm install ol -Simport 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from 'ol/style'; import { Draw, Snap} from 'ol/interaction'; import { Vector as VectorSource } fro...
ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State【代码】【图】
开篇呢，先给大家问个好，今天是中秋节，祝大家中秋节快乐！！虽然是中秋节，但是木有回家还是总结一下知识点写写博客吧，想着昨天总结一下的，但是昨天和几个同学小聚了一下，酒逢知己总是千杯少呢，喝的微醺不适合写东西，所以就留到今天总结了。因为这段时间在工作中陆陆续续的接触到了一些RN开发的东西，还是需要总结一下的。今天只是个开篇，接下来还会有陆陆续续的关于RN开发的总结，今天主要是环境搭建、简单的组件封装、Pr...
react系列（二）高阶组件-HOC【代码】
高阶组件简单来说，高阶组件可以看做一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。我在之前的博客《闭包和类》中提到一个观点，面向对象的好处就在于，易于理解，方便维护和复用。 其实高阶组件，也是为了更好地复用之前的组件。它可以理解为，基础组件通过包裹处理，生成一个适应某些场景的组件。 它可能存在于以下几种场景：定制props一个简单例子：function withMoreThings(WrappedComponent) { return cl...
react学习（7）——路由配置【代码】【图】
1. 新建文件routes.js，分别定义页面的路由信息和其他信息const Routes = {100: { title: "home", pageName: "home", path: "/home"}, 101: { title: "page1", pageName: "page1", path: "/page1" },102: { title: "page2", pageName: "page2", path: "/page2"},103: { title: "page3", pageName: "page3", path: "page3"} };export default Routes;2. ...
翻译 react-transition-group 之 Transition【代码】
目前本人学习到 react 动画组件库，react-transition-group 有一颗感兴趣的心，也想学学大神，翻译一下文档，所以就拿这个开刀，动手。 原文通道Transition 过渡 Transition 组件允许你使用一个简单的申明API去描述一个组件在一段时间内从一个状态过渡到另一个组件。最常见的是，它用于设置组件的挂载和卸载的过渡，但也可以用于描述组件状态本身的过渡The Transition component lets you describe a transition from one componen...
不想eject，还咋修改create-react-app的配置？【代码】
一、先抛问题 许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~ 二、为啥不建议执行eject 1. 执行eject产生了什么变化？ create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中， 执行yarn eject后，会将webpack、babel等配置暴露在config目录下，同时scripts目录下会有新的命令文件更新，pa...
前端路由原理及react-router的常用组件【代码】【图】
在react中，通常都是使用单页面应用(SPA)，即整个页面只有一个html，然后通过不同的url地址进行组件的匹配和切换。 我们看到的url地址可能会有两种形式，一种是 localhost:3000/home，一种是 localhost:3000/#/home，两种地址的区别在于有无#，有#的是根据hash来进行匹配，即url中的锚点，本质上是通过location.hash来改变href，hash后的内容是不会发送给服务器的，没有#是通过html5的history来进行跳转，两者跳转后都不会进行刷新...
vue与react的简单比较（全局状态管理）【图】
上一篇文章《vue与react的简单比较》中我们对比了vue和react的动态绑定、渲染更新、逻辑复用。本篇文章我们从使用的角度来对比两个框架在全局状态管理方面有哪些异同。之前有发过一篇文章《源码分析vuex如何维护多个组件的数据共享》讲解vuex在vue中的工作原理，本次我们用一个todoList的例子演示vuex如何在vue3中使用。示例的效果很简单，初始化的时候页面从mock接口中获取静态数据，在页面中渲染出来。也可以在输入框中输入内容，...
vue与react的简单比较【代码】
本篇文章将从动态绑定、渲染更新、逻辑复用、全局状态管理来比较vue和react的不同，从而给大家说明vue和react之间有哪些相同和不同点。 1.动态绑定：1）在vue2中，使用了object.defineproperty()来做动态绑定。但是在处理数组和对象时，只能对初始渲染时已有的属性进行动态绑定，之后用户在对数组或者对象新增属性的时候，就需要用到vue的特殊API，而且在语言运行效率方面，通过Proxy的方式来给数据做动态绑定的效率更高，所以为了...
react-native原生模块之Android模块
文档：https://reactnative.cn/docs/native-modules-android 1.简介 有时候 App 需要访问平台 API，但 React Native 可能还没有相应的模块包装；或者你需要复用一些 Java 代码，而不是用 Javascript 重新实现一遍；又或者你需要实现某些高性能的、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。 我们把 React Native 设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。 这是一个相对高级的特...
基于vite2的react脚手架【代码】【图】
vite-react-boilerplate 开发编译yarn start 启动开发 yarn build 启动编译代码质量和风格 husky/lint-staged/eslint/prettier 暂存区代码提交自动检查修复 , 可以自行扩展git hooks , e.g. commit-msg 代码提交检查等。 HMR @vitejs/plugin-react-refresh 实现react HMR 代码库（样式）按需加载 样式按需加载 (组件不存在这个问题)，默认配置了antd 和zarm组件库,对于其他组件库， 参考vite-plugin-style-import 文档plugins: [st...
react学习记录（一）【代码】【图】
前言：公司有个项目框架用的是react，所以需要学习一下相关内容，开立此贴记录一下自己的学习过程，同时也督促自己持续学习。文章目录 一、搭建开发环境：1.1、node和npm环境要求。1.2、创建项目1.3、本地启动项目1.4、打包项目一、搭建开发环境： 看了半天文档，也不知道应该怎么搭建环境，也许是vue开发习惯太深，总想找个脚手架来生成。而react里似乎没有对应的描述，只找到了几个工具链，不知道这里的工具链是否就是指的脚手架...
React-day1【代码】【图】
移动App第1天 什么是混合移动App开发【重点】 苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发苹果和安卓平台上共有的软件是如何开发出来的：腾讯招两套开发人员【开发组】，手机京东前端移动 App（Application）开发技术，去开发手机端的应用程序；前端的混合移动App开发技术，并没有使用 苹果 或 安卓 官方推荐的 开...
React-day2-webpack高级【代码】
移动App第2天 webpack的发布策略 在实际开发中，一般会有两套项目方案： 一套是开发期间的项目，包含了测试文件、测试数据、开发工具、测试工具等相关配置，有利于项目的开发和测试，但是这些文件仅用于开发，发布项目时候需要剔除；另一套是部署期间的项目，剔除了那些客户用不到的测试数据测试工具和文件，比较纯净，减少了项目发布后的体积，有利于安装和部署！ 为了满足我们的发布策略，需要新建一个配置文件，命名为webpack.p...
Angular，AngularJS 和 react
这几个单词在前端开发的时候可能会经常遇到。 因项目需要，琢磨了几天 angular，结果下来还是有点一脸懵逼。尝试进行编译下简体中文的文档也是一堆错误。 感觉最最糟糕的就是下载相关的模块，这个太令人难受了。 随手就顺便研究下了上面几个名词了。 Angular 和 AngularJS 虽然名字大部分相同，但是这 2 个东西完全不是同一种动物。 在 Angular 1 的版本的时候，我们可以认为 Angular 就是 AngularJS，一种类似 Jquery 的库。通常可...
react子给父传值【代码】
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title> </head> <body> <div id="test1"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生产环境中不建议使用 --> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script type="text/babel">...