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

初始React

news 2026/2/9 10:03:04

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>React</title>

</head>

<body>

    了解React

    <!-- React是一个用于构建web和原生态交互界面的库

    相对于传统DOM开发优势：组件化开发方式，还有不错的性能

    相较于其他前端框架的优势：有丰富的生态和跨平台支持

    -->

    <!-- 使用create-react-app快速搭建开发环境

    create-react-app是一个快速创建React开发1环境的工具，底层由Webpack构建，封装了配置细节，开箱即用

    执行命令：

    npx create-react-app react-basic

    1.npx Node.js工具命令，查找执行后续的包命令

    2.creat-react-app 核心包（固定写法），用于创建React项目

    3.react-basic React项目的名称（可以自定义）

    在创建好的项目里可以看到package.json文件

    里面的主要依赖是

    "react": "^18.2.0",

    "react-dom": "^18.2.0",

    核心命令是：

    "start": "react-scripts start",

    "build": "react-scripts build",

    刚开始学习建议先把src里的文件清理，只需保留app.js和index.js

    -->

    组件

    <!--

        概念：一个组件就是用户界面的一部分，它可以由自己的逻辑外观，组件之间可以相互嵌套，也可以复用多次

        组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

        在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可（在App内）

        // 1. 定义组件

        const Button = () => {

        // 业务逻辑组件逻辑

        return <button>click me!</button>

        }

        // 箭头函数定义

       

        function Button(){

        return <button>click me!</button>

        }

        // 常规函数定义

        function App() {

        return (

            <div className="App">

            {/* 2. 使用组件（渲染组件） */}

            {/* 自闭和（单标签） */}

            <Button />

            {/* 成对标签 */}

            <Button></Button>

            </div>

        )

        }

     -->

     useState基础使用

     <!-- useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

          本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）

          const [count,setCount] = useState(0)

            // 数组接收useState

          1.useState是一个函数，返回值是一个数组

          2.数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量

          3.useState的参数将作为count的初始值

          // useState实现一个计数器按钮

            import { useState } from 'react'

            //引入useState

            // const是不能改变值，但现在是复杂数据类型，修改的是引入地址里面的值，不是修改了引入地址

            function App () {

            // 1. 调用useState添加一个状态变量

            // count 状态变量

            // setCount 修改状态变量的方法

            const [count, setCount] = useState(0)

            // 2. 点击事件回调

            const handleClick = () => {

                // 作用:

                // 1. 用传入的新值修改count

                // 2. 重新使用新的count渲染UI

                setCount(count + 1)

            }

            return (

                <div>

                <button onClick={handleClick}>{count}</button>

                </div>

            )

            }

    -->

    useState修改规则

    <!-- 在React中，状态被认为是只读，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新

            function App () {

                let [count, setCount] = useState(0)

                const handleClick = () => {

                // 直接修改 无法引发视图更新

                // count++

                // console.log(count)

                setCount(count + 1)

            }

            return (

                <div>

                <button onClick={handleClick}>{count}</button>

                </div>

            )

    -->

            <!-- 修改对象状态

            规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

            const [form, setForm] = useState({ name: 'jack' })

            const changeForm = () => {

                // 错误写法：直接修改

                // form.name = 'john'

                // 正确写法：setFrom 传入一个全新的对象（新值替换老值）

                setForm({

                ...form,

                // 展开原本有的字段

                name: 'john'

                })

            }

            return (

                <div>

                <button onClick={changeForm}>修改form{form.name}</button>

                </div>

            )

            -->

            组件基础样式方案

            <!--

                1.行内样式（不推荐）

                2.class类名控制

                // 在js文件里导入样式（css）

                import './index.css'

                // 通过类名控制才需要导入

                const style = {

                color: 'red',

                fontSize: '50px'

                }

                function App () {

                return (

                    <div>

                       

                    {/* 行内样式控制 */}

                    <span style={style}>this is span</span>

                    {/* <span style={color: 'red'，fontSize: '50px'}>this is span</span> */}

                    {/* 这样写也行 */}

                    {/* 通过class类名控制 */}

                    <span className="foo">this is class foo</span>

                    {/* className是规定好的名字，不能用class */}

                    </div>

                )

                }

            -->

</body>

</html>

相关文章：

初始React

<!DOCTYPE html> <html> <head> <meta charset"UTF-8" /> <title>React</title> </head> <body> 了解React <!-- React是一个用于构建web和原生态交互界面的库 相对于传统DOM开发优势&#xff1a;组件化开发…...

编程日记 2023/11/27 3:33:01

2.5 逆矩阵

一、逆矩阵的注释 假设 A A A 是一个方阵&#xff0c;其逆矩阵 A − 1 A^{-1} A−1 与它的大小相同&#xff0c; A − 1 A I A^{-1}AI A−1AI。 A A A 与 A − 1 A^{-1} A−1 会做相反的事情。它们的乘积是单位矩阵 —— 对向量无影响&#xff0c;所以 A − 1 A x x A^{…...

编程日记 2023/11/27 3:32:00

物流实时数仓：数仓搭建（ODS）

系列文章目录 物流实时数仓&#xff1a;采集通道搭建 物流实时数仓&#xff1a;数仓搭建 文章目录 系列文章目录前言一、IDEA环境准备1.pom.xml2.目录创建 二、代码编写1.log4j.properties2.CreateEnvUtil.java3.KafkaUtil.java4.OdsApp.java 三、代码测试总结 前言 现在我们…...

编程日记 2023/11/27 3:30:59

【ARM 嵌入式 编译 Makefile 系列 18 -- Makefile 中的 export 命令详细介绍】

文章目录 Makefile 中的 export 命令详细介绍Makefile 使用 export导出与未导出变量的区别示例&#xff1a;导出变量以供子 Makefile 使用 Makefile 中的 export 命令详细介绍 在 Makefile 中&#xff0c;export 命令用于将变量从 Makefile 导出到由 Makefile 启动的子进程的环…...

编程日记 2023/11/27 3:29:58

【opencv】计算机视觉：停车场车位实时识别

目录 目标 整体流程 背景 详细讲解 目标 我们想要在一个实时的停车场监控视频中&#xff0c;看看要有多少个车以及有多少个空缺车位。然后我们可以标记空的&#xff0c;然后来车之后&#xff0c;实时告诉应该停在那里最方便、最近&#xff01;&#xff01;&#xff01;实现…...

编程日记 2023/11/27 3:28:56

播放器开发(三)：FFmpeg与SDL环境配置

学习课题&#xff1a;逐步构建开发播放器【QT5 FFmpeg6 SDL2】 环境配置 我这边的是使用macOS&#xff1b;IDE用的是CLion&#xff1b;CMake构建&#xff0c;除了创建项目步骤、CMakeLists文件有区别之外的代码层面不会有太大区别。 配置上只添加一下CMakeLists中FFmpeg和SD…...

编程日记 2023/11/27 3:27:52

KubeVela核心控制器原理浅析

前言 在学习 KubeVela 的核心控制器之前&#xff0c;我们先简单了解一下 KubeVela 的相关知识。 KubeVela 本身是一个应用交付与管理控制平面&#xff0c;它架在 Kubernetes 集群、云平台等基础设施之上&#xff0c;通过开放应用模型来对组件、云服务、运维能力、交付工作流进…...

编程日记 2023/11/27 3:26:49

迎接“全全闪”时代 XSKY星辰天合发布星海架构和星飞产品

11 月 17 日消息&#xff0c;北京市星辰天合科技股份有限公司&#xff08;简称&#xff1a;XSKY星辰天合&#xff09;在北京首钢园举办了主题为“星星之火”的 XSKY 星海全闪架构暨星飞存储发布会。 &#xff08;图注&#xff1a;XSKY星辰天合 CEO 胥昕&#xff09; XSKY星辰天…...

编程日记 2023/11/27 3:25:48

[架构相关]基础架构设计原则

基础架构设计原则 文章目录 基础架构设计原则一、可用性&#xff08;Availability&#xff09;1.1、引入冗余1.2、负载均衡1.3、故障转移1.4、备份和恢复策略 二、可扩展性&#xff08;Scalability&#xff09;2.1 水平扩展2.2 垂直扩展2.3 弹性扩展 三、可靠性&#xff08;Rel…...

编程日记 2023/11/27 3:24:47

测试在 Oracle 下直接 rm dbf 数据文件并重启数据库

创建一个新的表空间并创建新的用户&#xff0c;指定新表空间为新用户的默认表空间 create tablespace zzw datafile /oradata/cesdb/zzw01.dbf size 10m;zzw用户已经创建过&#xff0c;这里修改其默认表空间 alter user zzw quota unlimited on zzw; alter user zzw default …...

编程日记 2023/11/27 3:23:45

【开源】基于JAVA的计算机机房作业管理系统

项目编号&#xff1a; S 017 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S017&#xff0c;文末获取源码。} 项目编号&#xff1a;S017&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 登录注册模块2.2 课程管理模块2.3 课…...

编程日记 2023/11/27 3:20:41

Ubuntu 配置静态 IP

Ubuntu 18 开始可以使用netplan配置网络。配置文件位于/etc/netplan/xxx.yaml中&#xff0c;netplan默认是使用NetworkManager来配置网卡信息的。 修改配置文件&#xff1a; 1、打开文件编辑&#xff1a;sudo vi 01-network-manager-all.yaml原文件内容如下&#xff1a;netwo…...

编程日记 2023/11/27 3:19:40

Spring Cloud实战 |分布式系统的流量控制、熔断降级组件Sentinel如何使用

专栏集锦&#xff0c;大佬们可以收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https:/…...

编程日记 2023/11/27 3:17:38

第六届 传智杯初赛B组

文章目录 A. 字符串拼接&#x1f37b; AC code B. 最小差值&#x1f37b; AC code C. 红色和紫色&#x1f37b; AC code D. abb&#x1f37b; AC code E. kotori和素因子&#x1f37b; AC code F. 红和蓝&#x1f37b; AC code &#x1f970; Tips&#xff1a;AI可以把代码从 j…...

编程日记 2023/11/27 3:16:37

文档向量化工具（二）：text2vec介绍

目录 前言 text2vec开源项目 核心能力 文本向量表示模型 本地试用 安装依赖 下载模型到本地&#xff08;如果你的网络能直接从huggingface上拉取文件&#xff0c;可跳过&#xff09; ​运行试验代码 前言 在上一篇文章中介绍了&#xff0c;如何从不同格式的文件里提取…...

编程日记 2023/11/27 3:14:34

vscode中pylance无法显示outline无法跳转

当打开的workspce中有较多的文件时&#xff0c;pylance需要分析的文件太多&#xff0c;导致卡住&#xff0c;无法分析到对应的python文件 常见的情况是&#xff0c;当我们在workspace中包含了data文件夹&#xff08;通常是通过软连接方式把数据集链接过来&#xff09;&#xf…...

编程日记 2023/11/27 3:12:31

番外篇之通讯录

前言&#xff1a;用到的知识点有枚举、结构体、数组&#xff0c;快速排序&#xff08;用的名字排序&#xff09; 下面是测试函数&#xff1a; test.c #define _CRT_SECURE_NO_WARNINGS 1 #include"contact.h" void menu() {printf("*************************…...

编程日记 2023/11/27 3:10:29

学生信息管理系统程序Python

系统主界面 在该界面中可以选择要使用功能对应的菜单进行不同的操作。在选择功能菜单时&#xff0c;有两种方法&#xff0c; 一种是输入1&#xff0c;另一种是按下键盘上的↑或↓方向键进行选择。这两种方法的结果是一样的&#xff0c;所以使用哪种方法都可以。 &#xff08;…...

编程日记 2023/11/27 3:09:28

[js] for forEach for of 循环里await关键字的用法

1、for&#xff1a;循环中使用await的写法&#xff08;生效&#xff09; async function loop(){for( let i0; i<array.length; i ){let datas await getDatas()break} }2、forEach&#xff1a;循环中使用await的写法&#xff08;不生效&#xff09;&#xff1a; array.f…...

编程日记 2023/11/27 3:08:27

Linux面试题（二）

目录 17、怎么使一个命令在后台运行? 18、利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息&#xff1f; 19、哪个命令专门用来查看后台任务? 20、把后台任务调到前台执行使用什么命令?把停下的后台任务在后台执行起来用什么命令? 21、终止进程用什么命令…...

编程日记 2023/11/27 3:07:26

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2026/2/8 6:37:43

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2026/2/1 19:08:45

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

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

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

编程新知 2026/2/7 8:45:41

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2026/1/30 15:27:25

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2026/1/24 19:22:03

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2026/1/25 10:01:01