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

【React1】React概述、基本使用、脚手架、JSX、组件

news 文章来源：https://blog.csdn.net/Eva3288/article/details/134142128 2025/5/14 20:36:28

文章目录

  • 1. React基础
    • 1.1 React 概述
      • 1.1.1 什么是React
      • 1.1.2 React 的特点
        • 声明式
        • 基于组件
        • 学习一次，随处使用
    • 1.2 React 的基本使用
      • 1.2.1 React的安装
      • 1.2.2 React的使用
      • 1.2.3 React常用方法说明
        • React.createElement()
        • ReactDOM.render()
    • 1.3 React 脚手架的使用
      • 1.3.1 React 脚手架的意义
      • 1.3.2 使用React 脚手架初始化项目
        • 另：npx命令介绍
      • 1.3.3 在脚手架中使用React
  • 2. JSX
    • 2.1 JSX的基本使用
      • 2.1.1 React.createElement()的问题
      • 2.1.2 JSX简介
      • 2.1.3 JSX使用步骤
      • 2.1.4 思考：为什么脚手架中可以使用JSX语法？
      • 2.1.5 JSX的注意点
    • 2.2 JSX中使用Javascript表达式
    • 2.3 JSX的条件渲染
    • 2.4 JSX的列表渲染
    • 2.5 JSX的样式处理
      • 2.5.1 行内样式 -- style
      • 2.5.2 类名 -- className
    • 2.6 JSX总结
  • 3. React组件基础
    • 3.1 React组件的介绍
    • 3.2 React组件的两种创建方式
      • 3.2.1 使用`函数`创建组件
      • 3.2.2 使用`类class`创建组件
      • 3.2.3 把创建好的组件，`抽离成独立的JS文件`
    • 3.3 React事件处理
      • 3.3.1 事件绑定
      • 3.3.2 事件对象
    • 3.4 有状态组件 和 无状态组件
    • 3.5 组件中的state 和 setState()
      • 3.5.1 state的基本使用
        • 1. `初始化state` / 初始化状态
        • 2. `获取状态` / 在组件中使用状态
      • 3.5.2 setState()修改状态state
      • 3.5.3 从JSX中`抽离`事件处理程序
    • 3.6 事件绑定this指向
    • 3.7 表单处理

参考：

  1. React 入门实例教程 - 阮一峰–太早，不推荐
  2. React 官网
  3. React 官网 -中文
  4. React入门看这篇就够了

加微信1124692 领取资料

1. React基础

React基础目标：

  1. 能够说出react是什么
  2. 能够说出react的特点
  3. 能够掌握react的基本使用
  4. 能够使用react脚手架

1.1 React 概述

1.1.1 什么是React

  • React是一个用于构建用户界面的javascript库。

用户界面：对前端来说就是HTML页面， 所以，React 主要用来写HTML页面，或构建Web应用。

  • 如果从MVC的角度看，React仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M 和 C的功能。
  • React 起源于Facebook的内部项目，后又用来假设Instagram的网站，并与2013年5月开源。

React简介

  • React 是Facebook用来创建用户界面的JS库，在2013年开源。
  • React 不是一个MVC框架，而是一个用于构建组件化UI的库，是一个前端界面开发工具，所以很多人认为React 是MVC中的V(视图view)。
  • React的存在能够很好的解决“构建随着时间数据不断变化的大规模应用程序” – 相当于一个组件化的思想，把一个大应用拆分成很多小的组件，所以React能够引导我们重新思考如何构建应用程序。
  • React的核心就是封装可复用性高的组件，各个组件维护自己的状态和UI，当状态变更，自动重新渲染整个组件。

学习React前了解：

  • 目前前端的主流框架由Vue、React、Angular组成。
  • Angular因为革命性太高（每次发布新版本，都会颠覆前面版本的语法与使用，所以维护成本比较高），所以Vue、React 比较受欢迎
  • Vue、React 都是一个MVVM框架，为什么需要MVVM框架？ – 以往用js 或者jquery 来操作大量的dom，会导致渲染的时间很慢，但是MVVM这种设计模式不会直接操作dom，而是用model来代替dom，用js形成一个虚拟的dom树，只会在最后一次进行渲染（什么时候数据不修改了，确定了dom了，才会对dom进行渲染，不像实际dom，操作一次渲染一次）

