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

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

news 2026/2/10 15:05:04

前言

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

★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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/10 11:13:58

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2026/2/7 17:33:19

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/12/10 4:08:53

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2026/2/3 12:56:31

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53