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

React 前端框架入门

这里写目录标题

  • React 前端框架入门
    • 什么是 React?
    • 核心特性
    • 基本概念
      • 1. JSX
      • 2. 组件
      • 3. State 和 Props
      • 4. 生命周期
      • 5. React Hooks
    • React 应用示例
    • 项目结构
    • 如何启动 React 项目
    • 参考资料

React 前端框架入门

什么是 React?

React 是由 Facebook 开发并开源的一个用于构建用户界面的 JavaScript 库
它的核心特点是组件化和响应式更新,适用于单页应用 (SPA) 和复杂前端界面的开发。

核心特性

  1. 组件化开发

    • UI 被拆分为独立、可复用的组件。
    • 每个组件有自己的状态和生命周期。
  2. 声明式编程

    • 使用简单的代码描述 UI。
    • React 会根据状态更新自动处理 DOM 变更。
  3. 虚拟 DOM

    • 提高性能:通过比较虚拟 DOM 和真实 DOM 的差异,只更新必要的部分。
  4. 单向数据流

    • 数据从父组件流向子组件,便于管理。
  5. React Hooks

    • 使函数组件也能拥有状态和生命周期特性。

基本概念

1. JSX

JSX 是一种在 JavaScript 中嵌入 HTML 的语法,类似模板语言。

const element = <h1>Hello, React!</h1>;

2. 组件

组件是 React 的基础单元,可以分为 函数组件类组件

  • 函数组件
function Welcome(props) {return <h1>Hello, {props.name}!</h1>;
}
  • 类组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}

3. State 和 Props

  • Props: 用于从父组件向子组件传递数据,组件是只读的。
  • State: 每个组件的内部状态,可随事件或操作动态变化。

4. 生命周期

React 提供了一系列生命周期方法,用于控制组件的渲染和更新过程。

生命周期阶段方法描述
挂载componentDidMount初始化后运行,如数据请求。
更新componentDidUpdate状态或属性更新后运行。
卸载componentWillUnmount清理工作,如取消订阅。

5. React Hooks

Hooks 是函数组件的新特性,用于处理状态和生命周期。

  • 使用 useState 管理状态
import React, { useState } from "react";function Counter() {const [count, setCount] = useState(0);return (<div><p>你点击了 {count} 次</p><button onClick={() => setCount(count + 1)}>点击我</button></div>);
}
  • 使用 useEffect 管理副作用
import React, { useEffect } from "react";function Example() {useEffect(() => {console.log("组件已挂载");return () => {console.log("组件已卸载");};}, []);return <div>Hello, Hooks!</div>;
}

React 应用示例

以下是一个简单的计数器应用:

import React, { useState } from "react";
import ReactDOM from "react-dom";function Counter() {const [count, setCount] = useState(0);return (<div><h1>计数器</h1><p>当前计数:{count}</p><button onClick={() => setCount(count + 1)}>增加</button><button onClick={() => setCount(count - 1)}>减少</button></div>);
}ReactDOM.render(<Counter />, document.getElementById("root"));

项目结构

React 项目通常使用 Create React App 创建,其默认结构如下:

my-app/
├── src/
│   ├── App.js         # 主组件文件
│   ├── index.js       # 入口文件
│   ├── components/    # 自定义组件目录
│   └── styles/        # 样式文件
├── public/
│   └── index.html     # HTML 模板
├── package.json       # 项目依赖和配置

如何启动 React 项目

  1. 安装 Node.js 和 npm。
  2. 创建 React 项目:
    npx create-react-app my-app
    cd my-app
    
  3. 启动项目:
    npm start
    

参考资料

  • React 官方文档
  • React 中文文档

相关文章:

React 前端框架入门

这里写目录标题 React 前端框架入门什么是 React&#xff1f;核心特性基本概念1. JSX2. 组件3. State 和 Props4. 生命周期5. React Hooks React 应用示例项目结构如何启动 React 项目参考资料 React 前端框架入门 什么是 React&#xff1f; React 是由 Facebook 开发并开源的…...