1.1.2 React 的特点

  • 声明式
  • 基于组件
  • 学习一次，随处使用
声明式
  • 只需要描述UI（HTML）看起来是什么样，就跟写HTML一样
  • 我们负责用React代码来描述结构，React负责渲染UI，并在数据变化时更新UI
//比如我们在页面中响应一个标题，我们只需要写一个h1标签
const jsx = <div className = "app"><h1>Hello React! 动态变化数据:{count}</h1>
</div>
基于组件
  • 组件是React最重要的内容
  • 组件表示页面中的一部分内容
  • 组合、复用多个组件，可以实现完整的页面功能
学习一次，随处使用
  • React的必杀技
  • 使用React 不仅可以开发Web应用，还可以开发移动端（安卓/苹果）原生应用（react-native），还可以开发VR（虚拟现实）应用（react 360）

React 特性
React 是声明式、组件化的，非常灵活。

  • 声明式
  • 组件化
  • 灵活 ： 支持单页面（一个html，由路由方式去进行分发） / 多页面（多个html）
  • 支持服务端渲染，可以把react 放到node服务器中渲染页面出来，一些官网、商城的项目，react 写的是单页面，但需求是多页面，这时可以用next.js来生成多个视图，这样方便做seo优化，提高网站排名
  • 可以做react native ，还可以做app开发，所以react 应用非常广泛。

组件化 和 模块化的区别：

  • 组件化侧重于UI,把前端一个独立的UI模块，开发成一个小的组件，然后在不同的页面进行嵌套、拼接，就像积木一样。
  • 模块化侧重于功能，比如get、post请求这个功能要在很多地方用到，我们就把它做成一个独立的模块，在其他地方使用。

1.2 React 的基本使用

1.2.1 React的安装

  • 安装命令：npm i react react-dom
  • react 包是核心，提供了创建元素、组件等功能
  • react-dom 包提供DOM相关功能等

安装完成后可在package.json中查看
在这里插入图片描述
node_modules中有相应的包，且可在package.json中查看具体信息在这里插入图片描述

1.2.2 React的使用

1. 引入react
原生的html中引react库的方法：

<!-- React -->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<!-- React DOM -->
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

或者，像上面用npm 安装后，引入

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2. 创建react元素

<script>const title = React.createElement('h1',null,'Hello React')   // React是由核心库react.js提供的
</script>
  1. 渲染创建好的react元素到页面中
ReactDOM.render(title,document.getElementById('app'))    //ReactDOM 是由react-dom提供的

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>lxz20231103</title>
</head>
<body><div id="app"></div><!-- 1.引入js文件 --><script src="./node_modules/react/umd/react.development.js"></script><script src="./node_modules/react-dom/umd/react-dom.development.js"></script><script>// 2. 创建react元素// React.createElement('元素名称',元素属性,'元素子节点（文本节点或者元素节点）')const title = React.createElement('h1',null,'Hello React')  //声明一个常量title来接收创建好的React元素// 3. 渲染react元素到页面某元素中// ReactDOM.render(要渲染的react元素，要把元素渲染、挂载在哪位位置（挂载点）)ReactDOM.render(title,document.getElementById('app'))</script>
</body>
</html>

1.2.3 React常用方法说明

React.createElement()
  • 了解即可，因为这个方法用起来不是特别友好，在创建复杂结构的时候会很繁琐，后面会有一种简单友好的方法来创建react元素
  • 参数：
    参数1：元素名称，也就是html元素的名字，字符串，eg: ‘p’，'h1’等
    参数2：元素属性，没有属性写null，有属性写对象,eg： {title:‘我是标题’}
    参数3及以后的参数：元素的子节点，所以这个方法不知有3个参数，可能有很多参数

