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

React从基础入门到高级实战：React 基础入门 - JSX与组件基础

article 2025/8/27 7:15:10

JSX 与组件基础

引言

在 React 开发中，JSX 和 组件 是两个最基础且核心的概念。JSX 是一种独特的语法，让你在 JavaScript 中编写类似 HTML 的代码，而组件则是 React 应用的基本构建块，帮助你将复杂的界面拆分为可复用的模块。本文将带你深入理解 JSX 的语法规则，并学习如何创建和使用 React 组件。通过本文，你将能够编写自己的组件，为后续的 React 开发打下坚实基础。

1. 什么是 JSX？

JSX（JavaScript XML）是 JavaScript 的语法扩展，允许你在代码中直接编写类似 HTML 的标签结构。它让 React 组件的 UI 编写变得直观且易读。

通俗比喻：
想象 JSX 是 JavaScript 的“画笔”，你可以用熟悉的 HTML 标签“画”出界面，而 React 会把这些“画”变成真实的网页元素。

基本示例：

const element = <h1>Hello, React!</h1>;

这段 JSX 会在页面渲染一个 <h1> 标题。

2. JSX 语法规则

尽管 JSX 看起来像 HTML，但它有自己的规则：

  • 标签必须闭合：所有标签都需要闭合，比如 <img> 要写成 <img />。
  • 属性命名：使用 camelCase，例如 className（代替 HTML 的 class）、onClick（代替 onclick）。
  • 嵌入表达式：用 {} 将 JavaScript 表达式嵌入 JSX，比如 {name} 或 {1 + 1}。
  • 不支持 if-else：不能直接在 JSX 中写 if-else，但可以用三元运算符或逻辑运算符。

示例：

const name = "React";
const element = <p className="greeting">Hello, {name}!</p>;

渲染结果：<p> 标签显示 “Hello, React!”，并应用 greeting 类样式。

3. JSX 中的表达式

JSX 支持在 {} 中嵌入 JavaScript 表达式，比如变量、函数调用或运算。

示例：

const user = { firstName: 'Jane', lastName: 'Doe' };
const fullName = () => user.firstName + ' ' + user.lastName;const element = <p>欢迎, {fullName()}!</p>;

渲染结果：“欢迎, Jane Doe!”。

注意：

  • {} 内只能放表达式，不能放语句（比如 if 或 for）。
  • 可以嵌入数组，React 会自动展平渲染。
4. React 组件基础

React 应用由多个组件组成，每个组件负责渲染一小块 UI，可以组合成复杂界面。组件分为函数组件和类组件，现代 React 更推荐使用函数组件。

4.1 函数组件

函数组件是一个返回 JSX 的 JavaScript 函数。

示例：

function Welcome(props) {return <h1>Hello, {props.name}!</h1>;
}
  • props：父组件传递的数据对象。
  • 组件名需大写开头，如 Welcome。
4.2 类组件（了解即可）

类组件使用 ES6 类语法，包含 render 方法返回 JSX。

示例：

class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}

趋势：有了 Hooks，函数组件更简洁，已成为主流。

5. 组件的创建与复用

组件可以通过嵌套和复用构建复杂 UI。父组件通过 props 向子组件传递数据。

示例：

function App() {return (<div><Welcome name="Alice" /><Welcome name="Bob" /></div>);
}function Welcome(props) {return <p>欢迎, {props.name}!</p>;
}

渲染结果：显示两条欢迎消息，分别是 “欢迎, Alice!” 和 “欢迎, Bob!”。

6. 实践：用户卡片组件

让我们通过一个简单的 UserCard 组件实践 JSX 和组件的使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React JSX 与组件基础</title><script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/babel-standalone@6/babel.min.js"></script>
</head>
<body><div id="root"></div><script type="text/babel">function UserCard(props) {return (<div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}><h2>{props.name}</h2><p>年龄: {props.age}</p><p>职业: {props.job}</p></div>);}function App() {return (<div><UserCard name="Alice" age={25} job="工程师" /><UserCard name="Bob" age={30} job="设计师" /></div>);}ReactDOM.render(<App />, document.getElementById('root'));</script>
</body>
</html>

说明：

  • UserCard 组件接收 name、age 和 job 三个 props，渲染用户信息。
  • App 组件嵌套两个 UserCard，展示不同用户。
  • 打开浏览器开发者工具，粘贴以上代码到 HTML 文件运行，即可看到效果。
7. 总结

本文介绍了 JSX 的语法规则和 React 组件的基本创建与使用。通过实践，你已经能编写简单的组件并组合它们。掌握这些基础将帮助你在 React 开发中更进一步。