复习打卡大数据篇——Hadoop YARN

目录 &#xff11;.什么是yarn &#xff12;.yarn的三大角色 &#xff13;.任务&#xff08;MR&#xff09;提交到YARN运行流程 4. 调度器Scheduler 5.YARN HA 高可用 &#xff11;.什么是yarn YARN&#xff08;Yet Another Resource Negotiator&#xff09;是一个资源管…...

03.HTTPS的实现原理-HTTPS的工作流程

03.HTTPS的实现原理-HTTPS的工作流程 简介1. HTTPS的工作流程1.1. TCP的工作流程1.1.1. 三次握手的详细步骤1.1.2. 三次握手的作用 1.2. HTTPS的工作流程1.2.1. HTTPS与TCP的关系1.2.2. HTTPS的工作流程 2. 公钥和私钥的作用3. 对称密钥的生成和交换4. 对称加密和非对称加密的区…...

idea部署maven项目步骤(图+文)

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…...

Eclipse 添加书签

Eclipse 添加书签 Eclipse 是一款非常受欢迎的集成开发环境&#xff08;IDE&#xff09;&#xff0c;广泛用于 Java、C、Python 等语言的开发。在处理大型项目时&#xff0c;开发者通常需要在不同文件和代码行之间频繁切换。为了提高工作效率&#xff0c;Eclipse 提供了书签功…...

ROSboard:为您的机器人提供强大的Web可视化工具

ROSboard&#xff1a;为您的机器人提供强大的Web可视化工具 rosboard ROS node that turns your robot into a web server to visualize ROS topics [这里是图片001] 项目地址: https://gitcode.com/gh_mirrors/ro/rosboard 项目介绍 ROSboard 是一个专为机器人设计的 Web 服…...

InnoDB引擎的内存结构

InnoDB擅长处理事务&#xff0c;具有自动崩溃恢复的特性 架构图&#xff1a; 由4部分组成&#xff1a; 1.Buffer Pool&#xff1a;缓冲池&#xff0c;缓存表数据和索引数据&#xff0c;减少磁盘I/O操作&#xff0c;提升效率 2.change Buffer&#xff1a;写缓冲区&#xff0c…...

使用RTP 协议 对 H264 封包和解包,h264的avpacket和NAL的关系

学习内容&#xff1a; 本章探讨如何将h264的 avpacket的视频 数据&#xff0c;通过RTP协议发送到 流媒体 服务器 或者 对端接受者。 前提 我们在将 YUV数据变成avframe后&#xff0c;通过h264 编码变成AVPacket&#xff0c;例如&#xff0c;在安防项目中&#xff0c;或者直播…...

面试经典问题 —— 最大/小前K个数问题(top - K)问题

目录 常见思路更优的解法&#xff08;面试官喜欢的&#xff09; 常见思路 要选出最小的前K个数首先我们会想到排排升序建大堆&#xff0c;排降序建小堆 一个直观的想法是使用&#xff08;小根堆&#xff09;&#xff0c;起始将所有元素放入堆中&#xff0c;然后再从堆中取出k 个…...

HNUST-数据分析技术课堂实验

1.要求 1&#xff0c;从下列第一、二、三组实验中各至少选取一个算法进行实验&#xff0c;选修组实验不作强制要求&#xff1b;2&#xff0c;实验过程不限&#xff0c;目标在于锻炼算法实现过程&#xff0c;即可采用C、C、Java、Python&#xff08;建议&#xff09;等任意语言编…...

HEIC 是什么图片格式?如何把 iPhone 中的 HEIC 转为 JPG?

在 iPhone 拍摄照片时&#xff0c;默认的图片格式为 HEIC。虽然 HEIC 格式具有高压缩比、高画质等优点&#xff0c;但在某些设备或软件上可能存在兼容性问题。因此&#xff0c;将 HEIC 格式转换为更为通用的 JPG 格式就显得很有必要。本教程将介绍如何使用简鹿格式工厂&#xf…...

