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

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

news 2025/7/7 15:36:52

本章内容

目录

    • 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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/7/7 6:04:11

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2025/7/4 12:08:14

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/7/6 11:49:09

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/7/5 23:47:43

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/7/4 19:02:29

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/7/6 14:00:15

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/7/4 15:34:29