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

React入门 - 03(初识 React 组件和 JSX)

news 2026/3/30 0:39:14

本章内容

目录

    • 1.初识 React 组件
    • 2.关于 JSX

继上一节的工程案例，我们这一节主要了解一下 React组件和 “JSX 语法”。

前置知识点：ES6模块化&继承

1.初识 React 组件

1、打开 src/index.js文件（项目的入口文件）内容，我们可以看见 import App from './App',这个App其实就是 React中的一个组件。

2、接着我们点开 App.js文件，详细看看里面怎么定义 App这个组件。下面的代码是最新一版 React的组件定义的写法

import logo from './logo.svg'; // 引入一个logo图片
import './App.css'; // 引入 App 的样式文件function App() {return (<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>);
}export default App;

3、为了更好的了解学习 React语法，我们将 App.js的代码改为之前版本的类组件写法。运行后效果是一样的。

// 1、引入 React
// 2、引入 Component，用于创建的组件继承于Component
import React, { Component } from "react"; import logo from './logo.svg'; // 3、引入一个logo图片
import './App.css'; // 4、引入 App 的样式文件// 5、使用 ES6 继承，创建一个 App继承于 Component
class App extends Component {// 6、给这个 App组件添加一个 render 方法render() {// 7、这个render 方法需要返回一个内容，内容多行的话可以使用 括号() 括起来return (// 8、这里返回的东西就是该组件想在界面展示的内容<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>)}
}
export default App

4、App组件定义好了后，回到入口文件 index.js中

import React from 'react'; // 1、引入 react
import ReactDOM from 'react-dom/client';// 2、引入 react-dom 
import './index.css'; // 3、引入样式文件。在react可以通过这样的方式进行 css和js的分离，然后通过“模块”的方式嵌入到 js中
import App from './App'; // 4、后边的 ./App 其实是 ./App.js 的缩写。后缀可以省略，因为“脚手架工具”本身就会去当前目录下优先寻找后缀为 .js 的 App 文件并引入
import reportWebVitals from './reportWebVitals';// 5、测量应用程序中的性能时，用于记录其结果// 6、通过 ReactDOM 的render 方法将 App 组件挂载到一个 DOM 节点上（这里是挂载到 id 为 root 的 DOM 节点上）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);reportWebVitals(); // 监测性能

5、上面有说 App组件在 index.js文件中被挂载在 id为 root的节点上，那有同学就会疑惑这个节点是哪里来的呢？这就要说到 public文件夹下的 index.html文件了。在这个 HTML模版中，有一个 id="root"的 div，它就是用于承载网页的所有内容容器。所有的这些内容是由 React生成的（例如上面生成的 App组件，然后通过 ReactDOM.render()将组件挂载到这个root节点上，这样网页就显示出相应的内容。）

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%PUBLIC_URL%/favicon.ico" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#000000" /><metaname="description"content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /><!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/--><link rel="manifest" href="%PUBLIC_URL%/manifest.json" /><!--Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" willwork correctly both with client-side routing and a non-root public URL.Learn how to configure a non-root public URL by running `npm run build`.--><title>React App</title></head><body><!-- 下边这行代码意思是：如果网页把这个 script 给禁掉了，那么需要给用户一个提示说，“你应该允许你的网页去解析 JavaScript”。这是一段容错的代码，可以使代码的“健壮性”更强。--><noscript>You need to enable JavaScript to run this app.</noscript><!--网页的所有内容都放在这个 id="root" 的div中--><div id="root"></div><!--This HTML file is a template.If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.To create a production bundle, use `npm run build` or `yarn build`.--></body>
</html>

6、关于 index.js 和 App.js 文件中为什么有 import React form 'react'这段代码，是否有其必要性？答案是肯定的！！！

  • 首先在 index.js文件中，因为我们需要挂载 App组件: ReactDOM.render(<App />, document.getElementById('root')),我们并没有直接写 App，而是使用像 HTML标签方式去使用 <App />,这是一种 “JSX 语法”，因此需要 import React from 'react'去引入 React,以便顺利的解析编译 JSX 语法。

  • 同理，在 App.js文件中，render方法中 return返回的也是 ”JSX语法“，因此也需要引入 React