Next.js 14 性能优化:从首屏加载到运行时优化的最佳实践

在现代 Web 应用中&#xff0c;性能优化直接影响用户体验和业务转化。Next.js 14 提供了多种内置的性能优化特性&#xff0c;今天我们就来深入探讨如何充分利用这些特性&#xff0c;以及一些实用的优化技巧。 图片和字体优化 1. 图片优化 Next.js 的 Image 组件供了强大的图…...

T-SQL语言的软件开发工具

T-SQL&#xff1a;微软SQL Server的强大工具 引言 在现代软件开发中&#xff0c;数据的管理与操作是不可或缺的一部分&#xff0c;而T-SQL&#xff08;Transact-SQL&#xff09;作为微软SQL Server的重要组成部分&#xff0c;承担着数据查询、数据操作、数据插入和数据删除等…...

Ubuntu环境 nginx.conf详解(二)

1、nginx.conf 结构详解&#xff1a; http 块&#xff1a;用于配置 HTTP 服务器的相关设置&#xff0c;包括处理 HTTP 和 HTTPS。 stream 块&#xff1a;用于配置 TCP/UDP 代理服务器&#xff0c;适用于需要进行四层负载均衡的情况。 ... # 全局块 events {...} …...

【Linux】centos7安装php7.4

环境说明 本文档在服务器不能连接互联网的情况下&#xff0c;进行安装php7.4及其扩展。 操作系统&#xff1a;centos7.6 架构&#xff1a;X86_64 一、安装依赖&#xff08;可选&#xff09; 说明&#xff1a;服务器能联网就可以通过 yum install 命令下载对应php需要的依赖。…...

OpenHarmony-6.IPC/RPC组件

IPC/RPC组件机制 1.基本概念 IPC&#xff1a;设备内的进程间通信&#xff08;Inter-Process Communication&#xff09;。 RPC&#xff1a;设备间的进程间通信&#xff08;Remote Procedure Call&#xff09;。 IPC/RPC用于实现跨进程通信&#xff0c;不同的是前者使用Binder驱…...

自然语言处理与知识图谱的融合与应用

目录 前言1. 知识图谱与自然语言处理的关系1.1 知识图谱的定义与特点1.2 自然语言处理的核心任务1.3 二者的互补性 2. NLP在知识图谱构建中的应用2.1 信息抽取2.1.1 实体识别2.1.2 关系抽取2.1.3 属性抽取 2.2 知识融合2.3 知识推理 3. NLP与知识图谱融合的实际应用3.1 智能问答…...

Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集VA-I-FGSM介绍相关定义算法流程 VAI-FGSM代码实现VAI-FGSM算法实现攻击效果 代码汇总vaifgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器&#xff1a; Pytorch | 从零构建AlexNet对…...

【Java基础面试题028】Java中的hashCode和equals方法,与==操作符有什么区别?

回答重点 hashcode、equals 和 都是Java中用于比较对象的三种方式&#xff0c;但是它们的用途和实现还是有挺大区别的。 hashcode用于散列存储结构中确定对象的存储位置。可用于快速比较两个对象是否不同&#xff0c;因为如果它们的哈希码不同&#xff0c;那么它们肯定不相等…...

[ThinkPHP]5.0.23-Rce 1

[ThinkPHP]5.0.23-Rce 1 根据题目知道这是一个5.0.23的PHP RCE&#xff0c;话不多说直接上扫描器 检测出Payload url地址&#xff1a; ?scaptcha&test-1 Post表单参数: _method__construct&filter[]phpinfo&methodget&server[REQUEST_METHOD]1HackBar构造p…...

ByConity BSP 解锁数据仓库新未来

文章目录 前言BSP 模式简介基于 TPC-DS 的 ELT 活动测试环境登录 ECS数据查询配置 执行 02.sqlsql解释&#xff1a;1. 第一步&#xff1a;创建 wscs 临时表2. 第二步&#xff1a;创建 wswscs 临时表3. 第三步&#xff1a;对比 2001 年和 2002 年的数据子查询 1&#xff1a;提取…...

