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

React18快速入门

需要先安装并配置React相关的工具和插件

下载安装Node.js,这里以MacOS Node.js v22.6.0为例
在这里插入图片描述在这里插入图片描述终端命令行检查是否安装成功

node -v
npm -v

Node.js快速入门

npm设置镜像源

#设置为阿里镜像源
npm config set registry https://registry.npmmirror.com
#查看是否生效
npm get registry 

下载并安装WebStorm

使用WebStorm创建React项目,这里命名为my-react-app

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
打开package.json文件查看如何运行该项目

在这里插入图片描述接着在命令行中运行react-scripts start

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

接着打开src/index.js文件,可以看到页面内容部分主要是通过加载App.js文件完成的。

在这里插入图片描述1.数据渲染

修改src/App.js文件

//数据渲染事例1
function App() {const divContent = '标签内容'const divTitle = '标签标题'return (<div title={divTitle}>{divContent}</div>);
}export default App;

刷新浏览器可以看到新的修改页面

在这里插入图片描述在这里插入图片描述安装React Developer Tools插件后,当访问基于React构建的网站时,将看到ComponentsProfiler面板

在这里插入图片描述
修改src/App.js文件

//数据渲染事例2
import {Fragment} from 'react'
function App() {const list = [{id:1,name:'Tom'},{id:2,name:'Jack'},{id:3,name:'Brown'},]const listContent = list.map((item) => {return (<li key={item.id}>{item.name}</li>)})return (<Fragment><ul>{listContent}</ul></Fragment>);
}export default App;

2.事件处理

修改src/App.js文件

function App() {function handleClick() {alert('点击了按钮!');}return (<button onClick={handleClick}>按钮</button>);
}export default App;

3.状态处理

修改src/App.js文件

function App() {let divContent = '默认内容'function handleClick() {divContent = '新内容'}return (<div><p>{divContent}</p><button onClick={handleClick}>按钮</button></div>);
}export default App;

点击按钮,我们发现页面中的divContent没有发生变化,为了实现这种变化需要引入useState

修改src/App.js文件