// App.js 文件import React, { Component } from "react";
import logo from './logo.svg';
import './App.css';class App extends Component {render() {return ( // 这里返回的代码用了 ”JSX语法“<div className="App"><header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header></div>)}
}
export default App

2.关于 JSX

  • 从上面了解组件的过程中，我们知道了，在 React中，在 JS中写 ”HTML 标签“称之为”JSX语法“。

  • ”JSX语法“不仅允许HTML的所有标签，还可以用自己定义的标签

到此，本章内容结束！

相关文章：

React入门 - 03(初识 React 组件和 JSX)

本章内容 目录 1.初识 React 组件2.关于 JSX 继上一节的工程案例&#xff0c;我们这一节主要了解一下 React组件和 “JSX 语法”。 前置知识点&#xff1a;ES6模块化&继承 1.初识 React 组件 1、打开 src/index.js文件&#xff08;项目的入口文件&#xff09;内容&…...

编程日记 2024/1/14 1:52:42

华为OD机试 - 反射计数（Java JS Python C）

题目描述 给定一个包含 0 和 1 的二维矩阵。 给定一个初始位置和速度，一个物体从给定的初始位置出发，在给定的速度下进行移动，遇到矩阵的边缘则发生镜面发射。 无论物体经过 0 还是 1，都不影响其速度。 请计算并给出经过 t 时间单位后，物体经过 1 点的次数。 矩阵以左…...

编程日记 2024/1/14 1:51:42

Linux系统中使用systemctl命令控制软件的启动和关闭

Linux系统很多软件&#xff08;内置或第三方&#xff09;均支持使用systemctl命令控制&#xff1a;启动、停止、开机自启 能够被systemctl管理的软件&#xff0c;一般也称之为&#xff1a;服务 1.功能和语法 功能&#xff1a;控制系统服务的启动关闭等 语法&#xff1a;syst…...

编程日记 2024/1/14 1:50:41

2024年01月微软更新Bug 已解决 ！Explorer.EXE 提示：Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。

前倾概要 近期大量出现如上图问题&#xff0c;杀毒&#xff0c;系统急救箱都没反应&#xff0c;罪魁祸首就是微软更新&#xff01; 点击什么都是&#xff1a;Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。 但软件使用正常&#xff0c;还能通过建立…...

编程日记 2024/1/14 1:49:40

Qt/QML编程学习之心得：slider（34）

滑条slider&#xff0c;有时也成为进度条progressbar&#xff0c;在GUI界面中也是经常用到的。 import QtQuick 2.9 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.2ApplicationWindow {id:rootvisible: truewidth: 1920height: 720//title: qsTr("Hello World&q…...

编程日记 2024/1/14 1:44:35

使用metricbeat 监控多ES集群

背景 ES 本身自带 监控&#xff0c;属于xpack 中的内容&#xff0c;为商业版&#xff0c;需要收费&#xff1b; 并且 monitor 功能必须要在security开启后才能使用&#xff0c;还有就是集群监控自己&#xff0c;将采集到的性能数据保存到本集群&#xff0c;这是一个比较差的设…...

编程日记 2024/1/14 1:41:31

阿里云服务器+宝塔 （尝试部署一个最简单的静态页面）

1. 免费白嫖一个阿里服务器 进入网址&#xff1a;服务器购买地址 选择预装宝塔面板 购买完成后前往控制台 查看当前实例 设置或修改密码 设置用户名和密码 2. 远程连接到服务器 2.1. 使用Workbench连接 输入用户名和密码连接成功页面如下&#xff1a; 2.2. 使…...

编程日记 2024/1/14 1:40:31

每日一题——LeetCode1160.拼写单词

方法一 个人方法&#xff1a; 先统计chars里每个字符出现的次数&#xff0c;再对words里每个字符串统计每个字符出现的字符&#xff0c;当&#xff1a; 1、字符串里出现chars里没有的字符 2、字符串里某个字符出现的次数大于该字符在chars里出现的次数 以上两种情况则不符合…...

编程日记 2024/1/14 1:39:30

物联网协议Coap之Core和NetWork简介

目录 前言 一、Coap的Core包 1、Coap对象 2、Message对象 3、Request对象 4、Response对象 二、Coap的NetWork调试 1、UDP运行模式 2、Network消息接收 3、Sender线程发送数据 三、总结 前言 在之前的博文中&#xff0c;对Californium中Coap的实现进行了简要的介绍&a…...

编程日记 2024/1/14 1:38:29

Java SE入门及基础（10）

switch选择结构 1. 概念 switch 表示开关的意思&#xff0c;为了帮助理解&#xff0c;下面以线路为例&#xff0c;进行解释说明 上图中表示一条带有多个开关的线路&#xff0c;当开关打开时&#xff0c;该开关所控制的灯即被点亮。 2. 语法规则 switch ( 表达式 ){ //…...

编程日记 2024/1/14 1:36:27

Docker五部曲之二：Docker引擎

文章目录 前言Docker引擎镜像管理容器管理容器运行前台运行和后台运行容器识别重启策略清除 容器日志 数据管理卷挂载创建和管理卷启动带有卷的容器通过Docker Compose使用卷使用只读卷备份、恢复和迁移卷 绑定挂载用绑定挂载启动一个容器Docker Compose使用绑定挂载使用只读绑…...

编程日记 2024/1/14 1:35:26

简单说一下原型与原型链

文章目录 原型原型链 原型 简单来说原型就像是对象的 “爸爸”&#xff0c;每个对象都有一个原型。当你创建一个对象时&#xff0c;这个对象就会有一个内部链接&#xff0c;指向它的原型。你可以把原型想象成对象的一种模板&#xff0c;对象可以从中继承属性和方法。 举个例子…...

编程日记 2024/1/14 1:31:21

11Spring IoC注解式开发(上)(元注解/声明Bean的注解/注解的使用/负责实例化Bean的注解)

注解的存在主要是为了简化XML的配置。Spring6倡导全注解开发。 注解开发的优点:提高开发效率 注解开发的缺点:在一定程度上违背了OCP原则&#xff0c;使用注解的开发的前提是需求比较固定&#xff0c;变动较小。 1 注解的注解称为元注解 自定义一个注解: package com.sunspl…...

编程日记 2024/1/14 1:30:20

k8s 部署Jenkins项目

1、基于helm 部署jenkins 要求&#xff1a;当前集群配置了storageClass&#xff0c;并已指定默认的storageClass&#xff0c;一般情况下&#xff0c;创建的storageClass即为默认类 指定默认storageClass的方式 # 如果是新创建默认类&#xff1a; apiVersion: storage.k8s.io/v1…...

编程日记 2024/1/14 1:28:17

#每日一题#力扣#2085.统计出现过一次的公共字符串

给你两个字符串数组 words1 和 words2 &#xff0c;请你返回在两个字符串数组中 都恰好出现一次 的字符串的数目。 示例 1&#xff1a; 输入&#xff1a;words1 [“leetcode”,“is”,“amazing”,“as”,“is”], words2 [“amazing”,“leetcode”,“is”] 输出&#xff1a;…...

编程日记 2024/1/14 1:26:15

Python系列（1）：简洁优雅，功能强大的编程语言

Python&#xff1a;简洁优雅&#xff0c;功能强大的编程语言 一、Python的特点二、Python的应用领域 在当今的编程世界中&#xff0c;Python已经成为了一种无处不在的语言。它不仅简单易学&#xff0c;而且功能强大&#xff0c;支持多种编程范式&#xff0c;包括面向对象编程、…...

编程日记 2024/1/14 1:24:13

HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用 arkTS弹出框回调、监听

HarmonyOS应用开发学习笔记 arkTS自定义弹窗&#xff08;CustomDialog&#xff09;简单使用 1、CustomDialog装饰器用于装饰自定义弹框 1、定义弹出框 CustomDialog CustomDialog export struct CustomDialogExample {controller: CustomDialogControllerbuild() {Column() {…...

编程日记 2024/1/14 1:23:12

RabbitMQ（六）消息的持久化

目录 一、简介1.1 定义1.2 消息丢失的场景 二、交换机的持久化方式一&#xff1a;直接 new方式二&#xff1a;channel.exchangeDeclare()方式三&#xff1a;ExchangeBuilder【推荐】 三、队列的持久化方式一&#xff1a;直接 new方式二&#xff1a;channel.queueDeclare()方式三…...

编程日记 2024/1/14 1:22:11

mybatisplus配置

一、新建项目&#xff1a;com.saas.plusdemo 二、配置pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sch…...

编程日记 2024/1/14 1:20:09

node-sass@4.7.2 postinstall: `node scripts/build.js`

Can‘t find Python executable “D:\Python36\python.EXE“, you can set the PYTHON env variable.-CSDN博客 gyp ERR! build error gyp ERR! stack Error: C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe failed with exit code: 1 gyp ERR! stack at Chil…...

编程日记 2024/1/14 1:17:06

从Word2Vec到BERT：前馈网络在NLP词嵌入进化史中扮演了什么角色？

从Word2Vec到BERT&#xff1a;前馈网络如何重塑NLP词嵌入的技术基因 在自然语言处理&#xff08;NLP&#xff09;的发展历程中&#xff0c;词嵌入技术的进化犹如一场静默的革命。当我们回溯这段历史时会发现&#xff0c;前馈神经网络&#xff08;Feedforward Neural Network&am…...

编程新知 2026/3/30 0:35:43

3步实现Axure RP本地化界面优化：开源工具助力中文设计环境构建

3步实现Axure RP本地化界面优化&#xff1a;开源工具助力中文设计环境构建 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包&#xff0c;不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-c…...

编程新知 2026/3/30 0:17:34

LlamaIndex中文文档全解析：从安装到实战RAG系统的保姆级指南

LlamaIndex中文文档全解析&#xff1a;从安装到实战RAG系统的保姆级指南 在人工智能技术快速迭代的今天&#xff0c;如何让大型语言模型(LLM)真正理解并处理私有数据成为开发者面临的核心挑战。LlamaIndex作为专为上下文增强设计的框架&#xff0c;正在改变我们构建智能应用的方…...

编程新知 2026/3/29 23:57:24

颠覆性AI语音转换技术深度解析：Retrieval-based-Voice-Conversion-WebUI的5大创新特性揭秘

颠覆性AI语音转换技术深度解析&#xff1a;Retrieval-based-Voice-Conversion-WebUI的5大创新特性揭秘 【免费下载链接】Retrieval-based-Voice-Conversion-WebUI 语音数据小于等于10分钟也可以用来训练一个优秀的变声模型&#xff01; 项目地址: https://gitcode.com/GitHub…...

编程新知 2026/3/29 23:41:19

5分钟搞定！用PySide2+Python快速搭建串口助手（附完整源码）

5分钟搞定&#xff01;用PySide2Python快速搭建串口助手&#xff08;附完整源码&#xff09; 1. 为什么选择PySide2开发串口工具&#xff1f; 在嵌入式开发和物联网项目中&#xff0c;串口调试工具就像工程师的"瑞士军刀"。传统方案如C/QT开发周期长&#xff0c;而Py…...

编程新知 2026/3/29 23:19:09

从论文到代码：手把手复现OpenPose手部检测（CMU开源模型），并教你用MediaPipe做个对比测试

从论文到实践&#xff1a;OpenPose与MediaPipe手部关键点检测深度评测 在计算机视觉领域&#xff0c;手部关键点检测技术正逐渐成为人机交互、增强现实和虚拟现实应用的核心组件。不同于面部或全身姿态估计&#xff0c;手部检测需要处理更精细的动作和更复杂的遮挡情况。本文将…...

编程新知 2026/3/29 23:11:08

保姆级教程：在Mac/Linux上为RuoYi项目永久修复SQL Server的SSL连接问题

保姆级教程&#xff1a;在Mac/Linux上为RuoYi项目永久修复SQL Server的SSL连接问题 当你在Mac或Linux系统上使用RuoYi框架连接SQL Server数据库时&#xff0c;可能会遇到令人头疼的SSL协议错误。这些错误通常表现为连接池初始化失败或安全连接无法建立&#xff0c;核心问题往往…...

编程新知 2026/3/29 22:16:42

从立创EDA到Cadence Allegro：封装转换的完整指南

1. 为什么需要封装转换&#xff1f; 最近在帮朋友做一个硬件项目&#xff0c;发现他用立创EDA设计的电路板需要转到Cadence Allegro平台生产。这就像两个说不同语言的人要合作&#xff0c;必须找个翻译——封装转换就是这个翻译过程。立创EDA和Allegro虽然都是PCB设计工具&…...

编程新知 2026/3/29 22:08:41

Notion-Enhancer模块注册表：扩展发现、加载和管理的完整机制

Notion-Enhancer模块注册表&#xff1a;扩展发现、加载和管理的完整机制 【免费下载链接】notion-enhancer an enhancer/customiser for the all-in-one productivity workspace notion.so 项目地址: https://gitcode.com/gh_mirrors/no/notion-enhancer Notion-Enhance…...

编程新知 2026/3/29 21:36:27

Qwen2.5-7B-Instruct升级体验：从1.5B到7B，感受旗舰模型的能力跃升

Qwen2.5-7B-Instruct升级体验&#xff1a;从1.5B到7B&#xff0c;感受旗舰模型的能力跃升 1. 引言&#xff1a;从轻量到旗舰的进化之路 作为长期关注开源大模型的技术从业者&#xff0c;我见证了Qwen系列模型的快速迭代。从最初的1.5B轻量版到如今的7B旗舰版&#xff0c;Qwen…...

编程新知 2026/3/29 19:03:34