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

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

news 文章来源：https://blog.csdn.net/qq_37600506/article/details/135479664 2025/5/9 11:26:20

本章内容

目录

    • 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

pyDAL一个python的ORM(9) pyDAL的嵌套查询

假设有以下两个表&#xff1a; db.define_table(person,Field(id, string), Field(‘name, string), Field(‘dept, string)) db.define_table(things,Field(id, string), Field(‘name, string), Field(‘owner, string)) 一、使用belongs进行嵌套查询 我们查询要求&#…...

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

融资项目——EasyExcel操作Excel文件

EasyExcel是Alibaba集团开源的EasyExcel技术&#xff0c;该技术是针对Apache POI技术的封装和优化&#xff0c;主要解决了POI技术的耗内存问题&#xff0c;并且提供了较好的API使用。不需要大量的代码就可以实现excel的操作功能。 1.EasyExcel的配置 首先引入依赖&#xff0c;…...

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

OAI openair3-NAS-UE-EMM代码解读（续）

文件路径openair3/NAS/UE/EMM/emm_main.c 714行之后 1.名称&#xff1a;emm_min_get_registered_plmn&#xff08;&#xff09; 获取当前注册PLMN的标识&#xff1b; 输入&#xff1a;format&#xff1a;PLMN标识符的字符串表示的请求格式&#xff1b; 输出&#xf…...

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

SQL-条件查询与聚合函数的使用

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…...

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

Qt移植曲线显示

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、确定文件组成&#xff1f;1. 复制新文件2.新建ui窗口 二、实际操作2.1 新建Ui窗口&#xff0c;要添加带.h的否则跳转错误2.2添加文件到.h2.3 添加文件cpp 三…...

编程日记 2024/1/14 1:07:57

基于springboot生鲜交易系统源码和论文

首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包括软件架构模式、整体功能模块、数据库设计。本项…...

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

vue中鼠标拖动触发滚动条的移动

前言 在做后端管理系统中&#xff0c;像弹窗或大的表单时&#xff0c;经常会有滚动条的出现&#xff0c;但有些时候如流程、图片等操作时&#xff0c;仅仅使用鼠标拖动滚动条操作不太方便&#xff0c;如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了 功能设计 如…...

编程日记 2024/1/14 1:05:55

1、理解Transformer：革新自然语言处理的模型

目录 一、论文题目 二、背景与动机 三、卖点与创新 四、解决的问题 五、具体实现细节 0. Transformer 架构的主要组件 1. 注意力、自注意力&#xff08;Self-Attention&#xff09;到多头注意力&#xff08;Multi-Head Attention&#xff09; 注意力到底是做什么的&…...

编程日记 2024/1/14 1:03:54

Acwing847 图中点的层次（bfs）

这道题用的是bfs&#xff0c;一开始用了dfs搜出了答案为4 题目 给定一个 n个点 m 条边的有向图&#xff0c;图中可能存在重边和自环。 所有边的长度都是 1&#xff0c;点的编号为 1∼n。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果从 1 号点无法走到 n 号点&…...

编程日记 2024/1/14 1:02:53

windows11通过虚拟机安装Ubuntu20.04

VMware 分为 VMware Workstation Pro 和 VMware Workstation Player, Pro体验期后收费&#xff0c;Player则免费。player 早期不能创建虚拟机&#xff0c;只能Pro创建好后给Player运行&#xff0c;而现在player早已加入创建虚拟机功能&#xff0c;所以使用体验上两者相差不大&a…...

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