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

【React】入门Day01 —— 从基础概念到实战应用

目录

一、React 概述

二、开发环境创建

三、JSX 基础

四、React 的事件绑定

五、React 组件基础使用

六、组件状态管理 - useState

七、组件的基础样式处理


快速入门 – React 中文文档

一、React 概述

  1. React 是什么
    • 由 Meta 公司开发,是用于构建 Web 和原生交互界面的库。
  2. React 的优势
    • 相较于传统基于 DOM 开发:
      • 采用组件化开发方式,提高代码复用性和可维护性。
      • 性能不错,通过虚拟 DOM 等机制提高渲染效率。
    • 相较于其它前端框架:
      • 拥有丰富的生态系统,有大量的第三方库和工具。
      • 支持跨平台开发,可以用于 Web、移动端(React Native)等。
  3. React 的市场情况
    • 全球流行,被大厂广泛使用。

二、开发环境创建

  1. create-react-app 工具
    • 是快速创建 React 开发环境的工具,底层由 Webpack 构建,封装了配置细节,开箱即用。
    • 使用命令
      npx create-react-app [项目名称]

      创建项目,例如

      npx create-react-app react-basic

      其中npx是 Node.js 工具命令,create-react-app是核心包,react-basic是项目名称可自定义

三、JSX 基础

  1. 什么是 JSX
    • 是 JavaScript 和 XMl (HTML) 的缩写,在 JS 代码中编写 HTML 模版结构,是 React 中构建 UI 的方式。
    • 优势:
      • 具有 HTML 的声明式模版写法,方便构建页面结构。
      • 拥有 JavaScript 的可编程能力,可灵活处理数据和逻辑。
  2. JSX 的本质
    • 是 JS 的语法扩展,浏览器不能直接识别,需解析工具解析后才能使用。
  3. JSX 高频场景
    • JS 表达式:在 JSX 中通过{}识别 JavaScript 表达式,如变量、函数调用等,但 if 语句、switch 语句、变量声明不属于表达式不能在{}中。
    • 列表渲染:使用map方法实现列表渲染,如
      {list.map(item=><li key={item.id}>{item}</li>)}
    • 条件渲染:通过逻辑与运算符 &&、三元表达式 (?:) 实现基础条件渲染,也可通过自定义函数 + 判断语句实现复杂条件渲染。

四、React 的事件绑定

  1. 基础实现
    • 通过语法on + 事件名称 = {事件处理程序}绑定事件,遵循驼峰命名法,如
      <button onClick={clickHandler}>click me</button>
  2. 使用事件参数
    • 在事件回调函数中设置形参 e 可获取事件对象,如
      <button onClick={clickHandler(e)}>click me</button>
  3. 传递自定义参数
    • 事件绑定位置改造成箭头函数写法传递实参,如
      <button onClick={()=>clickHandler('jack')}>click me</button>
      注意不能直接写函数调用。
  4. 同时传递事件对象和自定义参数
    • 在事件绑定位置传递事件实参 e 和自定义参数,事件处理函数中声明形参对应顺序,如
      <button onClick={(e)=>clickHandler('jack',e)}>click me</button>

五、React 组件基础使用

  1. 组件是什么
    • 一个组件是用户界面的一部分,有自己的逻辑和外观,组件之间可嵌套和复用。
  2. 组件基础使用
    • 在 React 中,组件是首字母大写的函数,渲染组件像使用标签一样,如定义组件
      function Button(){return <button>click me</button>}
      使用组件<Button/><Button></Button>

六、组件状态管理 - useState

  1. 基础使用
    • useState 是 React Hook,可向组件添加状态变量,状态变量变化会影响组件渲染结果(数据驱动视图),如
      const [ count, setCount ] = React.useState(0)
      通过setCount函数修改状态。
  2. 状态的修改规则
    • 状态被认为是只读的,应替换而不是修改,直接修改状态不能引发视图更新。
  3. 修改对象状态
    • 对于对象类型状态变量,应给set方法一个全新的对象来修改。

七、组件的基础样式处理

  1. 行内样式
    • 通过style属性设置行内样式,如
      <div style={{ color:'red'}}>this is div</div>
  2. class 类名控制
    • 引入 CSS 文件,使用className属性应用类名,如
      import './index.css';<span className="foo">this is span</span>