import { useState } from 'react';function App() {const [data,setData] = useState({title:'默认标题',content:'默认内容'})function handleClick() {setData({...data,//展开运算符把上面data的属性展开放到这里来content:'新内容'//只对content做修改})}return (<div><div title={data.title}>{data.content}</div><button onClick={handleClick}>按钮</button></div>);
}export default App;

4.组件间通讯

修改src/App.js文件

function Article({title,detailData}){return (<div><h2>{title}</h2><Detail {...detailData} /></div>)
}function Detail({content,active}){return (<div><p>{content}</p><p>{active ? '激活' : '未激活'}</p></div>)
}function App() {const articleData = {title:'标题1',detailData: {content:'内容1',active:true,}}return (<Article {...articleData} />);
}export default App;

5.各种React Hooks

相关文章:

React18快速入门

需要先安装并配置React相关的工具和插件 下载安装Node.js&#xff0c;这里以MacOS Node.js v22.6.0为例 终端命令行检查是否安装成功 node -v npm -vNode.js快速入门 npm设置镜像源 #设置为阿里镜像源 npm config set registry https://registry.npmmirror.com #查看是否生…...

Day11笔记-字典基本使用系统功能字典推导式

二、字典【重点掌握】 1.概念 列表和元组的使用缺点&#xff1a;当存储的数据要动态添加、删除的时候&#xff0c;我们一般使用列表&#xff0c;但是列表有时会遇到一些麻烦,定位元素比较麻烦 # 一个列表/元组保存5个学生的成绩&#xff0c; score_list [66,100,70,78,99] sc…...

Ribbon (WPF)

Ribbon (WPF) 在本文中主要包含以下内容&#xff1a; Ribbon组件和功能应用程序菜单快速访问工具栏增强的工具提示 Ribbon是一个命令栏&#xff0c;它将应用程序的功能组织到应用程序窗口顶部的一系列选项卡中。Ribbon用户界面(UI)增加了特性和功能的可发现性&#xff0c;使用…...

解锁编程潜力,从掌握GitHub开始

目录&#xff1a; 一、搜索开源项目 1、什么是Git 2、Github常用词含义 3、一个完整的项目界面 4、使用Github搜索项目 1&#xff09;in关键词 2&#xff09;star或fork数量去查找 3&#xff09;awesome加强搜索 二、访问速度慢的解决 1、使用网易UU加速器 2、使用…...

HTML转义字符对照表

HTML特殊字符转义对照表一 字符十进制转义字符字符十进制转义字符"&quot;&&amp;<<<&agrave;>>>不断开空格 ?¡¡&Aacute;&aacute;&#226&acirc;&#xffe0;¢¢&circ;&#xffe1;££&…...

【zabbix监控软件(配置及常用键值)】

监控软件–zabbix 同类产品&#xff1a;nagios、cacti 简介&#xff1a;能够部署企业级监控平台。 监控范围 1&#xff09;zabbix SNMP 监控网络设备 防火墙、交换机 2&#xff09;zabbix agent 监控 服务器&#xff1a;raid插槽 CPU 内存插槽 温度 风扇 操作系统&#xff1…...

98、RS485全自动收发电路入坑笔记

因为RS485采用叉分信号&#xff0c;只支持半双工。正常的RS485芯片驱动电路是需要GPIO来切换发送和接收模式。如下图所示&#xff0c;一般的RS485电平转换芯片都有RE/DE脚&#xff0c;用来切换收发模式。 例如这篇推荐&#xff1a;芯片RS485自动收发电路常见问题与应对策略 但…...

单机快速部署开源、免费的分布式任务调度系统——Apache DolphinScheduler

本文主要为大家介绍Apache DolphinScheduler的单机部署方式&#xff0c;方便大家快速体验。 环境准备 需要Java环境&#xff0c;这是一个老生常谈的问题&#xff0c;关于Java环境的安装与配置期望大家都可以熟练掌握。 验证java环境 java -version 下载安装包并解压 使用wg…...

【运维监控】Prometheus+grafana监控zookeeper运行情况

运维监控系列文章入口&#xff1a;【运维监控】系列文章汇总索引 文章目录 一、prometheus二、grafana三、prometheus集成grafana监控zookeeper1、修改zookeeper配置2、修改prometheus配置3、导入grafana模板4、验证 本示例通过zookeeper自带的监控信息暴露出来&#xff0c;然后…...

【C++二分查找】2560. 打家劫舍 IV

本文涉及的基础知识点 C二分查找 LeetCode2560. 打家劫舍 IV 沿街有一排连续的房屋。每间房屋内都藏有一定的现金。现在有一位小偷计划从这些房屋中窃取现金。 由于相邻的房屋装有相互连通的防盗系统&#xff0c;所以小偷 不会窃取相邻的房屋 。 小偷的 窃取能力 定义为他在…...

位段、枚举、联合

位段 在一个结构体中以位&#xff08;最小单位&#xff09;为单位来指定其成员所占的内存长度。位段成员名后面有一个冒号&#xff0c;冒号后有一个数字&#xff08;这个数字是小于等于这个成员所占的位&#xff09;。 typedef struct S {char a : 2;//8char b : 8;//8char c …...

golang学习笔记15——golang依赖管理方法

推荐学习文档 golang应用级os框架&#xff0c;欢迎star基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总golang学习笔记01——基本数据类型golang学习笔记02——gin框架及基本原理golang学习笔记03——gin框架的核心数据结构golang学…...

Linux 挂载磁盘与开机自动挂载操作指南

Linux 挂载磁盘与开机自动挂载操作指南 文章目录 Linux 挂载磁盘与开机自动挂载操作指南一 挂载磁盘1 查看硬盘信息2 新增数据盘执行分区3 新建分区4 创建一个主分区5 分区编号6 初始磁柱编号7 截止磁柱编号8 查看新建分区信息9 分区结果写入10 新分区同步操作系统11 设置新分区…...

『功能项目』单例模式框架【37】

我们打开上一篇36C#拓展 - 优化冗余脚本的项目&#xff0c; 本章要做的事情是编写单例模式基类&#xff0c;让继承其基类的子类在运行时只存在一个&#xff0c;共有两个单例基类框架&#xff0c;分别是不继承MonoBehaviour的单例和继承MonoBehaviour的单例框架 首先编写不继承…...

【计算机网络 - 基础问题】每日 3 题(三)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…...

SpringCloud Nacos

**************************** 准备工作 首先准备号nacos的镜像 根据镜像创建nacos容器 nacos:container_name: nacosimage: nacos/nacos-server:v2.1.0-slimports: #需要监听三个端口- "8848:8848"- "9848:9848"- "9849:9849"privileged: tr…...

机器学习算法详细解读和python实现

文章目录 一、机器学习概述1.1 机器学习的定义与分类机器学习的分类 1.2 机器学习的基本流程1.3 Python在机器学习中的应用Python的优势Python在机器学习中的应用场景 2.1 线性回归的基本概念线性回归的数学表达线性回归的目标 2.2 最小二乘法技术最小二乘法的数学推导最小二乘…...

【Linux】Linux权限历险记---组和用户的关系

欢迎来到 CILMY23 的博客 &#x1f3c6;本篇主题为&#xff1a;Linux权限历险记---组和用户的关系 &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Linux | 算法专题 | 代码训练营…...

华为HCIA、HCIP和HCIE认证考试明细

华为认证体系包括三个主要等级&#xff1a;HCIA&#xff08;华为认证ICT助理&#xff09;、HCIP&#xff08;华为认证ICT高级工程师&#xff09;和HCIE&#xff08;华为认证ICT专家&#xff09;。每个等级的认证都有其特定的考试内容和费用。 HCIA&#xff08;华为认证ICT助理…...

C++数据结构

单向链表 // // Created by 19342 on 2024/9/14. // #include <iostream> using namespace std;// 定义链表节点 struct Node {int data; // 节点存储的数据Node* next; // 指向下一个节点的指针 };// 初始化链表 Node* initList() {return nullptr; }// 在链表末尾添加…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...