当前位置: 首页 > 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; }// 在链表末尾添加…...

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

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

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

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

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个生活电费的缴纳和查询小程序

一、项目初始化与配置 1. 创建项目 ohpm init harmony/utility-payment-app 2. 配置权限 // module.json5 {"requestPermissions": [{"name": "ohos.permission.INTERNET"},{"name": "ohos.permission.GET_NETWORK_INFO"…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...