情况1： 没有属性，文本子节点

 const title = React.createElement('h1',null,'Hello React')   // 没有属性的h1标签，子节点是文本 Hello React

在这里插入图片描述
情况2：有属性，文本子节点

const title = React.createElement('p',{id:'p1',title:'我是标题'},'Hello React' 
)

在这里插入图片描述
情况3：

const title = React.createElement('p',    // 元素1：创建元素的 标签名称{id:'p1',title:'我是标题'},    // 元素2： 创建元素的 属性'Hello React',   // 元素3 及以后 ：  创建元素的子节点，子节点1：文本React.createElement('span',null,'加油！')    // 元素3 及以后 ：  创建元素的子节点，同级子节点2：元素
)

在这里插入图片描述
类似上图这样一个简单的结构也要很多代码，所以这个方法用起来并不是很方便，了解即可

ReactDOM.render()
  • 作用：用来将创建好的react元素渲染到页面中
  • 参数：
    参数1：创建好的react元素或者组件
    参数2:dom对象，通常用 document.getElementById('app') 来获取根节点

1.3 React 脚手架的使用

1.3.1 React 脚手架的意义

  • 脚手架是开发现代web应用的必备
  • 现代web应用不再像传统的方式去创建页面写css，js那样
  • 现在web应用写代码只是其中的一环，除此之外还有代码规范、项目打包上线、预编译等等问题要考虑。所以我们需要一套完整的解决方案来帮我们开发项目，如果手动一个个处理，就很繁琐，因此我们需要这么一套工具，这个工具就是脚手架。
  • 另外我们还可以充分的利用webpack、babel、eslint等工具来辅助我们进行项目的开发。
    使用react 完全不用考虑webpack等的配置问题，react脚手架是开箱即用的，我们可以用更多的时间来关注业务，而非配置。

1.3.2 使用React 脚手架初始化项目

  1. 初始化项目：
  • 推荐使用： npx create-react-app my-app-name
  • 方式2：npm init react-app my-app-name
  • 方式3：yarn create react-app my-app-name
    在这里插入图片描述
    happy hacking – 快乐黑客
    在这里插入图片描述
  1. 启动项目，在项目根目录执行命令： npm start
  • 项目根目录-- 有p

相关文章：

【React1】React概述、基本使用、脚手架、JSX、组件

文章目录 1. React基础1.1 React 概述1.1.1 什么是React1.1.2 React 的特点声明式基于组件学习一次，随处使用1.2 React 的基本使用1.2.1 React的安装1.2.2 React的使用1.2.3 React常用方法说明React.createElement()ReactDOM.render()1.3 React 脚手架的使用1.3.1 React 脚手架…...

编程日记 2024/7/25 10:42:46

k8s部署kafka集群

k8s部署kafka集群 kafka&#xff08;Kafka with KRaft&#xff09; mkdir -p ~/kafka-ymlkubectl create ns kafkacat > ~/kafka-yml/kafka.yml << EOF apiVersion: v1 kind: Service metadata:name: kafka-headlessnamespace: kafkalabels:app: kafka spec:type: C…...

编程日记 2024/7/25 10:40:43

(C++回溯01) 组合

77、组合 回溯题目三步走 1. 确定参数 2. 确定终止条件 3. for 循环横向遍历&#xff0c;递归纵向遍历 class Solution { public:vector<vector<int>> result;vector<int> path;void backtracking(int n, int k, int startIndex) {if(path.size() k) {…...

编程日记 2024/7/25 10:37:39

k8s学习笔记——安装istio的仪表盘之prometheus安装

接上一篇&#xff0c;继续安装istio的dashboard。 先到istio-1.22.0/samples/addons目录下&#xff0c;把yaml文件中的镜像仓库地址修改了&#xff0c;修改地址参考我之前写的CSDN里的镜像对照表。不然直接执行kubectl apply -f samples/addons这个命令后&#xff0c;依据会出…...

