React的基本使用

安装VSCode插件

  • ES7+ React
  • open in browser

React基本使用

基本使用步骤

  1. 引入两个JS文件（ 注意引入顺序 ）

    <!-- react库, 提供React对象 -->
//本地
<script src="../js/react.development.js"></script>
//线上
//<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- react-dom库, 提供了ReactDOM对象 -->
//本地
<script src="../js/react-dom.development.js"></script>//线上
//<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

  2. 在html定义一个根容器标签

    <div id="root"></div>

  3. 创建react元素(类似html元素)

    // 返回值：React元素 
// 参数1：要创建的React元素名称 =》字符串
// 参数2：元素的属性  =》对象 {id: 'box'} 或者 null
// 后面参数：该React元素的所有子节点 =》文本或者其他react元素
const element = React.createElement('h1', {title: '你好, React!'}, 'Hello React!'
)

  4. 渲染 react 元素

    // 渲染React元素到页面容器div中
ReactDOM.render(element, document.getElementById('root'))

特殊属性

  • class ==》 className
const element = React.createElement('h1', {title: '你好, React!',className: 'active'}, 'Hello React!'
)

在这里插入图片描述

多个渲染

    const title = 'Hello React!'const content = '这是对react的介绍，这是介绍'const vDom = React.createElement('div', null, [React.createElement('h1', { title: '你好, React!', className: 'active' }, title),React.createElement('p', null, content)])ReactDOM.render(vDom, document.getElementById('root'))

在这里插入图片描述

理解 React 元素

  1. 也称虚拟 DOM (virtual DOM) 或虚拟节点(virtual Node)

  2. 它就是一个普通的 JS 对象, 它不是真实 DOM 元素对象

    虚拟 DOM: 属性比较少 ==> 较轻的对象

    真实 DOM: 属性特别多 ==> 较重的对象

  3. 但它有一些自己的特点

    虚拟 DOM 可以转换为对应的真实 DOM => ReactDOM.render方法将虚拟DOM转换为真实DOM再插入页面

    虚拟 DOM 对象包含了对应的真实 DOM 的关键信息属性

    ​ 标签名 => type: “h1”

    ​ 标签属性 => props: {title: ‘你好, React!’}

    ​ 子节点 => props: {children: ‘Hello React!’}

JSX

基本理解和使用

问题: React.createElement()写起来太复杂了

解决: 推荐使用更加简洁的JSX

JSX 是一种JS 的扩展语法, 用来快速创建 React 元素(虚拟DOM/虚拟节点)

形式上像HTML标签/任意其它标签, 且标签内部是可以套JS代码的

const h1 = <h1 className="active">哈哈哈</h1>

浏览器并不认识 JSX 所以需要引入babel将jsx 编译成React.createElement的形式

babel编译 JSX 语法的包为：@babel/preset-react

运行时编译可以直接使用babel的完整包：babel.js

线上测试: https://www.babeljs.cn/

<!-- 必须引入编译jsx的babel库 -->
<!--本地 -->
<script src="../js/babel.min.js"></script>
<!--线上 -->
<!-- <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> --><!-- 必须声明type为text/babel, 告诉babel对内部的代码进行jsx的编译 -->
<script type="text/babel">// 创建React元素 (也称为虚拟DOM 或 虚拟节点)const vDom = <h1 class="active">hello React2</h1>// 渲染React元素到页面容器div中ReactDOM.render(vDom, document.getElementById('root'))
</script>

在这里插入图片描述

注意:

​ 必须有结束标签
​ 整个只能有一个根标签
​ 空标签可以自闭合

