当前位置: 首页 > 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;愿正在…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...