有任何疑问，欢迎交流，一起进步！

相关文章：

React从基础入门到高级实战：React 基础入门 - JSX与组件基础

JSX 与组件基础 引言 在 React 开发中&#xff0c;JSX 和 组件 是两个最基础且核心的概念。JSX 是一种独特的语法&#xff0c;让你在 JavaScript 中编写类似 HTML 的代码&#xff0c;而组件则是 React 应用的基本构建块&#xff0c;帮助你将复杂的界面拆分为可复用的模块。本…...

编程日记 2025/8/17 8:32:17

房贷利率计算前端小程序

利率计算前端小程序 视图效果展示如下&#xff1a; 在这里插入代码片 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0&qu…...

编程日记 2025/8/24 14:46:08

在Visual Studio中进行cuda编程

首先下载与CUDA Toolkit匹配的Visual Studio版本 比如我的CUDA Toolkit版本是12.6&#xff0c;那么我可以使用2022的Visual Studio。 查看Toolkit版本 nvcc -V 配置 ok&#xff0c;让我们开始Visual Studio的nvcc编译器配置 参考例文https://github.com/apachecn/succinc…...

编程日记 2025/8/24 23:58:11

Fastrace：Rust 中分布式追踪的现代化方案

原文链接&#xff1a;Fastrace: A Modern Approach to Distributed Tracing in Rust | FastLabs / Blog 摘要 在微服务架构中&#xff0c;分布式追踪对于理解应用程序的行为至关重要。虽然 tokio-rs/tracing 在 Rust 中被广泛使用&#xff0c;但它存在一些显著的挑战&#xf…...

编程日记 2025/8/24 11:49:51

Linux云计算训练营笔记day13【CentOS 7 find、vim、vimdiff、ping、wget、curl、RPM、YUM】

Linux云计算训练营笔记day13[CentOS 7 find、vim、vimdiff、ping、wget、curl、RPM、YUM]] 目录 Linux云计算训练营笔记day13[CentOS 7 find、vim、vimdiff、ping、wget、curl、RPM、YUM]]1.find练习2.vim高级使用2.1 命令模式:2.2 插入模式:2.3 末行模式: 3. vimdiff4. ping5.…...

编程日记 2025/8/24 0:21:14

黑马Java基础笔记-15

Set 无索引&#xff0c;无序&#xff0c;不可重复 HashSet object类中默认hashCode的方法是根据地址值。 如果集合中存储的是自定义对象&#xff0c;必须要重写hashCode和equals方法。 底层原理 jdk8以前&#xff1a;数组 链表 jdk8及以后&#xff1a;数组 链表 红黑…...

编程日记 2025/8/24 2:32:28

Elasticsearch简单集成java框架方式。

Elasticsearch 在 Java 中最常用的客户端是什么&#xff1f;如何初始化一个 RestHighLevelClient&#xff1f;如何用 Spring Boot 快速集成 Elasticsearch&#xff1f;Spring Data Elasticsearch 如何定义实体类与索引的映射&#xff1f; 最常用的 Java 客户端 目前官方推荐使用…...

编程日记 2025/6/6 22:43:46

【RAG文档切割】从基础拆分到语义分块实战指南

目录 &#x1f31f; 前言&#x1f3d7;️ 技术背景与价值&#x1fa79; 当前技术痛点&#x1f6e0;️ 解决方案概述&#x1f465; 目标读者说明 &#x1f9e0; 一、技术原理剖析&#x1f4ca; 分块流程架构图&#x1f4a1; 核心分块策略&#x1f527; 关键技术模块 &#x1f6e…...

编程日记 2025/7/1 5:25:51

stream数据流

核心知识点&#xff1a;数据流&#xff08;Stream Data Flow&#xff09; 1. 通俗易懂的解释 想象一下你正在用花园里的水管浇花。水管里的水不是一次性全部倒出来的&#xff0c;而是持续不断地从水龙头流出&#xff0c;经过水管&#xff0c;最终从喷头喷洒到花上。在这个过程…...

编程日记 2025/8/17 2:35:21

利用 XML 外部实体注入（XXE）读取文件和探测内部网络

利用 XML 外部实体注入&#xff08;XXE&#xff09;读取文件和探测内部网络 引言 XML 外部实体注入&#xff08;XXE&#xff09;是一种常见的安全漏洞&#xff0c;攻击者可以通过这种漏洞读取服务器上的文件或探测内部网络。本文将通过一个实际的 Python 代码示例&#xff0c…...

编程日记 2025/6/12 22:34:57

软件设计师“排序算法”真题考点分析——求三连

