当前位置： 首页 > news >正文

快速上手React：从概述到组件与事件处理

news 2026/2/11 2:02:29

前言

在这里插入图片描述
「作者主页」：雪碧有白泡泡
「个人网站」：雪碧的个人网站
「推荐专栏」：

★java一站式服务 ★
★ React从入门到精通★
★前端炫酷代码分享 ★
★ 从0到英雄，vue成神之路★
★ uniapp-从构建到提升★
★ 从0到英雄，vue成神之路★
★ 解决算法，一个专栏就够了★
★ 架构咱们从0说★
★ 数据流通的精妙之道★
★后端进阶之路★

请添加图片描述

文章目录

  • 前言
  • 一、React概述
  • 在线立即尝试 React
    • 脚本方式
      • 完整示例
    • 脚手架方式
      • 完整代码
  • 二、组件
    • 函数方式组件
    • 类方式组件
  • 三.事件
      • React处理点击事件
      • 箭头函数
  • 小结

一、React概述

在这里插入图片描述

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

在这里插入图片描述

在线立即尝试 React

点击跳转地址
在这里插入图片描述

React框架的书写方式分为两种，一种是脚本方式（JavaScript标签引入，练习使用）；一种是react脚手架方式（常用）。

脚本方式

  • 步骤1 ：在页面中引入 react 库 和 react-dom 库；

对于步骤1，你可以在页面中使用以下代码来引入react库和react-dom库：

<script crossorigin src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

请确保将 17.0.2 替换为你想要使用的React版本。

  • 步骤2：引入 Babel；React中使用的是JSX语法，但是浏览器不识别JSX，我们就需要引入babel

对于步骤2，你可以使用以下代码来引入Babel并使用JSX语法：

<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.8/babel.min.js"></script><script type="text/babel">// 在此处编写React组件和代码
</script>

你还可以选择将Babel作为开发依赖项使用，并使用Babel进行项目构建。这样可以更好地支持ES6+语法和更多的Babel插件。

  • 步骤3 ：创建挂载点。

对于步骤3，你可以在HTML中创建一个带有特定id的div元素，作为React组件的挂载点。例如：

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

你可以将root替换为任何你想要的名称。

完成以上步骤后，你就可以开始编写React组件并将它们渲染到挂载点上了。

完整示例

这是一个完整的示例代码，包括了引入React库、引入Babel、创建挂载点以及一个简单的React组件：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>React App</title><script crossorigin src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.8/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">// 创建一个名为Greeting的React组件function Greeting(props) {return <p>Hello, {props.name}!</p>;}// 渲染Greeting组件到页面上的根元素ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));</script>
</body>
</html>

在上述代码中，我们引入了React库和ReactDOM库的生产版本，并且使用Babel解析了内嵌的JSX代码。然后，我们在页面中创建了一个id为root的div作为React组件的挂载点。

接下来，我们定义了一个名为Greeting的React组件，它通过props接收一个名为name的属性，并返回一个包含问候语的p元素。

最后，我们使用ReactDOM.render方法将Greeting组件渲染到页面上的挂载点。在这个例子中，Greeting组件将显示"Hello, John!"。你可以根据需要修改组件的属性值。

脚手架方式

步骤1 - 创建虚拟DOM对象

// 创建虚拟DOM对象
const vNode = React.createElement(// 标签名"div",// 属性对象{id: "mydiv",className: "cls",},// 标签内的内容"hello react!"
);

步骤2 - 获取挂载点

// 获取挂载点
const root = document.getElementById("root");

步骤3 - 渲染页面

// 渲染页面
ReactDOM.render(vNode, root);

完整代码

完整代码如下所示：

<!DOCTYPE html>
<html><head><title>React 封装演示</title><script src="https://cdn.jsdelivr.net/npm/react/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.development.js"></script>
</head><body><!-- 挂载点：后续生成的内容插入这里 --><div id="root"></div><script type="text/javascript">// 步骤1 - 创建虚拟DOM对象const vNode = React.createElement(// 标签名"div",// 属性对象{id: "mydiv",className: "cls",},// 标签内的内容"hello react!");// 步骤2 - 获取挂载点const root = document.getElementById("root");// 步骤3 - 渲染页面ReactDOM.render(vNode, root);</script>
</body></html>