JSX中使用 JS 表达式

  • JSX中使用JS表达式的语法：{js表达式}
  • 作用: 指定动态的属性值和标签体文本

  1. 可以是js的表达式, 不能是js的语句

  2. 可以是任意基本类型数据值, 但null、undefined和布尔值没有任何显示

  3. 可以是一个js数组, 但不能是js对象

  4. 可以是react元素对象

  5. style属性值必须是一个包含样式的js对象

    let title = 'i love react'const vDom = (<div><h1>{title}</h1><h1>{555}</h1><h1>{null}</h1><h1>{undefined}</h1><h1>{true}</h1><h1>{'true'}</h1><h1>{('h1',{ title: '你好, React!',className:'active' },'Hello React!')}</h1><h1>[1,'1',3]</h1><h1 title="{title}" id="name" className="active" style={{color:'red'}}>hello</h1></div>)ReactDOM.render(vDom, document.getElementById('root'))

在这里插入图片描述

条件渲染

if…else

    let vDom let isLoading = trueif(isLoading){vDom = <h1>加载中....</h1>}else{vDom = <h1>加载完成</h1>}ReactDOM.render(vDom, document.getElementById('root'))

在这里插入图片描述

三元表达式

const vDom = isLoading ? <h2>正在加载中2...</h2> : <div>加载完成啦2!</div>
ReactDOM.render(vDom, document.getElementById('root'))

&&

const vDom = isLoading && <h2>正在加载中3...</h2>
ReactDOM.render(vDom, document.getElementById('root'))
// 注意: 只适用于只在一种情况下才有界面的情况

表达式1 && 表达式2

​ 如果表达式1对应的boolean为true, 结果就为表达式2的值

​ 如果表达式1对应的boolean为false, 结果就为表达式1的值

表达式1 || 表达式1

​ 如果表达式1对应的boolean为true, 结果就是表达式1的值

​ 如果表达式1对应的boolean为false, 结果就为表达式2的值

列表渲染

  • react中可以将数组中的元素依次渲染到页面上
  • 可以直接往数组中存储react元素
  • 推荐使用数组的 map 方法
  • 注意：必须给列表项添加唯一的 key 属性, 推荐使用id作为key, 尽量不要用index作为key

需求: 根据下面的数组显示列表

const courses = [
{id: 1, name: ‘React’},
{id: 2, name: ‘Vue’},
{id: 3, name: ‘Uniapp’}
]

在这里插入图片描述

    const courses =[{id:1,name:'React'},{id:2,name:'Vue'},{id:3,name:'Uniapp'}]const vDom = (<div>{courses.map(item=><p key={item.id}>{item.name}</p>)}</div>)ReactDOM.render(vDom, document.getElementById('root'))

样式处理

行内样式

  • 样式属性名使用小驼峰命名法
  • 如果样式是数值，可以省略单位
 <h1  className="active" style={{color:'red',fontSize:50}}>hello</h1>

类名

  • 必须用className, 不能用class
  • 推荐, 效率更高些
<h2 className="active">React class</h2>

在这里插入图片描述

事件处理

绑定事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。比如：onClick、onFocus 、onMouseEnter
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
 <h1  className="active" onClick={function(){alert('hello')}}>hello</h1>

事件处理

绑定事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。比如：onClick、onFocus 、onMouseEnter
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
const div = <div onClick={事件处理函数}></div>

事件对象

React 根据 W3C 规范来自定义的合成事件, 与原生事件不完全相同

  • 处理好了浏览器的兼容性问题

  • 阻止事件默认行为不能使用return false, 必须要调用: event.preventDefault()

  • 有自己特有的属性, 比如: nativeEvent --原生事件对象

  • 的change监听在输入过程中触发， 而原生是在失去焦点才触发

    • 原理：内部绑定的是原生input事件
