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

初始React

news 2025/9/8 2:30:08

<!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

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/7 2:06:26

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

编程新知 2025/9/7 8:51:50

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/7/6 16:44:09

Ubuntu系统复制（U盘-电脑硬盘）

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...

编程新知 2025/9/2 18:24:30

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...

编程新知 2025/9/1 9:14:27

背包问题双雄：01 背包与完全背包详解（Java 实现）

一、背包问题概述 背包问题是动态规划领域的经典问题&#xff0c;其核心在于如何在有限容量的背包中选择物品&#xff0c;使得总价值最大化。根据物品选择规则的不同&#xff0c;主要分为两类&#xff1a; 01 背包&#xff1a;每件物品最多选 1 次&#xff08;选或不选&#…...

编程新知 2025/7/23 5:59:50

Qt的学习（二）

1. 创建Hello Word 两种方式&#xff0c;实现helloworld&#xff1a; 1.通过图形化的方式&#xff0c;在界面上创建出一个控件&#xff0c;显示helloworld 2.通过纯代码的方式&#xff0c;通过编写代码&#xff0c;在界面上创建控件&#xff0c; 显示hello world&#xff1b; …...

编程新知 2025/9/7 8:43:10

【R语言编程——数据调用】

这里写自定义目录标题 可用库及数据集外部数据导入方法查看数据集信息 在R语言中&#xff0c;有多个库支持调用内置数据集或外部数据&#xff0c;包括studentdata等教学或示例数据集。以下是常见的库和方法&#xff1a; 可用库及数据集 openintro库 该库包含多个教学数据集&a…...

编程新知 2025/7/9 6:21:34

【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析：合法的安全测试指南

文章目录 &#x1f4cc; 前言&#x1f9f0; 一、前期准备✅ 安装 Kali Linux✅ 获取支持监听模式的无线网卡 &#x1f6e0; 二、使用 Kali Linux 进行 WiFi 安全测试步骤 1&#xff1a;插入无线网卡并确认识别步骤 2&#xff1a;开启监听模式步骤 3&#xff1a;扫描附近的 WiFi…...

编程新知 2025/8/8 23:27:14

详解ZYNQ中的 RC 和 EP

详解ZYNQ中的 RC 和 EP 一、ZYNQ FPGA 开发板基础&#xff08; ZC706 &#xff09; 1. 核心特点 双核大脑 灵活积木&#xff1a; ZC706 集成了 ARM Cortex-A9 双核处理器&#xff08;相当于电脑 CPU&#xff09;和 FPGA 可编程逻辑单元&#xff08;相当于可自定义的硬件积木…...

编程新知 2025/9/2 17:25:43