应对 Google Play 政策违规:开发者账号被终止解除指南

目录 解封指南 申诉文案 谷歌问题 授权书 1、授权书标题及双方信息 2、游戏信息 3、授权内容 4、双方义务与责任 5、费用与支付 5、保密条款 6、争议解决 8、其他条款 9、签字盖章 10、日期 相关推荐 解封指南 由于开发人员的疏忽,移除了读写权限的动态申请,使…...

【ES6复习笔记】Map(14)

概念 Map 是 JavaScript 中的一种数据结构&#xff0c;它允许你存储键值对&#xff0c;并且可以通过键来访问对应的值。在本教程中&#xff0c;我们将学习如何声明、添加、删除、获取和遍历 Map 集合。 ES6 提供了 Map 数据结构。它类似于对象&#xff0c;也是键值对的集合。…...

重温设计模式--8、命令模式

文章目录 命令模式的详细介绍C 代码示例C代码示例2 命令模式的详细介绍 定义与概念 命令模式属于行为型设计模式&#xff0c;它旨在将一个请求封装成一个对象&#xff0c;从而让你可以用不同的请求对客户端进行参数化&#xff0c;将请求的发送者和接收者解耦&#xff0c;并且能…...

人工智能ACA(七)——计算机视觉基础

一、自然语言处理基本介绍 1. 自然语言处理的定义 1-1 自然语言 人类使用的在社会生活中自然形成的语言 1-2 自然语言处理 目标是让计算机能够理解、解析、生成和处理人类的自然语言 包含自然语言理解和自然语言生成两部分组成 2. 自然语言处理的发展趋势 3.自然语言处理…...

RCE常见姿势

文章目录 常见漏洞执行函数&#xff1a;1.系统命令执行函数2.代码执行函数 命令拼接符读取文件命令绕过&#xff1a;空格过滤绕过关键字绕过长度过滤绕过无参数命令执行绕过无字母数字绕过利用%0A截断利用回溯绕过利用create_function()代码注入无回显RCE1.反弹shell2.dnslog外…...

CSS系列(36)-- Containment详解

前端技术探索系列&#xff1a;CSS Containment详解 ⚡ 致读者&#xff1a;探索性能优化的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 CSS Containment&#xff0c;这个强大的性能优化特性。 基础概念 &#x1f680; 包含类型 /* 布局包含 */ .layo…...

golang,多个proxy拉包的处理逻辑

在Go语言中&#xff0c;当你设置了多个代理&#xff08;GOPROXY&#xff09;时&#xff0c;Go工具链会按照你设置的顺序尝试每个代理。如果第一个代理失败&#xff0c;它会尝试下一个代理&#xff0c;直到成功获取到模块或者所有代理都尝试失败。最后&#xff0c;如果所有代理都…...

Vue使用Tinymce 编辑器

目录 一、下载并重新组织tinymce结构二、使用三、遇到的坑 一、下载并重新组织tinymce结构 下载 npm install tinymce^7 or yarn add tinymce^7重构目录 在node_moudles里找到tinymce文件夹&#xff0c;把里面文件拷贝一份放到public下&#xff0c;如下&#xff1a; -- pub…...

神经网络-AlexNet

AlexNet是在2012年的ImageNet竞赛后&#xff0c;整理发表的文章&#xff0c;也是对CNN网络的衍生。 网络结构 AlexNet网络结构如下图所示&#xff0c;网络分为了上下两部分&#xff0c;对应两个不同的GPU训练&#xff0c;可以更好的利用GPU算力。只有在特殊的网络层后&#x…...

《人工智能:洞察材料微观与宏观性能关系的神奇之眼》