相关文章:

【React】入门Day01 —— 从基础概念到实战应用

目录 一、React 概述 二、开发环境创建 三、JSX 基础 四、React 的事件绑定 五、React 组件基础使用 六、组件状态管理 - useState 七、组件的基础样式处理 快速入门 – React 中文文档 一、React 概述 React 是什么 由 Meta 公司开发&#xff0c;是用于构建 Web 和原生…...

<<机器学习实战>>10-11节笔记:生成器与线性回归手动实现

10生成器与python实现 如果是曲线规律的数据集&#xff0c;则需要把模型变复杂。如果是噪音较大&#xff0c;则需要做特征工程。 随机种子的知识点补充&#xff1a; 根据不同库中的随机过程&#xff0c;需要用对应的随机种子&#xff1a; 比如 llist(range(5)) random.shuf…...

链表OJ经典题目及思路总结(一)

目录 前言1.移除元素1.1 链表1.2 数组 2.双指针2.1 找链表的中间结点2.2 找倒数第k个结点 总结 前言 解代码题 先整体&#xff1a;首先数据结构链表的题一定要多画图&#xff0c;捋清问题的解决思路&#xff1b; 后局部&#xff1a;接着考虑每一步具体如何实现&#xff0c;框架…...

初识chatgpt

GPT到底是什么 首先&#xff0c;我们需要了解GPT的全称&#xff1a;Generative Pre-trained Transformer&#xff0c;即三个关键词&#xff1a;生成式 预训练 变换模型。 &#xff08;1&#xff09;什么是生成式&#xff1f; 即能够生成新的文本序列。 &#xff08;2&#…...

【60天备战2024年11月软考高级系统架构设计师——第33天:云计算与大数据架构——大数据处理框架的应用场景】

随着大数据技术的发展&#xff0c;越来越多的企业开始采用大数据处理框架来解决实际问题。理解这些框架的应用场景对于架构师来说至关重要。 大数据处理框架的应用场景 实时数据分析&#xff1a;使用Apache Kafka与Apache Spark结合&#xff0c;可以实现对实时数据流的处理与…...

如何设计具体项目的数据库管理

### 例三&#xff1a;足协的数据库管理算法 #### 角色&#xff1a; - **ESFP学生**&#xff1a;小明 - **ENTP老师**&#xff1a;张老师 #### 主题&#xff1a;足协的数据库管理算法 --- **张老师**&#xff1a;小明&#xff0c;今天我们来讨论一下足协的数据库管理算法。你…...

对于 Vue CLI 项目如何引入Echarts以及动态获取数据

&#x1f680;个人主页&#xff1a;一颗小谷粒 &#x1f680;所属专栏&#xff1a;Web前端开发 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 1、数据画卷—Echarts介绍 1.1 什么是Echarts&#xff1f; 1.2 Echarts官网地址 2、Vue CLI 项目…...

【Linux笔记】在VMware中,为基于NAT模式运行的CentOS虚拟机设置固定的网络IP地址

一、配置VMware虚拟网络 1、打开VMware虚拟网络编辑器&#xff1a; 点击VMware主界面上方的“编辑”菜单&#xff0c;选择“虚拟网络编辑器”。 2、选择NAT模式网络&#xff1a; 在虚拟网络编辑器中&#xff0c;选择VMnet8&#xff08;或其他NAT模式的网络&#xff09;。 取消勾…...

一文上手Kafka【中】

一、发送消息细节 在发送消息的特别注意: 在版本 3.0 中&#xff0c;以前返回 ListenableFuture 的方法已更改为返回 CompletableFuture。为了便于迁移&#xff0c;2.9 版本添加了一个方法 usingCompletableFuture&#xff08;&#xff09;&#xff0c;该方法为 CompletableFu…...

Ubuntu如何如何安装tcpdump

在Ubuntu上安装tcpdump非常简单&#xff0c;可以通过以下步骤完成&#xff1a; 打开终端。 更新包列表&#xff1a; 首先&#xff0c;更新你的包管理器的包列表&#xff1a; sudo apt update 安装tcpdump&#xff1a; 使用以下命令安装tcpdump&#xff1a; sudo apt install …...