一、考点分值占比与趋势分析 综合知识题分值统计表 年份考题数量总分值分值占比考察重点2018222.67%时间复杂度/稳定性判断2019334.00%算法特性对比分析2020222.67%空间复杂度要求2021111.33%算法稳定性判断2022334.00%综合特性应用2023222.67%时间复杂度计算2024222.67%分治…...

编程日记 2025/8/24 21:52:56

Visual Studio 2019/2022：当前不会命中断点，还没有为该文档加载任何符号。

1、打开调试的模块窗口&#xff0c;该窗口一定要在调试状态下才会显示。 vs2019打开调试的模块窗口 2、Visual Studio 2019提示未使用调试信息生成二进制文件 未使用调试信息生成二进制文件 3、然后到debug目录下看下确实未生成CoreCms.Net.Web.WebApi.pdb文件。 那下面的…...

编程日记 2025/8/21 2:07:34

vue--ofd/pdf预览实现

背景 实现预览ofd/pdf超链接功能 业务实现 pdf的预览 实现方式&#xff1a; 直接使用 <iframe :src"${url}#navpanes0&toolbar0" /> 实现pdf的预览。 navpanes0 隐藏侧边栏toolbar0 隐藏顶部工具栏 使用pdf.js&#xff0c;代码先行&#xff1a; <tem…...

编程日记 2025/8/10 7:12:55

Python 爬虫之requests 模块的应用

requests 是用 python 语言编写的一个开源的HTTP库&#xff0c;可以通过 requests 库编写 python 代码发送网络请求&#xff0c;其简单易用&#xff0c;是编写爬虫程序时必知必会的一个模块。 requests 模块的作用 发送网络请求&#xff0c;获取响应数据。 中文文档&#xf…...

编程日记 2025/8/10 7:12:53

【MySQL】CRUD

CRUD 简介 CRUD是对数据库中的记录进行基本的增删改查操作 Create&#xff08;创建&#xff09;Retrieve&#xff08;读取&#xff09;Update&#xff08;更新&#xff09;Delete&#xff08;删除&#xff09; 一、新增&#xff08;Create&#xff09; 语法&#xff1a; I…...

编程日记 2025/8/10 7:12:45

Spring Boot微服务架构（三）：Spring Initializr创建CRM项目

使用Spring Initializr创建CRM项目 一、创建项目前的准备 访问Spring Initializr网站&#xff1a; 打开浏览器访问 https://start.spring.io/或者直接使用IDE&#xff08;如IntelliJ IDEA或Eclipse&#xff09;内置的Spring Initializr功能 项目基本信息配置&#xff1a; Proj…...

编程日记 2025/8/13 3:13:11

【笔记】PyCharm 中创建Poetry解释器

#工作记录 在使用 PyCharm 进行 Python 项目开发时&#xff0c;为项目配置合适的 Python 解释器至关重要。Poetry 作为一款强大的依赖管理和打包工具&#xff0c;能帮助我们更便捷地管理项目的依赖项与虚拟环境。下面将详细记录在 PyCharm 中创建 Poetry 解释器的步骤。 前提条…...

编程日记 2025/8/19 20:30:12

SDL2常用函数SDL事件处理:SDL_Event|SDL_PollEvent

SDL_Event SDL_Event是个联合体&#xff0c;是SDL中所有事件处理的核心。 SDL_Event是SDL中使用的所有事件结构的并集。 只要知道了那个事件类型对应SDL_Event结构的那个成员&#xff0c;使用它是一个简单的事情。 下表罗列了所有SDL_Event的所有成员和对应类型。 Uint32typ…...

编程日记 2025/8/11 7:02:32

RAID技术全解析：从基础到实战应用指南

一、RAID核心概念与级别对比 1. RAID的核心目标 数据冗余&#xff1a;通过镜像或校验机制防止数据丢失。 性能提升&#xff1a;利用条带化技术实现并行读写。 存储扩展&#xff1a;聚合多块磁盘容量&#xff0c;突破单盘限制。 2. 常见RAID级别对比 RAID级别最小磁盘数容…...

编程日记 2025/6/5 15:55:13

word通配符表

目录 一、word查找栏代码&通配符一览表二、word替换栏代码&通配符一览表三、参考文献 一、word查找栏代码&通配符一览表 序号清除使用通配符复选框勾选使用通配符复选框特殊字符代码特殊字符代码or通配符1任意单个字符^?一个任意字符?2任意数字^#任意数字&#…...

编程日记 2025/6/5 22:24:15

python中的numpy（数组）