在材料科学的广袤天地里&#xff0c;一个前沿且充满魅力的课题正吸引着全球科研人员的目光——如何借助人工智能的强大力量&#xff0c;精准模拟材料微观结构与宏观性能之间那错综复杂的关系。这不仅是解开材料性能之谜的关键钥匙&#xff0c;更是推动从航空航天到电子芯片等众…...

count(1)、count(_)与count(列名)的区别?

大家好&#xff0c;我是锋哥。今天分享关于【count(1)、count(_)与count(列名)的区别&#xff1f;】面试题。希望对大家有帮助&#xff1b; count(1)、count(_)与count(列名)的区别&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 SQL 中&#xff0c…...

Docker 镜像加速访问方案

在数字化时代&#xff0c;Docker以其轻量级和便捷性成为开发者和运维人员的首选容器技术。然而自2023年5月中旬起&#xff0c;Docker Hub 的访问速度较慢或不稳定&#xff0c;这对依赖Docker Hub拉取镜像的用户来说无疑是一个挑战。本文将提供 Docker Hub 访问的一系列替代方案…...

菜鸟带新鸟——基于EPlan2022的部件库制作(3D)

设备逻辑的概念&#xff1a; 可在布局空间 中和其它对象上放置对象。可将其它对象放置在 3D 对象上。已放置的对象分到组件的逻辑结构中。 将此属性的整体标识为设备逻辑。可使用不同的功能创建和编辑设备逻辑。 设备的逻辑定义 定义 / 旋转 / 移动 / 翻转&#xff1a;组…...

笔记工具--MD-Markdown的语法技巧

MD格式&#xff0c;全称为Markdown格式&#xff0c;是一种轻量级标记语言文件&#xff0c;主要用于创建格式化文本。以下是对MD格式的详细解释&#xff1a; 一、定义与特点 定义&#xff1a;MD文件是一种纯文本格式的文件&#xff0c;使用简单的符号或语法来标记标题、列表、…...

【ES6复习笔记】生成器(11)

什么是生成器函数 生成器函数是一种特殊的函数&#xff0c;它可以在执行过程中暂停并保存当前状态&#xff0c;然后在需要时恢复执行。生成器函数通过 yield 关键字来实现暂停和恢复执行的功能。 生成器函数的基本用法 定义生成器函数&#xff1a;使用 function* 关键字来定…...

【解决报错】AttributeError: ‘NoneType‘ object has no attribute ‘group‘

学习爬虫时&#xff0c;遇到如下报错&#xff1a; 报错原因&#xff1a; 正则表达式的 search 或 finditer 方法没有找到任何匹配项&#xff0c;可能是换行符处理不当等。 解决方法如下&#xff1a; 在正则表达式末尾加上re.S即可&#xff0c;re.S是一个编译标志&#xff0c…...

UE5.3 C++ Ceiusm中的POI 制作3DUI 结合坐标转化

一.核心思路WidgetComponent CesiumGloberAnchor 二.先制作POI 创建C Actor来制作&#xff0c;APOI。直接上代码 #pragma once#include "CoreMinimal.h" #include "GameFramework/Actor.h" #include "CesiumGlobeAnchorComponent.h" #includ…...

机器学习系列(一)——K-近邻算法

1. 算法定义 KNN 算法属于基于实例的机器学习方法。在对未知数据进行分类或回归之前&#xff0c;我们不需要对数据进行显式的训练或建立复杂的模型。它的核心思想是&#xff1a;对一个新的样本点&#xff0c;寻找在特征空间上与其最相似的 K 个已知数据点&#xff0c;采取“投…...

Android unitTest 单元测试用例编写(初始)

文章目录 了解测试相关库导入依赖库新建测试文件示例执行查看结果网页结果其他 本片讲解的重点是unitTest&#xff0c;而不是androidTest哦 了解测试相关库 androidx.compose.ui:ui-test-junit4: 用于Compose UI的JUnit 4测试库。 它提供了测试Compose UI组件的工具和API。 and…...

uni-app 跨端开发精美开源UI框架推荐