以上代码以纯HTML形式呈现，直接在浏览器中打开即可看到渲染后的React组件。在代码中，首先引入了React和ReactDOM的开发版本。然后，在<div id="root"></div>标签中设置了挂载点。接下来，使用React.createElement()方法创建了虚拟DOM对象，并设置了标签名、属性对象和标签内的内容。最后，通过document.getElementById("root")获取到挂载点，并使用ReactDOM.render()方法将虚拟DOM对象渲染到挂载点上。这样，页面上就会渲染出一个带有"id"和"className"属性的div标签，内容为"hello
react!"。
组件是 React 中非常重要的概念，它负责将页面划分为独立可复用的部分，并且可以根据不同的输入（props）来动态展示内容。

在这里插入图片描述

二、组件

组件，从概念上类似于 JavaScript 函数。它接受任意的入参即（props”），并返回用于描述页面展示内容的 React元素。React 定义组件有两种方式

函数方式组件

函数方式组件是 React16.8版本之后新增的语法，它是一种简单、轻量级的定义组件的方式。我们可以使用函数声明一个组件，接收一个参数props，并返回一个React元素来描述页面的展示内容。

下面是一个简单的函数方式组件的示例代码：

function Welcome(props) {return <h1>Hello, {props.name}!</h1>;
}// 使用该组件
const element = <Welcome name="John" />;
ReactDOM.render(element,document.getElementById('root')
);

上面的代码中，我们定义了一个名为Welcome的函数组件，它接收一个props参数，这个props参数可以包含任意的属性。在组件内部，我们可以使用props对象中的属性来动态展示页面内容。

类方式组件

类方式组件是 React 中更为传统和强大的定义组件的方式。我们可以使用类来定义一个组件，这个类继承React.Component，并且实现一个render方法来返回React元素。

下面是一个简单的类方式组件的示例代码：

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}// 使用该组件
const element = <Welcome name="John" />;
ReactDOM.render(element,document.getElementById('root')
);

在上面的代码中，我们定义了一个名为Welcome的类组件，它继承了React.Component，然后实现了一个render方法来描述组件的展示内容。在render方法中，我们可以通过this.props来获取传入的属性，并使用它们来动态展示内容。

无论是函数方式还是类方式，组件都是一个接受props参数并返回React元素的函数或类。它们可以根据props的不同来灵活地展示不同的内容，从而实现页面的组件化和重用。

在这里插入图片描述

三.事件

React中的事件处理与DOM元素的事件处理非常相似，但有一些语法上的不同之处。React使用小驼峰式（camelCase）的命名方式来定义事件，并需要传入一个函数作为事件处理函数，而不是一个字符串。这样做可以确保事件处理函数在React组件中正确地绑定和执行。

React处理点击事件

下面是一个使用React处理点击事件的示例代码：

class Button extends React.Component {handleClick() {console.log('Button clicked');}render() {return <button onClick={this.handleClick}>Click me</button>;}
}ReactDOM.render(<Button />, document.getElementById('root'));

在上面的代码中，我们创建了一个Button组件，并在组件的render方法中返回一个 <button> 元素。在 <button>
元素上，我们通过onClick属性将一个函数 this.handleClick 作为点击事件的处理函数。

当按钮被点击时，事件处理函数 handleClick 会被调用，并输出一个日志消息。

需要注意的是，在React中，事件处理函数会自动绑定到组件实例上。所以在事件处理函数中可以使用 this 来引用组件实例。

另外还有一种使用箭头函数的方式，在事件处理函数中访问组件实例。

箭头函数

下面是一个使用箭头函数的事件处理的示例代码：

class Button extends React.Component {handleClick = () => {console.log('Button clicked');}render() {return <button onClick={this.handleClick}>Click me</button>;}
}ReactDOM.render(<Button />, document.getElementById('root'));

在上面的代码中，我们使用了类属性的方式去定义事件处理函数，这样做可以确保箭头函数内部的 this 与组件实例保持一致。

总结一下，React中的事件处理与DOM元素的事件处理语法上有一些区别，但整体思想非常相似。我们可以通过使用小驼峰式的命名方式和传入函数作为事件处理函数，来实现在React组件中处理各种用户交互的事件。

小结

在本篇文章中，我们首先介绍了React的概述，它是一个用于构建用户界面的JavaScript库。我们还介绍了使用脚本方式和脚手架方式来安装和运行React的方法。