function handleClick1(event) {console.log(event)alert(event.target.innerHTML)
}const handleClick2 = (event) => {const isOdd = Date.now()%2===1alert(isOdd)if (!isOdd) {// return false // 不起作用event.preventDefault()}
}const vDom = <div><button onClick={handleClick1}>点击提示按钮文本</button><br/><br/><a href="http://www.baidu.com" onClick={handleClick2}>奇数才去百度</a></div>ReactDOM.render(vDom, document.getElementById('root'))

快速创建React项目

react脚手架使用

问题: JSX 转 JS 和 ES6 转 ES5 语法运行时编译太慢了
解决: 利用 Webpack 进行打包处理

问题: webpack打包环境搭建太麻烦, 且没有质量保证, 效率低
解决: 使用官方提供的脚手架工具
搭建好了webpack打包环境
项目的目录结构

创建React项目

使用 create-react-app:

  1. 下载 npm i create-react-app -g
  2. 创建项目命令: create-react-app 项目名称

也可以利用 npx 来下载 create-react-app 并创建项目

命令: npx create-react-app 项目名称

npx 做的事情:

  1. 先全局下载 create-react-app
  2. 执行 create-react-app 命令, 创建 react 项目
  3. 自动将 create-react-app 从全局中删除掉

从V18降级到V17的版本

最新的脚手架默认使用的是最新的 React18 的版本, 而这个版本是最近才出稳定版, 企业项目还未开始使用

如何降级到V17的最新版呢?

  1. 重新下载 react 和 react-dom, 并指定17的版本

    npm i react@17 react-dom@17

  2. 修改入口JS的实现

    import React from 'react'
import ReactDOM from 'react-dom'import App from './App'ReactDOM.render(<App />, document.getElementById('root'))

安装chrome调试工具

问题: 一旦开始进行组件化的应用开发, 我们需要查看应用中组件组成和各个组件的相关数据(props/state)

解决: 使用React的chrome调试工具, React Developer Tools

  • 方式一: chrome应用商品搜索 React, 下载安装React Developer Tools
  • 问题: 需要使用翻墙工具
  • 方式二: 使用本地的安装包
    • 进入扩展程序列表
    • 打开 开发者模式
    • 将安装包的文件夹拖入扩展程序列表界面, 直接安装

网盘地址链接：https://pan.baidu.com/s/1hEn4URDwU7rlBzROj2Y1ug
提取码：Dagy

  • 测试
    • 访问react项目, 插件图标会亮
    • 多了调试选项: Components

启动项目：npm run start

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/754672.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python大数据实践:selenium爬取京东评论数据

Python大数据实践:selenium爬取京东评论数据

准备工作 selenium安装 Selenium是广泛使用的模拟浏览器运行的库&#xff0c;用于Web应用程序测试。 Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样&#xff0c;并且支持大多数现代 Web 浏览器。 #终端pip安装 pip install selenium #清华镜像安装 p…
阅读更多...
【Ubuntu】Ubuntu的安装和配置

【Ubuntu】Ubuntu的安装和配置

下载ubuntu镜像 https://releases.ubuntu.com/22.04.4/ubuntu-22.04.4-desktop-amd64.iso 一、Ubuntu安装 1.新建虚拟机 1.1按照它的提示创建用户&#xff1b;后面一直下一步就好 2.启动Ubuntu虚拟机 2.1设置为中文键盘 2.2默认即可&#xff1b;若是有低需求也可以选择最小…
阅读更多...
企业开展开源安全治理必要性及可行性详细分析

企业开展开源安全治理必要性及可行性详细分析

背景 开源软件安全威胁是近几年企业安全面临的主要威胁&#xff0c;也是企业应用安全方向讨论的热门话题&#xff0c;但是由于是新的需求新的方向&#xff0c;很多企业在观望&#xff0c;当前开展这项工作是否已经成熟&#xff0c;项目成功率如何&#xff1f; 当新鲜事物产生时…
阅读更多...
【C语言】linux内核软中断

【C语言】linux内核软中断

一、什么是软中断&#xff1f; 内核中的软中断&#xff08;Softirqs&#xff09;和任务下半部&#xff08;Tasklets&#xff09;是Linux内核中用于在中断上下文之外处理中断服务的一种底层机制。这些机制解决了不能在中断服务例程&#xff08;ISR&#xff09;中执行耗时操作或…
阅读更多...
vscode中编写Markdown

vscode中编写Markdown

在vscode中编写Markdown 下载5个插件开始写作 在vscode中编写Markdown 下载5个插件 Markdown All in One 有很多快捷键和自动补全的操作&#xff0c;使我们在打Markdown时更方便 Markdown Preview Enhanced 在写的过程中可以看到Markdown被渲染出来的样子 Paste Image 方…
阅读更多...
Apache Doris 2.1 核心特性 Variant 数据类型技术深度解析

Apache Doris 2.1 核心特性 Variant 数据类型技术深度解析

在最新发布的 Apache Doris 2.1 新版本中&#xff0c;我们引入了全新的数据类型 Variant&#xff0c;对半结构化数据分析能力进行了全面增强。无需提前在表结构中定义具体的列&#xff0c;彻底改变了 Doris 过去基于 String、JSONB 等行存类型的存储和查询方式。为了让大家快速…
阅读更多...
在IDEA中设置使用鼠标滚轮控制字体大小

在IDEA中设置使用鼠标滚轮控制字体大小

IDEA是我们常用的程序编程工具&#xff0c;有时为了方便&#xff0c;我们需要随时的调整字体的大小 本篇文章我使用了两种方式来设置IDEA中的字体大小 方式一&#xff1a;使用传统的方式来设置 首先在IDEA顶部的菜单栏中选择“file”菜单 然后在“file”菜单中选择“Setting…
阅读更多...
Gitlab-runner注册与配置

Gitlab-runner注册与配置

文章目录 概要操作流程获取HTTPS证书上传证书修改gitlab-runner dns配置文件gitlab-runner 注册 概要 本文主要介绍了Gitlab-runner在内网环境注册到gitlab的操作方式。内网环境如下&#xff1a; 1、gitlab-runner由docker镜像部署&#xff1b; 2、gitlab部署与内网&#xff0…
阅读更多...
3D Tiles语义分割流水线

3D Tiles语义分割流水线

Dylan Chua 和 Anne Lee 开发了一个处理管线&#xff0c;用于对 3D Tiles 中包含的 GL 传输格式 (glTF) 模型进行语义分割。 该管道读取并遍历 3D Tileset&#xff0c;以输出包含元数据的经过转换的划分对象集。 该项目为 3D 语义分割器提供了最小可行产品&#xff0c;作为各种…
阅读更多...
C++ opencv2找错

C++ opencv2找错

opencv2找错 原来是参数位置没对齐。 #include "windows.h" #include<iostream> #include <assert.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <cuda_runtime.h> #include <cuda.h> #incl…
阅读更多...
视频技术2：把rtsp转为各种格式，包括webrtc

视频技术2：把rtsp转为各种格式，包括webrtc

前题是启动ABLMediaServer&#xff0c;把ini里的hls_enable1 1、添加rtsp到视频服务器 http://127.0.0.1:7088/index/api/addStreamProxy?secret035c73f7-bb6b-4889-a715-d9eb2d1925cc&vhost_defaultVhost_&appMedia&streamCamera_00001&enable_hls1&ur…
阅读更多...
音视频开发之旅——音频基础概念、交叉编译原理和实践（LAME的交叉编译）（iOS）

音视频开发之旅——音频基础概念、交叉编译原理和实践（LAME的交叉编译）（iOS）

本文主要讲解的是音频基础概念、交叉编译原理和实践&#xff08;LAME的交叉编译&#xff09;&#xff0c;是基于iOS平台&#xff0c;示例代码如下所示&#xff1a; iOSAudioDemo 另外&#xff0c;Android平台也有相关的文章&#xff0c;如下所示&#xff1a; 音视频开发之旅…
阅读更多...
443端口用于安全Web通信服务

443端口用于安全Web通信服务

443端口主要用于提供安全Web通信。通常通过HTTPS&#xff08;安全超文本传输协议&#xff09;实现&#xff0c;这是一种加密的HTTP协议。 443端口即网页浏览端口&#xff0c;主要是用于HTTPS服务&#xff0c;提供加密和通过安全端口传输服务。 HTTPS使用SSL&#xff08;安全套…
阅读更多...
【数据结构与算法】设计循环队列

【数据结构与算法】设计循环队列

&#x1f9d1;‍&#x1f393;个人主页&#xff1a;简 料 &#x1f3c6;所属专栏&#xff1a;C &#x1f3c6;个人社区&#xff1a;越努力越幸运社区 &#x1f3c6;简 介&#xff1a;简料简料&#xff0c;简单有料~在校大学生一枚&#xff0c;专注C/C/GO的干货分…
阅读更多...
2022年第十三届蓝桥杯比赛Java B组 【全部真题答案解析-第一部分】

2022年第十三届蓝桥杯比赛Java B组 【全部真题答案解析-第一部分】

最近回顾了Java B组的试题&#xff0c;深有感触&#xff1a;脑子长时间不用会锈住&#xff0c;很可怕。 兄弟们&#xff0c;都给我从被窝里爬起来&#xff0c;赶紧开始卷&#xff01;&#xff01;&#xff01; 2022年第十三届蓝桥杯Java B组(第一部分 A~F题) 目录 一、填空题 …
阅读更多...
详解基于快速排序算法的qsort的模拟实现

详解基于快速排序算法的qsort的模拟实现

目录 1. 快速排序 1.1 快速排序理论分析 1.2 快速排序的模拟实现 2. qsort的模拟实现 2.1 qsort的理论分析 2.2 qsort的模拟实现 qsort函数是基于快速排序思想设计的可以针对任意数据类型的c语言函数。要对qsort进行模拟实现&#xff0c;首先就要理解快速排序。 1. 快…
阅读更多...
MQ横向对比：RocketMQ、Kafka、RabbitMQ、ActiveMQ、ZeroMQ

MQ横向对比：RocketMQ、Kafka、RabbitMQ、ActiveMQ、ZeroMQ

前言 本文将从多个角度全方位对比目前比较常用的几个MQ&#xff1a; RocketMQKafkaRabbitMQActiveMQZeroMQ将单独说明。 表格对比 特性RocketMQKafkaRabbitMQActiveMQ单机吞吐量10 万级&#xff0c;支撑高吞吐10 几万级&#xff0c;吞吐量非常高&#xff0c;甚至有文献称&a…
阅读更多...
【数据结构】堆的创建

【数据结构】堆的创建

文章目录 一、堆的概念及结构1、什么是堆2、堆的性质3、堆的结构及分类 二、堆的创建1、堆向下调整算法2、堆向上调整算法3、堆的创建&#xff08;向上调整算法&#xff09; 一、堆的概念及结构 1、什么是堆 堆就是以二叉树的顺序存储方式来存储元素&#xff0c;同时又要满足父…
阅读更多...
Java复习05 Spring 概念

Java复习05 Spring 概念

Java复习05 Spring 概念 初学 Spring 的时候 我的问题是 什么是Spring&#xff1f; Spring的底层实现是什么&#xff1f;为什么现在Java都在用sping框架&#xff1f; 1.把Spring类比成乐高说明书 想象一下你有一个超级大的乐高积木盒子&#xff0c;里面有各种各样的积木。你…
阅读更多...
智慧城市中的智慧生活：便捷、舒适与高效

智慧城市中的智慧生活：便捷、舒适与高效

目录 一、智慧城市中的智慧生活概述 二、智慧生活带来的便捷性 1、智慧交通的便捷出行 2、智慧购物的轻松体验 3、智慧政务的一站式服务 三、智慧生活带来的舒适性 1、智慧环境的绿色宜居 2、智慧医疗的健康保障 3、智慧教育的均衡发展 四、智慧生活带来的高效性 1、…
阅读更多...
最新文章

Copyright @ 2022~2023