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

前言

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

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事件的命名采用小驼峰式,需要传入一个函数作为事件处理函数。
在这里插入图片描述

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

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

相关文章

ElasticSearch学习

一&#xff0c;简介 ES&#xff08;elaticsearch简写&#xff09;&#xff0c; Elasticsearch是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别的数据…

使用 AndroidX 增强 WebView 的能力

在App开发过程中&#xff0c;为了在多个平台上保持一致的用户体验和提高开发效率&#xff0c;许多应用程序选择使用 H5 技术。在 Android 平台上&#xff0c;通常使用 WebView 组件来承载 H5 内容以供展示。 一.WebView 存在的问题 自 Android Lollipop 起&#xff0c;WebVie…

lab1 utilities

测试和运行 参考大佬 修改grade-lab-util文件中的python为python3xv6.out这个文件的所有者可能是root&#xff0c;需要修改为用户&#xff0c;sudo chown woaixiaoxiao xv6.out 每完成一个函数&#xff0c;执行下面的步骤在Makefile中加入新增的程序$U/_sleep\make qemu&…

linux 命令- systemctl

systemctl 参数说明 1、使用语法 用法&#xff1a;systemctl [OPTIONS…] {COMMAND} … 2 、参数说明 参数参数说明start立刻启动后面接的unitstop立刻关闭后面接的unitrestart立刻关闭后启动后面接的unit&#xff0c;亦即执行stop再start的意思reload不关闭后面接的unit的…

PyTorch深度学习环境安装(Anaconda、CUDA、cuDNN)及关联PyCharm

1. 关系讲解 Tytorch&#xff1a;Python机器学习库&#xff0c;基于Torch&#xff0c;用于自然语言处理等应用程序 Anaconda&#xff1a;是默认的python包和环境管理工具&#xff0c;安装了anaconda&#xff0c;就默认安装了conda CUDA&#xff1a;CUDA是一种由显卡厂商NVIDI…

取个对象值导致系统崩溃

取个对象值导致系统崩溃 前言 想必各位小伙经常在项目中遇到一些错误&#xff0c;取对象值的时候&#xff0c;经常报错,又或者某些项目突然就挂经常都是出现在一些对象取值上面&#xff0c;然后就被领导一顿训斥 报错分析 例如&#xff1a; 下面这个报错大家想必不会陌生&am…

后端开发8.品牌模块

概述 简介 效果图 数据库设计 DROP TABLE IF EXISTS `goods_brand`;CREATE TABLE `goods_brand` ( `goodsBrandId` int(11) NOT NULL AUTO_IN

浅谈机器人流程自动化(RPA)

1.什么是RPA RPA代表机器人流程自动化&#xff08;Robotic Process Automation&#xff09;&#xff0c;是一种利用软件机器人或机器人工作流程来执行重复性、规范性和高度可预测性的业务流程的技术。这些流程通常涉及许多繁琐的、重复的任务&#xff0c;例如数据输入、数据处…

系统架构设计专业技能 · 网络规划与设计(三)【系统架构设计师】

系列文章目录 系统架构设计专业技能 网络规划与设计&#xff08;三&#xff09;【系统架构设计师】 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师…

0基础学习VR全景平台篇 第79篇:全景相机-泰科易如何直播推流

泰科易科技是中国的一家研发全景相机的高科技公司&#xff0c;前不久&#xff0c;在2020世界VR产业大会上发布了新一代5G VR直播影像采集终端--360starlight。以其出色的夜景成像效果和一“部”到位的直播方案重新定义了VR慢直播相机&#xff0c;对行业具有高度借鉴意义。 本文…

Uniapp使用腾讯地图并进行标点创建和设置保姆教程

使用Uniapp内置地图 首先我们需要创建一个uniapp项目 首先我们需要创建一个uniapp项目 我们在HBuilder左上角点击文件新建创建一个项目 然后下面这张图的话就是uniapp创建项目过程当中需要注意的一些点和具体的操作 然后我们创建完项目之后进入到项目pages文件夹下&#xff…

【学习FreeRTOS】第2章——FreeRTOS基础知识

1.任务调度 1.1.任务调度简介 调度器就是使用相关的调度算法来决定当前需要执行的哪个任务FreeRTOS 一共支持三种任务调度方式&#xff1a; 抢占式调度&#xff1a;针对优先级不同的任务&#xff0c;每个任务都有一个优先级&#xff0c;优先级高的任务可以抢占优先级低的任务…

Webstorm + Egg.js 进行断点调试

Webstorm Egg.js 进行断点调试 1、在工具栏找到编辑配置&#xff0c;创建已运行Node.js 应用程序的调试配置 2、debug调试配置 3、调试 4、查看断点是否起效

python爬虫相关

目录 初识爬虫 爬虫分类 网络爬虫原理 爬虫基本工作流程 搜索引擎获取新网站的url robots.txt HTHP协议 Resquests模块 前言&#xff1a; 安装 普通请求 会话请求 response的常用方法 简单案例 aiohttp模块 使用前安装模块 具体案例 数据解析 re解析 bs4…

计算机竞赛 opencv python 深度学习垃圾图像分类系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; opencv python 深度学习垃圾分类系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;4分 这是一个较为新颖的竞…

WebStorm

WebStorm 介绍下载安装Activation 介绍 WebStorm是由JetBrains公司开发的一款集成开发环境&#xff08;IDE&#xff09;&#xff0c;主要专注于前端开发和Web开发。它旨在提供一套强大的工具和功能&#xff0c;以支持开发者在前端项目中编写、调试和维护代码。 JetBrains官网: …

keil下载程序具体过程2:硬件链路

引言 本篇博客将介绍keil下载程序的过程中&#xff0c;镜像文件将经过哪些硬件&#xff0c;以及简单的介绍他们之间的协议。 一、硬件连接 图1 硬件连接 将PC、jlink、芯片使用ubs线、swd线连接好之后&#xff0c;在PC上的keil软件中&#xff0c;我们选择对应的仿真器&#xf…

【算法题】螺旋矩阵II (求解n阶Z形矩阵)

一、问题的提出 n阶Z形矩阵的特点是按照之(Z)字形的方式排列元素。n阶Z形矩阵是指矩阵的大小为nn&#xff0c;其中n为正整数。 题目描述 一个 n 行 n 列的螺旋(Z形)矩阵如图1所示&#xff0c;观察并找出填数规律。 图1 7行7列和8行8列的螺旋(Z形)矩阵 现在给出矩阵大小 n&…

SDR硬件方案

以射频硬件为线索&#xff0c;梳理常见SDR&#xff08;软件无线电&#xff09;方案。SDR硬件位于天线和数字信号处理之间&#xff0c;负责把无线电信号数字化&#xff0c;交由主机或者嵌入式系统&#xff08;FPGA、DSP&#xff0c;MCU&#xff09;处理。SDR硬件一般包含射频和数…

题解:ABC276E - Round Trip

题解&#xff1a;ABC276E - Round Trip 题目 链接&#xff1a;Atcoder。 链接&#xff1a;洛谷。 难度 算法难度&#xff1a;普及。 思维难度&#xff1a;提高。 调码难度&#xff1a;提高。 综合评价&#xff1a;困难。 算法 bfs。 思路 从起点周围四个点中任选两…