编程日记 2024/7/25 10:35:37

四、GD32 MCU 常见外设介绍 (7) 7.I2C 模块介绍

7.1.I2C 基础知识 I2C(Inter-Integrated Circuit)总线是一种由Philips公司开发的两线式串行总线&#xff0c;用于内部IC控制的具有多端控制能力的双线双向串行数据总线系统&#xff0c;能够用于替代标准的并行总线&#xff0c;连接各种集成 电路和功能模块。I2C器件能够减少电…...

编程日记 2024/7/25 10:29:29

Apollo 配置中心的部署与使用经验

前言 Apollo&#xff08;阿波罗&#xff09;是携程开源的分布式配置管理中心。 本文主要介绍其基于 Docker-Compose 的部署安装和一些使用的经验 特点 成熟&#xff0c;稳定支持管理多环境/多集群/多命名空间的配置配置修改发布实时&#xff08;1s&#xff09;通知到应用程序支…...

编程日记 2024/7/25 10:28:28

Perl中的设计模式革新：命令模式的实现与应用

Perl中的设计模式革新&#xff1a;命令模式的实现与应用 在面向对象编程中&#xff0c;设计模式是解决特定问题的成熟模板。命令模式作为行为设计模式之一&#xff0c;它将请求封装为对象&#xff0c;从而允许用户根据不同的请求对客户进行参数化。本文将深入探讨如何在Perl中…...

编程日记 2024/7/25 10:22:22

Java8-求两个集合取交集

在Java8中&#xff0c;求两个集合的交集可以使用不同的三种方式&#xff1a;传统的循环遍历、使用Stream API的filter操作和使用Stream API的Collection操作。 方法一&#xff1a;传统的循环遍历 首先&#xff0c;我们创建两个集合list1和list2&#xff0c;并给它们添加一些元…...

编程日记 2024/7/25 10:15:14

爬虫学习4：爬取王者荣耀技能信息

爬虫&#xff1a;爬取王者荣耀技能信息&#xff08;代码和代码流程&#xff09; 代码 # 王者荣耀英雄信息获取 import time from selenium import webdriver from selenium.webdriver.common.by import By if __name__ __main__:fp open("./honorKing.txt", "…...

编程日记 2024/7/25 10:14:13

在Ubuntu 14.04上安装和使用Memcache的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 随着您的网站的增长和流量的增加&#xff0c;最快显示压力的组件之一是后端数据库。如果您的数据库没有分布式和配置来处理高负载…...

编程日记 2024/7/25 10:12:11

PCDN技术如何降低运营成本?

PCDN技术通过以下几种方式降低运营商的运营成本: 1.利用用户设备作为缓存节点: PCDN技术将用户设备纳入内容分发网络&#xff0c;利用这些设备的闲置带宽和存储资源来缓存和分发内容。这种方式不需要运营商投入大量的高成本服务器和带宽资源&#xff0c;从而降低了硬件和带宽…...

编程日记 2024/7/25 10:11:10

服务器数据恢复—V7000存储硬盘故障脱机的数据恢复案例

服务器存储数据恢复环境&#xff1a; 某品牌P740小型机AIXSybaseV7000磁盘阵列柜&#xff0c;磁盘阵列柜中有12块SAS机械硬盘&#xff08;其中包括一块热备盘&#xff09;。 服务器存储故障&#xff1a; 磁盘阵列柜中有一块磁盘出现故障&#xff0c;运维人员用新硬盘替换掉故障…...

编程日记 2024/7/25 10:09:08

BSV区块链在人工智能时代的数字化转型中的角色

​​发表时间&#xff1a;2024年6月13日 企业数字化转型已有约30年的历史&#xff0c;而人工智能&#xff08;以下简称AI&#xff09;将这种转型提升到了一个全新的高度。这并不难理解&#xff0c;因为AI终于使企业能够发挥其潜力&#xff0c;实现更宏大的目标。然而&#xff0…...

编程日记 2024/7/25 10:08:07