其次，我们讨论了React组件的概念和两种定义组件的方式：函数方式和类方式。函数方式是React16.8版本之后新增的语法，它更为简单和轻量级。而类方式是React中传统和强大的定义组件的方式，它继承React.Component并实现render方法来描述组件的展示内容。

最后，我们学习了React中处理事件的方法。React的事件处理与DOM元素的事件处理相似，但有一些语法上的不同。React事件的命名采用小驼峰式，需要传入一个函数作为事件处理函数。
在这里插入图片描述

相关文章：

快速上手React：从概述到组件与事件处理

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…...

编程日记 2023/8/12 2:57:29

K8S系列文章之 离线安装自动化工具Ansible

参考 文档 离线安装 Ansible - DevOps - dbaselife 一、Ansible简介 Ansible是一款开源的IT配置管理工具&#xff0c;常被IT界的小伙伴们用于自动化的场景&#xff0c;多用在服务部署、配置管理方面。配置文件采用最常见的yaml格式&#xff0c;学习起来也是比较容易&#xff…...

编程日记 2023/8/12 2:56:27

mysql8.0.3集群搭建

下载mysql安装包&#xff1a; https://dev.mysql.com/downloads/mysql/5.7.html#downloads 准备环境 1、准备三台服务器并设置hosts 192.168.236.143 mysql1 192.168.236.144 mysql2 192.168.236.145 mysql32、设置免密登陆 #生成秘钥 ssh-keygen -t rsa #一直按Enter即可…...

编程日记 2023/8/12 2:55:25

vue中router路由的原理？两种路由模式如何实现？(vue2) -(上)

平时我们编写路由时&#xff0c;通常直接下载插件使用&#xff0c;在main.js文件中引入直接通过引入vue-router中的Router通过Vue.use使用以后定义一个routeMap数组&#xff0c;里边是我们编写路由的地方&#xff0c;最后通过实例化一个 Router实例 将routes我们定义的routeMao…...

编程日记 2023/8/12 2:54:24

消息队列(3) -封装数据库的操作

前言 上一篇博客我们写了, 关于交换机, 队列,绑定, 写入数据库的一些建库建表的操作 这一篇博客中,我们将建库建表操作,封装一下实现层一个类来供上层服务的调用 , 并在写完该类之后, 测试代码是否完整 实现封装 在写完上述的接口类 与 xml 后, 我们想要 创建一个类 ,来调用…...

编程日记 2023/8/12 2:53:23

PostgreSQL中根据时间段范围查询数据，如19:29:10到20:29:10范围内的数据，排除年月日

数据格式如下 问题描述 我的SQL语句条件是 WHERE (TO_CHAR(cti.binder_gen_time, YYYY-MM-DD HH:mm:ss) > 19:29:10 AND TO_CHAR(cti.binder_gen_time, YYYY-MM-DD HH:mm:ss) < 20:29:10)为什么我数据的时间是2023-07-20 17:58:29也能被查出来&#xff1f; 问题解决…...

编程日记 2023/8/12 2:52:22

【二分+贪心】CF1665 C

Problem - C - Codeforces 题意&#xff1a; 思路&#xff1a; 一开始想太简单wa6了 只想到先感染大的分量&#xff0c;然后最后把最大的分量剩下的染色 但是可能会有别的分量更大&#xff08;因为最后给最大的染色之后可能不再是最大的&#xff09; 可以用堆维护&#xf…...

编程日记 2023/8/12 2:51:21

【Wamp】安装 | 局域网内设备访问

安装教程&#xff1a; https://wampserver.site/article/1.html 下载 https://www.wampserver.com/en/ 安装路径上不能有中文 安装好之后图标呈绿色 放入网页文件 将网页文件放置于wamp文件夹的www子文件夹 例如&#xff1a;\Wamp\program\www 修改http端口 WAMP服务器…...

编程日记 2023/8/12 2:50:20

【golang】类型推断和变量重声明

类型推断是一种编程语言在编译期自动解释表达式类型的能力。 1.Go语言的类型推断可以带来哪些好处&#xff1f; 在写代码时&#xff0c;我们通过使用Go语言的类型推断会节省敲击次数&#xff0c;而节省下来的键盘敲击次数几乎可以忽略不记。但它真正的好处&#xff0c;往往会…...

编程日记 2023/8/12 2:49:18

“算法详解”系列第3卷贪心算法和动态规划出版

