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

本章内容

目录

    • 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文件中被挂载在 idroot的节点上,那有同学就会疑惑这个节点是哪里来的呢?这就要说到 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的所有标签,还可以用自己定义的标签

到此,本章内容结束!

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

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

相关文章

如何使用WinDiff浏览和对比Windows源代码中的符号和系统调用信息

关于WinDiff WinDiff是一款功能强大的Windows二进制源代码安全分析与调试工具&#xff0c;该工具完全开源&#xff0c;基于Web实现其功能&#xff0c;可以帮助广大研究人员在不同版本的操作系统中浏览和对比Microsoft Windows二进制文件的符号、类型和系统调用信息。其中&…

详解HTTPS加密工作过程

&#x1f697;&#x1f697;&#x1f697;今天给大家分享的是HTTPS加密的工作过程。 清风的CSDN博客 &#x1f6e9;️&#x1f6e9;️&#x1f6e9;️希望我的文章能对你有所帮助&#xff0c;有不足的地方还请各位看官多多指教&#xff0c;大家一起学习交流&#xff01; ✈️✈…

PDCA/绩效管理活动

现代绩效管理理论认为&#xff0c;绩效管理活动是一个连续的过程&#xff0c;是指管理者用来确保自己下属员工的工作行为和工作产出与组织的目标保持一致的手段及过程。人们通常用一个循环过程来描述绩效管理的整个过程。我们认为&#xff0c;一个组织的员工绩效管理活动由四个…

基于博弈树的开源五子棋AI教程[6 置换表]

文章目录 引子定义实现讨论与尾记 引子 置换表是记忆化搜索技术的应用&#xff0c;置换表保存了某一盘面的搜索结果。当博弈树搜索遇到相同的局面时可以调用这些信息来减少重复搜索。那么如何设计一个置换表的节点就显得比较重要&#xff0c;本文在经典的置换表节点增加一个显…

NUS CS1101S:SICP JavaScript 描述:一、使用函数构建抽象

原文&#xff1a;1 Building Abstractions with Functions 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 心灵的行为&#xff0c;其中它对简单的想法施加其力量&#xff0c;主要有以下三种&#xff1a;1.将几个简单的想法组合成一个复合的想法&#xff0c;从而形成所…

Scipy 高级教程——稀疏矩阵

Python Scipy 高级教程&#xff1a;稀疏矩阵 Scipy 提供了处理稀疏矩阵的工具&#xff0c;这对于处理大规模数据集中的稀疏数据是非常有效的。本篇博客将深入介绍 Scipy 中的稀疏矩阵功能&#xff0c;并通过实例演示如何应用这些工具。 1. 稀疏矩阵的表示 在 Scipy 中&#…

【重点】【DP】300. 最长递增子序列

题目 更好的方法是耐心排序&#xff0c;参见《算法小抄》的内容&#xff01;&#xff01;&#xff01; 法1&#xff1a;DP 基础解法必须掌握&#xff01;&#xff01;&#xff01; class Solution {public int lengthOfLIS(int[] nums) {if (nums null || nums.length 0) …

【深度学习】RTX2060 2080如何安装CUDA,如何使用onnx runtime

文章目录 如何在Python环境下配置RTX 2060与CUDA 101. 安装最新的NVIDIA显卡驱动2. 使用conda安装CUDA Toolkit3. 验证onnxruntime与CUDA版本4. 验证ONNX需求版本5. 安装ONNX与onnxruntime6. 编写ONNX推理代码 如何在Python环境下配置RTX 2060与CUDA 10 RTX 2060虽然是一款较早…

等保测评是什么

等保测评的全称是信息安全等级保护测评&#xff0c;是经公安部认证的具有资质的测评机构&#xff0c;依据国家信息安全等级保护规范规定&#xff0c;受有关单位委托&#xff0c;按照有关管理规范和技术标准&#xff0c;对信息系统安全等级保护状况进行检测评估的活动。 《信息…

Ps:何时需要转换为智能对象