&#x1f380;&#x1f380;&#x1f380;uni-app 跨端开发系列 &#x1f380;&#x1f380;&#x1f380; 一、uni-app 组成和跨端原理 二、uni-app 各端差异注意事项 三、uni-app 离线本地存储方案 四、uni-app UI库、框架、组件选型指南 五、uni-app 蓝牙开发 六、uni-app …...

【微服务】微服务之Feign 与 Ribbon

文章目录 强烈推荐引言优点Feign示例什么是Ribbon&#xff1f;Ribbon 的优点Netflix Feign 和 Ribbon整合Feign 与 Ribbon 的关系Feign 与 Ribbon 结合使用的示例配置文件&#xff08;application.yml&#xff09;说明&#xff1a; Feign 与 Ribbon 结合使用的应用场景1. 动态服…...

【C语言】成绩等级制

将成绩分为A、B、C、D、E等级。具体的等级划分如下&#xff1a; A&#xff1a;90分及以上B&#xff1a;80分到89分C&#xff1a;70分到79分D&#xff1a;60分到69分E&#xff1a;60分以下 #include <stdio.h> int main() {float score 0;printf("请输入学生成绩&a…...

Flutter 插件开发入门

1、初识 Flutter Plugin Flutter 的插件类似于我们在 Android 中说的第三方库&#xff0c;通过使用插件&#xff0c;可以借助插件中的代码实现一些额外功能。 Flutter 的插件以 package 的形式存在&#xff0c;使用 package 的目的是为了达到模块化&#xff0c;可以让代码被共…...

2024.12.25在腾讯云服务器上使用docker部署flask

2024.12.25在腾讯云服务器上使用docker部署flask 操作系统&#xff1a;Ubuntu 根据腾讯云的说明文档安装 Docker 并配置镜像加速源&#xff0c;注意需要安装腾讯云的加速源&#xff0c;使用官网的加速源连接极其不稳定&#xff0c;容易导致运行失败。使用哪个公司的云服务器就…...

2024 年12月英语六级CET6听力原文(Lecture部分)

2024 年12月英语六级CET6听力原文(Long Conersation和Passage) 1 牛津大学关于普遍道德准则的研究及相关观点与建议 译文 2 食物颜色对味觉体验及大脑预期的影响 译文 3 财务资源对意义与幸福之间关系的影响研究 译文...

centos 释放系统预留内存并关闭Kdump服务

背景&#xff1a;Kdump是Linux系统的一种内核崩溃转储机制&#xff0c;它允许在系统发生内核崩溃&#xff08;例如内核panic&#xff09;时&#xff0c;捕获内存的转储信息&#xff0c;从而帮助事后分析故障原因。该过程需要一块预留内存&#xff08;称为crashkernel内存&#…...

基于WEB的房屋出租管理系统设计

摘 要 随着城市化程度的推进&#xff0c;越来越多的人涌入城市&#xff0c;同时也带来的旺盛的租房需求&#xff0c;传统的房屋出租管理依赖人 工记录的方式难以满足人们对房屋出租管理的需求。因此&#xff0c;本文根据房屋出租信息化的需求设计一款基于房屋出租 的管理系统。…...

云边端架构的优势是什么?面临哪些挑战?

一、云边端架构的优势 降低网络延迟&#xff1a;在传统集中式架构中&#xff0c;数据需传输到云计算中心处理&#xff0c;导致网络延迟较高。而云边端架构将计算和存储推向边缘设备&#xff0c;可在离用户更近的地方处理数据&#xff0c;大大降低了网络延迟&#xff0c;提升了用…...

clickhouse解决suspiciously many的异常

1. 问题背景 clickhouse安装在虚拟机上&#xff0c;持续写入日志时&#xff0c;突然关机&#xff0c;然后重启&#xff0c;会出现clickhouse可以正常启动&#xff0c;但是查询sql语句&#xff0c;提示suspiciously many异常&#xff0c;如图所示 2. 问题修复 touch /data/cl…...