“算法详解”系列图书共有4卷&#xff0c;目前1到3卷已经出版。最新出版的是第3卷—贪心算法和动态规划。 算法详解 卷3 贪心算法和动态规划 “算法详解”系列图书共有4卷&#xff0c;本书是第3卷—贪心算法和动态规划。其中贪心算法主要包括调度、最小生成树、集群、哈夫曼编…...

编程日记 2023/8/12 2:48:17

CSS前端开发指南：创造精美的用户界面

简介&#xff1a; 《CSS前端开发指南&#xff1a;创造精美的用户界面》是一本旨在帮助读者掌握CSS技术&#xff0c;实现令人惊叹的前端用户界面的实用指南。无论您是初学者还是有经验的开发者&#xff0c;本书都将为您提供全面的知识和实用技巧&#xff0c;帮助您创建引人注目…...

编程日记 2023/8/12 2:47:16

代数学与理论物理中常见的群

代数学与理论物理中常见的群 代数学与理论物理中常见的群 四阶群 六阶群 对称群 二维转动群 三维转动群 三维正交群 群 O3群...

编程日记 2023/8/12 2:46:14

解析xml文件，获取需要的数据并写入txt文件中

_ 话不多说&#xff01;直接上代码&#xff01;_ 1、XmlUtil.java xml解析工具类 public class XmlUtil {private static String dicName "";private static String dicValue "";// 用于存储需要的数据private static List<Map<String, Str…...

编程日记 2023/8/12 2:45:13

JavaScript基础 第三天

1.for循环 2.数组的基本使用和操作 3.数组排序 一.for循环 ① 语法&#xff1a;把声明起始值&#xff0c;循环条件&#xff0c;变量值写到一起&#xff0c;让人一目了然 for(变量起始值;终止条件;变量变化量) {// 循环体 }举例&#xff1a; for (let i 0; i < 100; i)…...

编程日记 2023/8/12 2:44:11

2.Redis部署到Windows服务器

1.下载安装包 Redis官网没有提供Windows的安装包&#xff0c;可以去gitHub或者网上去下载Redis的Windows安装包。 2.Redis部署到服务器 将Redis整个文件夹放到服务器的指令目录&#xff0c;然后进行修改Redis的配置文件 redis.windows.conf&#xff0c;修改里面的配置项 1.b…...

编程日记 2023/8/12 2:43:08

【修正-高斯拉普拉斯滤波器-用于平滑和去噪】基于修正高斯滤波拉普拉斯地震到达时间自动检测研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/12 2:42:06

Go语言基础: 有参函数Func、Map、Strings详细案例教程

目录标题 一、Variadic Functions1.Syntax2.Examples and understanding how variadic functions work3.Slice arguments vs Variadic arguments 仅改变可变参数4.Gotcha 二、Map1.Create a Map2.Retrieving value for a key from a map3.Checking if a key exists4.Iterate ov…...

编程日记 2023/8/12 2:41:04

JDBC连接数据库如何实现你会吗？？？

1.首先建立一个maven项目。。。详细过程来了哇 还没有安装maven的童鞋可以看这里&#xff1a;maven的下载安装与配置环境变量&#xff01;&#xff01;&#xff01;&#xff08;全网最详细&#xff09;_明天更新的博客-CSDN博客 有很多小伙伴就有疑问啦&#xff0c;难道我直接…...

编程日记 2023/8/12 2:40:01

C#与C++交互（2）——ANSI、UTF8、Unicode文本编码

【前言】 我们知道计算机上只会存储二进制的数据&#xff0c;无论文本、图片、音频、视频等&#xff0c;当我们将其保存在计算机上时&#xff0c;都会被转成二进制的。我们打开查看的时候&#xff0c;二进制数据又被转成我们看得懂的信息。如何将计算机上的二进制数据转为我们…...

编程日记 2023/8/12 2:39:00

SQLSTATE[42000]: this is incompatible with sql_mode=only_full_group_by in

执行 SELECT *FROM test WHERE id>1 GROUP BY name having AVG(age)>10 ORDER BY id desc limit 1 提示错误 Fatal error: Uncaught PDOException: SQLSTATE[42000]: Syntax error or access violation: 1055 Expression #1 of SELECT list is not in GROUP BY clause…...

编程日记 2023/8/12 2:37:58

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2026/2/10 23:40:16

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2026/1/28 11:11:03

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30