android audio 相机按键音：(二)加载与修改

相机按键音资源&#xff0c;加载文件路径&#xff1a; frameworks/av/services/camera/libcameraservice/CameraService.cpp 按键音&#xff0c;加载函数&#xff1a; void CameraService::loadSoundLocked(sound_kind kind) { ATRACE_CALL(); LOG1("Cam…...

编程日记 2024/7/25 10:06:04

Linux grep技巧 提取log中的json数据

目录 一. 前提1.1 数据准备1.2 需求1.3 分析 二. 数据提取2.1 提取所有的json数据2.2 提取子项目的全部json数据2.3 提取指定项目的json数据 一. 前提 1.1 数据准备 545-1 2024/07/20 18:20:21 [ERROR] MPX001 eventControlleraupay transactionIdA545 {"event":&q…...

编程日记 2024/7/25 10:04:02

HDShredder 7 企业版案例分享: 依照国际权威标准，安全清除企业数据

HDShredder 7 企业版用户案例 天津鸿萌科贸发展有限公司是德国 Miray 公司 HDShredder 数据清除软件的授权代理商。近日&#xff0c;上海某网络科技有限公司采购 HDShredder 7 企业版x4&#xff0c;为公司数据存储资产的安全清除工作流程配备高效的执行工具。HDShredder 7 企业…...

编程日记 2024/7/25 10:03:00

centos系统使用mysqldump数据备份与恢复

文章目录 使用mysqldump备份数据库一、数据库备份1. 基础备份2. 额外选项(一般组合使用) 二、数据库恢复 使用mysqldump备份数据库 一、数据库备份 1. 基础备份 #备份单个数据库 mysqldump -u 用户名 -p 数据库名 > 备份文件.sql#备份多个数据库 mysqldump -u 用户名 -p …...

编程日记 2024/7/25 9:59:57

【element ui】input输入控件绑定粘贴事件，从 Excel 复制的数据粘贴到输入框（el-input）时自动转换为逗号分隔的数据

目录 1、需求2、实现思路:3、控件绑定粘贴事件事件修饰符说明: 4、代码实现&#x1f680;写在最后 1、需求 在 Vue 2 和 Element UI 中&#xff0c;要实现从 Excel 复制空格分隔的数据&#xff0c;并在粘贴到输入框&#xff08;el-input&#xff09;时自动转换为逗号分隔的数据…...

编程日记 2024/7/25 9:57:55

Chapter18 基于物理的渲染——Shader入门精要学习

Chapter18 基于物理的渲染 一、PBS理论和数学基础1.光是什么微表面模型 2.渲染方程3.精确光源4.双向反射分布函数 BRDF5.漫反射项&#xff08;Lambert 模型&#xff09;Lambertian BRDF为&#xff1a;Disney BRDF中漫反射项 6.高光反射项微面元理论BRDF的高光反射项①菲涅尔反射…...

编程日记 2024/7/25 9:54:51

DolphinScheduler学习

1.查看文档 点击访问&#xff1a;https://dolphinscheduler.apache.org/zh-cn/docs 我们可以看到相关的文档简介里有 介绍 DolphinScheduler是Apache DolphinScheduler 是一个分布式易扩展的可视化DAG工作流任务调度开源系统。适用于企业级场景&#xff0c;提供了一个可视化…...

编程日记 2024/7/25 9:53:50

我用Tauri开发的待办效率工具开源了！

开源仓库地址 gitee Git仓库地址:https://gitee.com/zhanhongzhu/zhanhongzhu.git 应用地址 windows应用地址下载 https://kestrel-task.cn 具体内容 也可以看&#x1f389;使用Taurivitekoa2mysql开发了一款待办效率应用 这篇文章。 &#x1f4bb;技术栈 Tauri: Tauri…...

编程日记 2024/7/25 9:52:48

【黑科技】：Laravel 项目性能提升 20 倍

令人激动的黑科技&#xff1a;Laravel 项目性能提升 20 倍 这个项目能够在无需修改任何代码且无需第三方扩展的前提下&#xff0c;将你的 Laravel 项目性能提高 20 倍。它仅依赖于 PHP 原生的 pcntl、posix、fiber 和 sockets。 项目灵感 起因是看到官方发布的 PHP 8.1 更新…...

编程日记 2024/7/25 9:50:46

User Allocation In MEC: A DRL Approach 论文笔记

论文&#xff1a;ICWS 2021 移动边缘计算中的用户分配&#xff1a;一种深度强化学习方法 代码地址&#xff1a;使用强化学习在移动边缘计算环境中进行用户分配 目录 Ⅰ.Introduction II. MOTIVATION-A.验证假设的观察结果 II. MOTIVATION-A Motivating Example 数据驱动…...

编程日记 2024/7/25 9:46:41

leetcode 69. x 的平方根

可以使用二分查找法或牛顿迭代法来实现 LeetCode 问题 69. x 的平方根。下面是使用二分查找法和牛顿迭代法的 C 实现。 二分查找法 #include <iostream>class Solution { public:int mySqrt(int x) {if (x 0) return 0;int left 1, right x, ans 0;while (left <…...

编程日记 2024/7/25 9:45:40

基于词级ngram的词袋模型对twitter数据进行情感分析

按照阿光的项目做出了学习笔记&#xff0c;pytorch深度学习实战项目100例 基于词级ngram的词袋模型对twitter数据进行情感分析 什么是 N 符&#xff1f; N 格是指给定文本或语音样本中 n 个项目的连续序列。这些项目可以是音素、音节、字母、单词或碱基对&#xff0c;具体取…...

编程日记 2024/7/25 9:44:39

Linux-Centos-改密码（单用户登陆）

笔记一&#xff1a; centos7单用户修改root密码 在CentOS 7中&#xff0c;如果您是唯一的用户或者您确信其他用户不会登录&#xff0c;您可以按照以下步骤来修改root密码&#xff1a; 1.重启系统。 2.启动时出现引导界面时&#xff0c;按任意键进入GRUB菜单。 3.选择要启动的内…...

编程日记 2024/7/25 9:40:34

java实现OCR图片识别，RapidOcr开源免费

先看一下识别效果&#xff08;自我感觉很牛逼&#xff09;&#xff0c;比Tess4J Tesseract省事&#xff0c;这个还需要训练&#xff0c;安装软件、下载语言包什么的 很费事&#xff0c;关键识别率不高 RapidOcr不管文字的横竖&#xff0c;还是斜的都能识别&#xff08;代码实现…...

编程日记 2024/7/25 9:37:31

PCB工艺边设计准则

在PCB设计时&#xff0c;通常会在电路板的边缘预留一定的空间&#xff0c;这部分空间被称为工艺边。它有助于在生产过程中确保电路板的尺寸和形状的准确性。以使得组装时更加顺畅、便捷。而工艺边的加工&#xff0c;使得线路板上的元件可以精准地与设备对接&#xff0c;从而提高…...

编程日记 2024/7/25 9:36:30

CTF-NSSCTF题单[GKCTF2020]

[GKCTF 2020]CheckIN 这道题目考察&#xff1a;php7-gc-bypass漏洞 打开这道题目&#xff0c;开始以为考察反序列化&#xff0c;但实际并不是&#xff0c;这里直接用$_REQUEST传入了参数便可以利用了。这里出现了一个eval&#xff08;&#xff09;函数&#xff0c;猜测考察命…...

编程日记 2024/7/25 9:35:29

redis的分片集群（仅供自己参考）

前言&#xff1a;为什么使用分片集群&#xff1a;因为redis的主从和哨兵机制主要是用来解决redis的高并发读的问题&#xff0c;还有redis的高并发的写的问题没有解决。使用分片集群就可以很好的解决redis写的问题&#xff0c;有多个master就可以实现并发的写。同时&#xff0c;…...

编程日记 2024/7/25 9:31:24