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

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

news 2025/11/3 9:46:25

文章目录

  • 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

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/10/30 18:21:38

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

编程新知 2025/10/25 18:00:07

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/10/28 15:49:23

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/10/22 12:48:44

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/25 5:16:24

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

编程新知 2025/10/25 6:07:35

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2025/10/30 6:40:06