![](https://img-blog.csdnimg.cn/20210716152359604.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 58
React
九宫格输入法
正在码代码ing
展开
-
11.React 类式组件
创建类式组件: 代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>类式组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库原创 2021-07-27 10:04:35 · 108 阅读 · 0 评论 -
10.React 复习类相关知识
ES6中的知识点,直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>类的基本知识</title></head><body> <script type="text/javascript" > /* 总结: 1.类中的构造器不原创 2021-07-23 17:26:28 · 146 阅读 · 0 评论 -
9.React 函数式组件
创建组件: 组件是用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 写个函数进行渲染<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_函数式组件</title></head><body> <!-- 准备好一个“容器” --> <di原创 2021-07-23 17:24:43 · 167 阅读 · 0 评论 -
8.React 开发者工具调试
开发者工具安装: 压缩包解压后,文件夹内的文件如下: 打开谷歌游览器 - 更多工具 - 扩展程序 - 加载已解压的扩展程序 - 选择文件夹 安装成功: 点击右上角的扩展程序 - 选中图钉,可以把工具固定在界面 打开之前写的html,看箭头 发现右上角的图标亮了,是红色的上面还有个小虫子,这个表示当前处于开发的状态并不是打包后的 那么打包部署运行的图标是什么样子的呢,以美团举例,这种的图标才是正常的作用: 打开之前写的html,审查元素F12,发现多了两个按钮:原创 2021-07-23 17:18:40 · 300 阅读 · 0 评论 -
7.React 模块与组件、模块化与组件化的理解
模块:理解:向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块:随着业务逻辑增加,代码越来越多且复杂。作用:复用js, 简化js的编写, 提高js运行效率组件:理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件: 一个界面的功能更复杂作用:复用编码, 简化项目编码, 提高运行效率模块化: 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用组件化: 当应用是以多组件的方式实现, 这个应用就是一个组件化原创 2021-07-23 17:14:32 · 158 阅读 · 0 评论 -
6.React jsx小练习
需求: 动态展示如下列表案例: 根据之前所学,先编写一个静态的案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx小练习</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div>原创 2021-07-23 17:09:40 · 150 阅读 · 0 评论 -
5.React jsx语法规则
1.JSX: 1.1、 全称: JavaScript XML 1.2、react定义的一种类似于XML的JS扩展语法2.案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx语法规则</title></head><body> <!-- 准备好一个“容器” -->原创 2021-07-23 17:04:45 · 183 阅读 · 0 评论 -
4.React 虚拟DOM与真实DOM
1.虚拟DOM:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>3_虚拟DOM与真实DOM</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心原创 2021-07-23 16:53:08 · 307 阅读 · 0 评论 -
3.React 虚拟DOM的两种创建方式
1.使用jsx创建虚拟DOM:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_使用jsx创建虚拟DOM</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引原创 2021-07-23 16:49:47 · 208 阅读 · 1 评论 -
2.React hello_react案例
React的依赖包: 1.babel.min.js:解析JSX语法代码转为JS代码的库 在进行import操作时游览器是无法直接解析的,还是需要借助babel从ES6转ES5。 React写的不是js而是jsx,jsx是在js的基础上提出了一些要求和语法,我们写的是jsx游览器只认js,那么同样需要需要借助babel从jsx转js。 2.react.development.js:React核心库 3.react-dom.development.js:提供操作DOM的react扩展库原创 2021-07-23 16:45:24 · 117 阅读 · 0 评论 -
1.React 简介
React的官网: 1.英文官网: https://reactjs.org/ 2.中文官网: https://react.docschina.org/React的描述: 1.用于动态构建用户界面的JavaScript库 2.程序的执行过程如下: 2.1、发送请求获取数据 2.2、处理数据(过滤、整理格式等) 2.3、操作DOM呈现页面 React只管第三步,将数据渲染为HTML视图(只关注于视图)JavaScript的痛点:document.getElementById原创 2021-07-22 12:17:06 · 803 阅读 · 2 评论