【Webpack2.X笔记】 配合react项目进行配置
前言：本文是自己在工作中使用webpack进行react开发项目构建的一些经验总结，做以记录防范后续踩坑。如果您还没有webpack相关基础，请先移步 入门Webpack，看这篇就够了 进行基础学习。webpack配置文件：一般项目中webpack配置文件分为以下两个：webpack.config....
react-create-app新版配置webpack.config.js
react-create-app新版配置webpack.config.js1.安装less-loader和less， npm install less-loader less2.暴露webpack ，npm run eject （如果问是否要暴露，输入y）3.在编译器的项目文件夹中会多出来confi...
React + 项目(从基础到实战) -- 第三期
react内置hooks useState 如何让页面动起来(实时更新) import React,{FC,useState} from "react"; const Demo:FC=()=>{ let count=0; //普通js变量无法触发组件更新 functio...
使用两种方式创建react项目
一、开发环境 系统：win10 开发工具：IDEA node v11 二、创建react项目myapp第一种方式：通过命令行的方式创建react项目1. 新建一个文件夹，并用cmd/cmder/IDEA打开该文件夹。2. 切换到该文件夹下，并执行cnpm i -g create-r...
React Native 集成友盟推送(android)
react native 友盟推送集成其实很简单首先使用的react native版本为0.51.0 （项目的版本是这个所以。。。）这里记录一下个人的集成过程官方文档链接：https://developer.umeng.com/docs/66632/detail/985851、到友盟官方平台注册账号...
iOS 在react-native中嵌入原生悬浮框
本文中使用IOS原生悬浮框：https://github.com/shanghaiMichael/DYYFloatWindow 。1.直接按照RN官网原生模块操作方式添加就可以，原生中开发接口:2.RN中调用：3.添加成功但是出现问题（由于不能上传录制的视频，文字说明）：浮框拖动的时候会在屏幕2个不...
react中使用高德地图进行定位
需求：1）点击【搜索地图】后，会根据填写的内容进行搜索，地图定位中显示搜索结果并跳转到对应区域2）地图定位中可任意点选位置，并将该位置的经纬度保存到该门店中结果：只实现了第一条的需求完成条件环境：使用react.js Ant.design的框架步骤：1）注册成为高德地图的开发者，申请key2）在项目...
【React】React.Children.only expected to receive a single React element child
背景：React 项目使用Ant Design + Storybook时发报：Uncaught Error: React.Children.only expected to receive a single React element child问题点：异常代码：<Dropdown over...
react+antd表格实现多列复选框和单选框
实现效果图为了快速为大家解决问题，直接上代码：这种写法对数据格式有严格要求，可以让后台把顺序给你排好,这个数据是表格的title：let list = [ {name:'经营'}, {name:'智能'}, {name:'云计'}, {name:'电子商务'}, {name:'物流'}, {name...
reactnative 重置路由react-navigation 2.0版的方法
写在前面：react-navigation已经从1.0更新至2.0了，所谓是很快速啊。1.下载并导入这个插件：2.在你想调用的地方开启路由重置功能，（这里我触发点击事件）routeName：是你导航进入的根页面的名字。index：0代表根页面的索引号。3. 到这里就完成了。4. 如果你想重置成一个以...
React中的“双向绑定”
概述React并不是一个MVVM框架，其实它连一个框架都算不上，它只是一个库，但是react生态系统中的flux却是一个MVVM框架，所以我研究了一下flux官方实现中的“双向绑定”，并记录下来供以后开发时参考，相信对其他人也有用。参考资料：如何监听 js 中变量的变化?Flux For Begin...
react快速入门教程
react快速入门教程 React是一个用于构建用户界面的JavaScript库。它由Facebook开发，并且已经成为前端开发中最受欢迎的工具之一。本快速入门教程将介绍React的基础知识和常用概念，帮助你开始使用React构建交互式的Web应用程序。 1. React的创建和嵌套组件 Re...
react-router 返回顶部的两种方式
当我们使用react-router给项目带来便利的同时，也会遇到各种不顺的问题，比如当我们从A页面进入B页面的时候，由于共享了同一个history，导致浏览的位置也被记录下来的，这样A页面滑动到底部了，进入B页面也在底部，也显然不符合我们的浏览习惯。还好react-router提供相应的事件配置我们...
react嵌套路由以及exact属性用法
序言关于react的路由，与结合vue-router对比，实际上配置更复杂，虽然有各种轻量级框架对react-router进行封装，单还需了解基本原理，废话不多说，上代码路由我这里采用es6的写法，与官文相比，使用有状态的react组件实现嵌套路由,首先搭建好环境，我这里利用create-react...
react 路由导航选中高亮显示，切换页面高亮跟随
在react开发中，路由是react中最强大的功能，我们在做一些导航切换内容的时候，页面不会刷新，但是有的人就会问，我们在切换页面时如何选中高亮显示，在切换浏览器左上角的上一级于下一级的按钮时怎么让高亮显示的颜色跟随对应所显示的内容呢，下面将是你想要的效果。定义一个状态current，给他一个初始值...
【React】根据条件渲染不同的组件内容
需求如下：但我点击不同的按钮时，下面渲染的是不同组件的内容（wokao这个图片大小咋调，每回都贼大）第一步：先写好不同组件的内容第二步：在state状态里面加一个Type进行记录。第三步：核心代码如下好了，说白了就是通过改变type的值来改变显示的状态。应该是小学生写法了…给小白们参考一下吧最近要用...
React 18中hook函数详解之useRef
在上一篇文章《React 18中hook函数详解之useState和useEffect》介绍了react v16.8版本以后，引入的Hooks函数的一些概念，以及useState和useEffect的一些用法。本文将接着上一篇文章着重介绍Hook函数当中常用的另一个函数：useRef。 useRef...
react+vite+antD+reduce+echarts项目完整记录
react+vite+antD+reduce+echarts项目完整记录 之前写前端项目，都是用的vue，从最开始的vue2到后来的vue3，断断续续写了3年，打包工具也从webpack转到了vite，全局数据管理工具从vuex转到了pinia。总体而言，vue3对比vue2，有非常明显的提升，vi...
react 管理系统（一二级路由和antd的应用以及echarts）
1.一二级路由 1）.入口index.js 为一级路由（其中包括主页面和404页面）2），App.js中 为二级路由（主页面里点击路由跳转不同界面）3 ）路由4）， 主页面布局 admin,js 主要是从antd (ui库)里找代码 （要先引入） 5）注意：其中渲染的二级路由页面内容为{...
Vue 与 React 的区别-框架与库的区别
在软件开发中，“框架”和“库”的概念有所不同： 库（Library）：提供了一组工具或函数，开发者在应用中调用这些工具来完成特定的任务。库更多地被视为一组功能的集合，开发者在调用库时拥有主导权。框架（Framework）：提供了一整套解决方案，对应用的结构和行为有一定的约束。在使用框架时，通常是框...