智能对象 Smart Objects提供了广泛的灵活性和控制能力&#xff0c;特别是在处理复杂的合成、重复元素或需要非破坏性编辑的项目中。 ◆ ◆ ◆ 何时需要转换为智能对象 1、当需要对图像进行缩放、旋转等变换时。 涉及到的 Photoshop 命令包括&#xff1a;变换、自由变换、操控…

windows下如何搭建Yapi环境

今天使用YApi时发现原网址无法访问。这下只能本地部署了&#xff08;官方文档&#xff09;。 第一步&#xff1a;安装node.js 获取资源 nodejs: https://nodejs.org/en/downloadLinux安装yum install -y nodejs查看node版本node -v查看npm版本npm -v第二步&#xff1a;安装mo…

【论文阅读笔记】MobileSal: Extremely Efficient RGB-D Salient Object Detection

1.介绍 MobileSal: Extremely Efficient RGB-D Salient Object Detection MobileSal&#xff1a;极其高效的RGB-D显著对象检测 2021年发表在 IEEE Transactions on Pattern Analysis and Machine Intelligence。 Paper Code 2.摘要 神经网络的高计算成本阻碍了RGB-D显着对象…

Pandas实战100例 | 案例 31: 转换为分类数据

案例 31: 转换为分类数据 知识点讲解 在处理包含文本数据的 DataFrame 时&#xff0c;将文本列转换为分类数据类型通常是一个好主意。这可以提高性能并节省内存。Pandas 允许将列转换为 category 类型。 分类数据类型: category 类型适用于那些只包含有限数量不同值的列&…

【LeetCode】27. 移除元素(简单)——代码随想录算法训练营Day01

题目链接&#xff1a;27. 移除元素 题目描述 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺…

Promise基础详细介绍(一),resolve,reject

Promise的含义 就是一个对象&#xff0c;用来传递异步操作的消息。 基本用法 resolve,reject是javascript引擎提供的。 const promise new Promise(function(resolve, reject) {const result {success: truevalue: 777} //伪代码&#xff0c;比如接口返回的参数if(result.su…

Vue 自定义仿word表单录入之日期输入组件

因项目需要&#xff0c;要实现仿word方式录入数据&#xff0c;要实现鼠标经过时才显示编辑组件&#xff0c;预览及离开后则显示具体的文字。 鼠标经过时显示 正常显示及离开时显示 组件代码 <template ><div class"paper-input flex flex-col border-box "…

物流实时数仓DWD层——1.准备工作

目录 1.创建主程序——DwdOrderRelevantApp类 2.创建DWD层的事实表——来源于订单表和订单明细表 (1)创建订单表实体类 (2)创建订单明细表实体类 (3)创建交易域&#xff1a;下单事务事实表实体类&#xff0c;并整合(1)与(2)&#xff0c;采用下单时间 (4)创建交易域&#…

【C++】STL(标准模板库)

文章目录 1. 基本概念2. 容器2.1. 容器的分类 1. 基本概念 STL&#xff08;Standard Template Library&#xff0c;标准模板库)是惠普实验室开发的一系列软件的统称&#xff0c;现在已经成为C标准库的重要组成部分。STL的从广义上讲分为三类&#xff1a;algorithm&#xff08;…

Matlab字符识别实验

Matlab 字符识别OCR实验 图像来源于屏幕截图&#xff0c;要求黑底白字。数据来源是任意二进制文件&#xff0c;内容以16进制打印输出&#xff0c;0-9a-f’字符被16个可打印字符替代&#xff0c;这些替代字符经过挑选&#xff0c;使其相对容易被识别。 第一步进行线分割和字符…

AI编程可视化Java项目拆解第一弹,解析本地Java项目

之前分享过一篇使用 AI 可视化 Java 项目的文章&#xff0c;同步在 AI 破局星球、知乎、掘金等地方都分享了。 原文在这里AI 编程&#xff1a;可视化 Java 项目 有很多人感兴趣&#xff0c;我打算写一个系列文章拆解这个项目&#xff0c;大家多多点赞支持~ 今天分享的是第一…