&#xff08;0&#xff09;numpy介绍 NumPy是Python中用于科学计算的基础库&#xff0c;提供高效的多维数组对象ndarray&#xff0c;支持向量化运算&#xff0c;能大幅提高数值计算效率。它集成了大量数学函数&#xff08;如线性代数、傅里叶变换等&#xff09;&#xff0c;可…...

编程日记 2025/8/17 8:27:55

C++ 正则表达式简介

1. 正则表达式简介 正则表达式&#xff08;Regular Expression&#xff0c;简称Regex&#xff09;是一种用于匹配和处理文本的强大工具。它通过特定的符号组合形成匹配规则&#xff0c;常用于表单验证、文本搜索与替换、数据清洗等场景。 C11标准引入了 <regex> 头文件…...

编程日记 2025/7/13 11:42:14

iOS知识复习

block原理 OC block 是个结构体&#xff0c;内部有个一个结构体成员 专门保存 捕捉对象 Swift闭包 是个函数&#xff0c;捕获了全局上下文的常量或者变量 修改数组存储的内容&#xff0c;不需要加_block,修改数组对象本身时需要 weak原理 Weak 哈希表 &#xff08;散列表&a…...

编程日记 2025/8/6 21:21:43

rce命令执行原理及靶场实战（详细）

2. 原理 在根源上应用系统从设计上要给用户提供一个指定的远程命令操作的接口。漏洞主要出现在常见的路由器、防火墙、入侵检测等设备的web管理界面上。在管理界面提供了一个ping服务。提交后&#xff0c;系统对该IP进行ping&#xff0c;并且返回结果。如果后台服务器并没有对…...

编程日记 2025/8/27 6:16:57

Fuzz 模糊测试篇JS 算法口令隐藏参数盲 Payload未知文件目录

1 、 Fuzz 是一种基于黑盒的自动化软件模糊测试技术 , 简单的说一种懒惰且暴力的技术融合了常见 的以及精心构建的数据文本进行网站、软件安全性测试。 2 、 Fuzz 的核心思想 : 口令 Fuzz( 弱口令 ) 目录 Fuzz( 漏洞点 ) 参数 Fuzz( 利用参数 ) PayloadFuzz(Bypass)…...

编程日记 2025/8/22 8:29:38

展示了一个三轴（X, Y, Z）坐标系！

等轴测投影”&#xff08;isometric projection&#xff09;风格的手绘风格三维图&#xff0c;即三条坐标轴&#xff08;x₁, x₂, x₃&#xff09;看起来彼此垂直、等角分布&#xff08;通常是 120 夹角&#xff09;&#xff0c;它是常见于教材和数学书籍的 “假三维”表示法。…...

编程日记 2025/8/17 17:04:46

【b站计算机拓荒者】【2025】微信小程序开发教程 - chapter1 初识小程序 - 3项目目录结构4快速上手

3 项目目录结构 3.1 项目目录结构 3.1.1 目录介绍 # 1 项目主配置文件&#xff0c;在项目根路径下&#xff0c;控制整个项目的-app.js # 小程序入口文件&#xff0c;小程序启动&#xff0c;会执行此js-app.json # 小程序全局配置文件&#xff0c;配置小程序导航栏颜色等信息…...

编程日记 2025/8/16 1:32:45

LLM Tuning

Lora-Tuning 什么是Lora微调&#xff1f; LoRA&#xff08;Low-Rank Adaptation&#xff09; 是一种参数高效微调方法&#xff08;PEFT, Parameter-Efficient Fine-Tuning&#xff09;&#xff0c;它通过引入低秩矩阵到预训练模型的权重变换中&#xff0c;实现无需大规模修改…...

编程日记 2025/8/11 12:57:38

云计算与大数据进阶 | 28、存储系统如何突破容量天花板？可扩展架构的核心技术与实践—— 分布式、弹性扩展、高可用的底层逻辑（下）

在上篇中&#xff0c;我们围绕存储系统可扩展架构详细探讨了基础技术原理与典型实践。然而&#xff0c;在实际应用场景中&#xff0c;存储系统面临的挑战远不止于此。随着数据规模呈指数级增长&#xff0c;业务需求日益复杂多变&#xff0c;存储系统还需不断优化升级&#xff0…...

编程日记 2025/8/27 6:15:31

SQL每日一练（3）

前言&#xff1a; 难得看到了套好题&#xff0c;没考我&#xff0c;呜呜&#xff0c;今日第三更&#xff01; 原始表&#xff08;ai生成&#xff09; 1. 销售表&#xff08;sales&#xff09; 用途&#xff1a;记录每笔销售的产品 ID 及金额。 product_id&#xff08;产品 …...

编程日记 2025/6/30 14:25:34