React
关注
分享
扫一扫
文章平均质量分 77
React
神奇洋葱头
学习知识是进步的阶梯.
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
umi创建reactjs项目
文章目录1. 通过Idea创建静态web项目1.1.通过idea进入项目根目录的cmd窗口1.2. tyarn init -y 初始化项目,生成package.json文件1.3. tyarn add umi --dev 项目中添加umi依赖1.4 umi dev 启动服务1.5 tyarn add umi-plugin-react --dev1.6 构建和部署umi build 构建2. 编写 HelloWorld 程序2.1 创建全局配置文件 config/config.js2.2 umi 约定的目原创 2021-06-03 11:49:44 · 727 阅读 · 0 评论 -
umi安装教程和报错解决方案
文章目录安装nodejs安装yarn 和 tyarn安装 umi安装nodejs参考 https://blog.youkuaiyun.com/qq28129019/article/details/117411410安装yarn 和 tyarn安装 yarnnpm install yarn -g安装 tyarnnpm i yarn tyarn -g查看 tyarn 版本tyarn -v安装 umityarn global add umi测试 umi 是否安装成功umi原创 2021-06-02 17:25:51 · 1429 阅读 · 0 评论 -
nodejs安装和环境配置
文章目录1.下载安装node.js1.1 下载node.js1.2 安装node.js1.3 测试是否安装 成功node -v 查看node的版本npm -v 查看npm的版本(新版的node安装自带安装npm)2.配置环境变量2.1 配置全局安装的模块路径和缓存路径创建文件夹目录配置路径Error: EPERM: operation not permitted, mkdir 'C:\soft\nodejs' 解决方案2.2 配置环境变量2.3 测试1.下载安装node.js1.1 下载node.原创 2021-05-31 10:51:22 · 8331 阅读 · 6 评论 -
React通过jsonp获取高德在线天气数据
文章目录1.注册高德开发者2. 创建应用3.天气查询API1.注册高德开发者注册地址https://lbs.amap.com/dev/id/choose选择个人开发者后续根据实际情况填写2. 创建应用选择 Web服务3.天气查询API参考 天气查询APIget请求必需的2个参数key 注册时的keycity 城市编号...原创 2021-04-27 13:36:25 · 506 阅读 · 3 评论 -
React Hooks的使用
文章目录1. React的Hooks的定义hook的英文翻译hook在react中的作用2. react中3个常用的hook方法2.1 useState()2.2 useEffect(()=>{})2.3 useRef()1. React的Hooks的定义hook的英文翻译n. 挂钩，吊钩vt. 钩住；引上钩vi. 钩住；弯成钩状hook在react中的作用hook是react16.8+版本出现的新语法/新特性可以在函数式组件中使用state和其他react特性2. react原创 2021-04-23 09:36:49 · 159 阅读 · 0 评论 -
18. React路由
文章目录1.React路由相关概念1.1 SPA应用1.2 路由Route的理解1.2.1 什么是路由1.2.2 路由Route的分类后端路由前端路由1.3 react-router-dom1.3.1 react-router-dom是什么1.3.2 react-router-dom相关API内置组件其他2.React路由的基本使用2.1 安装react-router-dom2.2 路由的配置2.3 路由组件和一般组件路由组件一般组件2.4 路由组件和一般组件的最大区别路由组件historylocation原创 2021-04-20 09:03:16 · 1675 阅读 · 0 评论 -
React 自定义主题
1.下载工具包yarn add lessyarn add less-loader@5.0.0less-loader@5.0.0 带上版本，不然会报错this.getOptions is not a function可以使用这两个版本yarn add less@3.9.0 less-loader@4.1.02. 修改配置文件 config-overrides.jsconst { override, fixBabelImports, addLessLoader} = requir原创 2021-04-17 11:05:58 · 498 阅读 · 0 评论 -
React 按需引入antd组件和样式
文章目录1. 下载相关依赖1.1 添加antd1.2 引入antd的 antd.css（不需要执行，后面会删除，仅了解）2. 添加按需打包工具2.1 添加依赖配置文件react-app-rewired 用于启动脚手架customize-cra 执行修改配置命令babel-plugin-import 按需引入组件和样式的babel插件2.2 修改package.json配置文件2.3 在src目录的同级目录创建 config-overrides.js2.4 删除之前引入的 antd.css引入1. 下载相关原创 2021-04-17 10:23:03 · 1291 阅读 · 0 评论 -
redux开发者工具的安装和配置
文章目录1. 下载reudx-devtools2. 项目添加依赖3. 在src/redux/store.js中添加导入项1. 下载reudx-devtools下载地址：redux-devtools解压下载的压缩包使用chrome浏览器打开拓展程序加载已解压的拓展程序2. 项目添加依赖yarn add redux-devtools-extension3. 在src/redux/store.js中添加导入项import {composeWithDevTools} from "re原创 2021-04-15 17:21:20 · 393 阅读 · 0 评论 -
19. React按需引入 antd 组件和样式 自定义主题
文章目录1.安装依赖2. 修改 pakcage.json3. 根目录创建config-overrides.js4. 不用在组件中单独引入样式1.安装依赖yarn add react-app-rewiredyarn add customize-crayarn add babel-plugin-importyarn add lessyarn add less-loader2. 修改 pakcage.json"scripts":{ "start": "react-app-rewired st原创 2021-04-14 13:49:10 · 278 阅读 · 0 评论 -
17. React消息订阅与发布 pubsub-js
1.React脚手架引入pubsub-jsyarn add pubsub-js2. pubsub-js的使用2.1 消息的订阅方和消息的发布方消息发布方定义消息名，和要发布的消息数据消息订阅方接受消息名，和消息数据2.2 pubsub-js代码实现2.2.1 发布消息(发布方)代码格式如下：PubSub.publish(消息名,消息数据)import PubSub from "pubsub-js"//在需要传递数据给其他组件的js方法中发布消息pubsub_f原创 2021-04-12 11:15:53 · 227 阅读 · 0 评论 -
16. React配置代理proxy
文章目录1.react如何解决跨域问题1.1 跨域是什么1.2 react请求跨域是什么2. react如何解决跨域方式1 通过配置代理原理操作步骤1.react如何解决跨域问题1.1 跨域是什么SpringBoot2.x跨域问题1.2 react请求跨域是什么2. react如何解决跨域方式1 通过配置代理原理ajax请求可以发送到服务器，但是浏览器无法接受服务器返回结果，因为跨域解决方法1 如下使用代理服务器作请求转发再返回操作步骤找到并打开 package.原创 2021-04-09 15:39:13 · 1335 阅读 · 0 评论 -
15. React案例todoList
文章目录1. 需求分析2. 代码实现2.1 通过create-react-app脚手架创建项目todoList2.2 创建目录结构3. 代码实现3.1 public/index.html3.2 src/index.js3.3 src/App.jsx 和 App.cssApp.jsxApp.css3.4 src/commponent/Header 组件Header/index.jsxHeader/index.css3.5 src/component/List 组件List/index.jsxList原创 2021-04-09 11:29:52 · 423 阅读 · 0 评论 -
14. React的脚手架的基本使用
1. 搭建脚手架环境1.1 react的脚手架库 create-react-app用于创建react项目1.2 项目的整体技术架构reactwebpackes6eslint等等1.3使用脚手架的优点模块化组件化工程化1.4 环境搭建步骤1.4.1 安装npm安装node，node自带npm1.4.2 安装 yarn通过npm安装yarnnpm install -g yarn 或者 npm i -g yarn1.4.3 安装 create-re原创 2021-04-02 11:28:31 · 398 阅读 · 1 评论 -
13. React虚拟DOM和 JavaScript DOM 的diffing算法
1. 验证react的diffing算法<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>验证diff算法</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 -->原创 2021-04-01 14:00:02 · 125 阅读 · 0 评论 -
12. React组件的生命周期
文章目录1.引出react的生命周期1.1 一个需求1.2 组件的卸载(unmount)和装载(mount)1.3 写出静态页面1.4 写出定时器1.5 定时器放在组件的render()方法中(错误写法)1.6 点击按钮,卸载组件1.7 componentWillUnmount组件被卸载前执行的函数1.8 生命周期图示:1.9 生命周期函数叫法2. 组件的生命周期（旧）2.1 组件的生命周期图（旧）2.2 组件的生命周期使用2.2.1 挂载时的生命周期2.2.2 父组件的render（1） 线路原创 2021-04-01 11:10:33 · 220 阅读 · 0 评论 -
11. 高阶函数和函数柯里化
文章目录1. 受控组件实例2. 代码优化1.2.1抽取共用的方法2.2 代码修改后出现问题：2.3 思考：2.4 解决2.5 - 分析3. 高阶函数和函数柯里化3.1 高阶函数3.2 函数柯里化1. 受控组件实例示例代码代码来源 10. 受控组件和非受控组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高阶函数_函数柯里化&l原创 2021-03-31 10:40:54 · 301 阅读 · 0 评论 -
10. React 受控组件和非受控组件
1. 非受控组件所有的输入类型的 dom元素（input textarea 单选 多选）的 值 ，只有在使用的时候才会取值，就是非受控组件；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1-非受控组件</title></head><body><!--1.准备好容器--><原创 2021-03-31 08:41:27 · 175 阅读 · 0 评论 -
9.React中的事件处理
1.通过onXxx指定事件处理函数注意onXxx 大小写react使用的是自定义事件，而不是原生的dom事件react中事件是通过事件委托方式处理元素（事件冒泡），委托给最外层元素通过 event.target得到事件发生的dom对象，不要过度使用refref所在的节点和函数方法所在节点是同一个节点元素时.,可以不使用ref;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-原创 2021-03-30 16:07:45 · 200 阅读 · 0 评论 -
8. React组件三大核心属性之refs
文章目录1. 字符串形式的refs2. 内联回调形式的refs2.1 什么是 回调函数2.2 内联回调形式ref2.3 内联回调函数的问题3. class绑定函数1. 字符串形式的refs组件内的标签可以通过设置ref属性值来标记自己；类似于JavaScript中的id属性；下面例子中 this.refs.input01拿到的是真实dom，不是虚拟dom;react官方未来会弃用这种方式；弃用原因：就是string类型的refs存在效率问题<!DOCTYPE html>&原创 2021-03-30 14:19:33 · 342 阅读 · 0 评论 -
7. React组件三大核心属性之props
1.基本用法1.1 接收类组件外部的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>props</title></head><body><!--1.准备好容器--><div id="root"></div><!--2.引入js文件-->&原创 2021-03-30 08:10:09 · 294 阅读 · 0 评论 -
6. React组件三大核心属性之state
文章目录1. state作用2. state实例2.1 实例要求2.2 先写出静态页面3.实现切换功能4. 完整代码1. state作用存储数据2. state实例2.1 实例要求实例：页面生成一个h2标题，并点击标题，切换内容显示如 ： 今天天气很炎热，点击标题，让天气在炎热和凉爽之间切换2.2 先写出静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g原创 2021-03-29 15:18:49 · 395 阅读 · 0 评论 -
5. React中函数式组件和类式组件
文章目录react版本 v16.8.41. 组件定义2. 组件分类2.1 函数式组件2.2 类式组件3. React开发者调试工具react版本 v16.8.41. 组件定义用来实现局部功能效果的代码和资源合集（html/css/js/image/video/…）2. 组件分类2.1 函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t原创 2021-03-29 11:25:58 · 422 阅读 · 0 评论