3-3 AUTOSAR RTE 对SR Port的作用

返回总目录->返回总目录<- 一、前言 RTE作为SWC和BSW之间的通信机构,支持Sender-Receiver方式实现ECU内及ECU间的通信。 对于Sender-Receiver Port支持三种模式: 显式访问:若运行实体采用显示模式的S/R通信方式,数据读写是即时的;隐式访问:当多个运行实体需要读取…...

hive/impala/mysql几种数据库的sql常用写法和函数说明

做大数据开发的时候&#xff0c;会在几种库中来回跳&#xff0c;同一个需求&#xff0c;不同库函数和写法会有出入&#xff0c;在此做汇总沉淀。 1. hive 1. 日期差 DATEDIFF(CURRENT_DATE(),wdjv.creation_date) < 30 30天内的数据 2.impala 3. spark 4. mysql 1.时间差…...

论文阅读:LM-Cocktail: Resilient Tuning of Language Models via Model Merging

论文链接 代码链接 Abstract 预训练的语言模型不断进行微调,以更好地支持下游应用。然而,此操作可能会导致目标领域之外的通用任务的性能显著下降。为了克服这个问题,我们提出了LM Cocktail,它使微调后的模型在总体上保持弹性。我们的方法以模型合并(Model Merging)的形…...

8640 希尔(shell)排序

### 思路 希尔排序是一种基于插入排序的排序算法&#xff0c;通过将待排序数组分割成多个子序列分别进行插入排序来提高效率。初始增量d为n/2&#xff0c;之后每次减半&#xff0c;直到d为1。 ### 伪代码 1. 读取输入的待排序关键字个数n。 2. 读取n个待排序关键字并存储在数组…...

Linux 安装redis主从模式+哨兵模式3台节点

下载 https://download.redis.io/releases/ 解压 tar -zxvf redis-7.2.4.tar.gz -C /opt chmod 777 -R /opt/redis-7.2.4/安装 # 编译 make # 安装&#xff0c; 一定是大写PREFIX make PREFIX/opt/redis-7.2.4/redis/ install配置为系统服务 cd /etc/systemd/system/主服务…...

[BCSP-X2024.小高3] 学习计划

题目描述 暑假共有 n 天&#xff0c;第 i 天的精力指数为 a[i]&#xff0c;你想要利用假期依次&#xff08;按 1,2,...,m 顺序&#xff09;复习 m 门功课&#xff0c;第 i 门功课的重要程度为 b[i]&#xff0c;且每门的复习时段必须连 续&#xff0c;并且不能有某天不干事。 …...

Android Debug Bridge(ADB)完全指南

文章目录 前言一、什么是ADB&#xff1f;二、ADB的工作原理ADB由三个部分组成&#xff1a; 三、如何安装ADBWindows系统&#xff1a;macOS和Linux系统&#xff1a; 四、ADB常用指令大全设备相关操作1. 查看连接的设备&#xff1a;2. 重启设备&#xff1a;3. 进入Bootloader模式…...

再次重逢,愿遍地繁花

再次重逢&#xff0c;愿遍地繁花 我并不是一个对最终幻想7很热衷的粉丝&#xff0c;也并没有像那些评论区的大佬&#xff0c;能够轻易地说出整部世界的全貌。说到底&#xff0c;我只是一个看完了《最终幻想7&#xff1a;重制版》和《最终幻想7&#xff1a;重生》的爱好者罢了。…...

数据结构和算法基础(一)

文章目录 链表反转链表合并删除链表倒数第 n 个结点找链表的中间结点链表中环的检测排序算法递归 趁空闲时间刷一遍极客时间上王争的《数据结构与算法之美》课程&#xff0c;个人觉得写的很好&#xff0c;每章节由浅入深且从基础到引入设计类问题&#xff0c;如果写过很多代码想…...

【超长好文】网络安全从业者面试指南

文章为笔者偶然看到的github项目《网络安全面试指南》&#xff0c;作者FeeiCN&#xff0c;读完内容深感作者的用心&#xff0c;尽管一些观点因为时间原因与当下行情存在差异&#xff0c;但仍旧值得大家参考&#xff0c;希望能给大家在这行业寒冬带来一些启发&#xff0c;愿正在…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

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

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

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...