千峰React:脚手架准备+JSX基础
组件化->封装性
React提供函数组件实现组件化
React和传统JS的区别就是JS需要手动管理DOM操作,React: 采用组件化开发,通过虚拟DOM提升性能。

MVC 是一种软件设计模式,全称为 Model-View-Controller(模型-视图-控制器)。它将应用程序的逻辑分为三个核心组件,以实现代码的分离和模块化



保证自己的node版本在14.18+、16+


main.jsx是主入口
vite构建的react和vue很像,但是npx构建的完全不像

可以用ESlint检测代码报错

有些错误想忽略,可以在这个位置把报的错误写上,例如:'no-empty':'off'

如果想常态化使用这个插件,可以输入这个命令下载,然后再引入
npm i vite-plugin-eslint
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslintPlugin from 'vite-plugin-eslint'//引入// https://vite.dev/config/
export default defineConfig({plugins: [react(),eslintPlugin({include: ['src/*.jsx', 'src/**/*.jsx']//引入要管理的文件,src下的.jsx,*是通配符})],})
每次写完代码在浏览器刷新就会出现报错提示

格式化插件

React和React-dom模块分别起什么作用?

dom操作有两种操作方式:react-dom/client和react-dom/server,一种是对客户端,一种是对服务端,让后端进行操作

React的核心模块除了在浏览器端进行服务,也可以在其他环境使用,比如开发app
这样就不需要dom模块了👇

关于JSX的部分前一篇讲过就不赘述了,讲讲没讲过的
//main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './01_了解JSX.jsx'
//import './index.css'//注释掉这个,用上面那个
//import App from './App.jsx'createRoot(document.getElementById('root')).render(<StrictMode><App /></StrictMode>,
)//01_了解JSX.jsx
function App(){return (<div>Hello App</div>)
}
// 也可以这么写
// const App = () => {// }export default App


return后面最好加个小括号,防止后面的程序不执行
jsx的执行过程👇

JSX和HTML之间的写法区别
在 HTML 中,<label> 标签使用 for 属性来关联表单元素的 id,但是在 JSX 中,由于 for 是 JavaScript 的保留字(用于 for 循环),React 使用 htmlFor 来代替 for 属性。
htmlFor 的值 应该与目标表单元素的 id 相同。
两个单词的属性,例如tab-index必须使用驼峰式命名,写成tabIndex
function App(){return (<div>Hello App<label htmlFor="elem">用户名</label><input type="text" id="elem" tabIndex='1'/></div>)
}
export default App
![]()
但是自定义属性该怎么写就怎么写
<input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/>
//data-id不报错
大括号里可以写JavaScript,注释也是写在js里的,所以注释符号在大括号里{/*我是注释*/}
function App(){return (<div>Hello App<label htmlFor="elem">用户名</label><input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/><div>{1 + 1},{'foo'.toUpperCase()},{[1,2,3].reverse()}</div></div>)
}
export default App

也可以使用声明的变量
function App() {const username='荷叶饭'return (<div>Hello App<label htmlFor="elem">用户名</label><input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/><div>{1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}<br />{username}</div></div>)
}
export default App

对象和函数是不能直接放到JSX里的
function App() {const username = '荷叶饭'const obj = { user: '荷叶饭', age: '19' }const fn=()=>{}return (<div>Hello App<label htmlFor="elem">用户名</label><input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/><div>{1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}<br />{username}<br />{obj}//错<br />{fn}//错</div></div>)
}
export default App

属性使用大括号
![]()
唯一根元素是指最外层只能有一个div,这样可以被脚手架转为对象
如果不想用多余的div包住,可以自己写一个容器
import { Fragment } from "react"//提供的容器,渲染时不会渲染function App() {const username = '荷叶饭'const obj = { user: '荷叶饭', age: '19' }const fn=()=>{}return (<Fragment><div>Hello App<label htmlFor="elem">用户名</label><input type="text" id="elem" tabIndex='1' onClick={()=>{}} data-id='123'/><div>{1 + 1},{'foo'.toUpperCase()},{[1, 2, 3].reverse()}<br />{username}<br />{obj}<br />{fn}</div></div><div>我是多出来的div</div></Fragment>//容器)
}
export default App
Fragment是可以添加key属性的,这里不细讲
style的单位默认是px,不写也可以
![]()
说是这么说但是我打印出来的width和body一样宽了
三种样式
这是引入外部样式,效果是全局的,只要className叫box,效果都是一样的👇
import './04_全局样式.css'function App() {// const myStyle = { width: '100px', height: '100px', background: 'red' }return <div className='box'>hello App</div>
}
export default App//./04_全局样式.css
.box {width: 300px;height: 300px;background-color: rgba(94, 99, 173, 0.299);
}

局部样式这么写,名字后面加【.module.css】就是局部的写法

这个写法是错误的
局部样式应该这么写👇
import './04_全局样式.css'
import style from './05_局部样式.module.css'function App() {// const myStyle = { width: '100px', height: '100px', background: 'red' }return (<><div className='box'>hello App</div><div className={style.box2}>aaaaaa</div></>)
}
export default App

总结使用局部样式的步骤包括:写一个name.module.css命名规范的css->在其他要使用的jsx里导入,导入的时候要命名->使用对应的选择器给标签命名,例如这里是className={style.box2}
一个细节是在css里可以写短线【-】,在jsx里不能这么写,应该用中括号括起来加引号,这么写:
//03_style样式.jsx
import './04_全局样式.css'
import style from './05_局部样式.module.css'function App() {// const myStyle = { width: '100px', height: '100px', background: 'red' }return (<><div className='box'>hello App</div><div className={style.box2}>aaaaaa</div><div className={style['head-title']}>hahaha</div></>)
}
export default App//05_局部样式.module.css
.box2 {width: 300px;height: 300px;background-color: blue;
}
.head-title {width: 500px;height: 100px;background-color: chartreuse;
}

但是有的用点,有的用中括号,这很不好
react脚手架vite里提供了机制可以使用驼峰命名,这样就需要在vite.config.js修改配置
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import eslintPlugin from 'vite-plugin-eslint'// https://vite.dev/config/
export default defineConfig({plugins: [react(),eslintPlugin({include: ['src/*.jsx', 'src/**/*.jsx'],}),],css: {modules: { localsConvention: 'camelCase' },//在这里修改配置},
})
<div className={style.headTitle}>hahaha</div>
sass的预处理
安装sass

写一个sass的文件:

引入并使用
import './06_sass.scss'//引入function App() {return (<><div className='box3'>aaa</div>//使用</>)
}
export default App
预处理器了解就好
sass也可以变成局部的,和局部style是一样的

classnames
可以管理类名
要安装
npm i classnames
导入
import classNames from 'classnames'
使用
import classNames from 'classnames'
import './04_全局样式.css'
import style from './05_局部样式.module.css'function App() {const myClass = classNames({box1: true,box2: false,[style.headTittle]: true,})return (<><div className={myClass}>hello App</div></>)
}
export default App
相关文章:
千峰React:脚手架准备+JSX基础
组件化->封装性 React提供函数组件实现组件化 React和传统JS的区别就是JS需要手动管理DOM操作,React: 采用组件化开发,通过虚拟DOM提升性能。 MVC 是一种软件设计模式,全称为 Model-View-Controller(模型-视图-控制器&#x…...
【算法】快排
题目 快排 思路 如果输入为0或1直接返回;否则取一个基准值,可以取中间位置,如果输入是有序的可以避免时间过长,然后移动指针,先让i指针右移,如果小于基准值就继续右移,j指针左移同理。如果指…...
开放签电子签章工具版 2.0 正式发布,构建全场景电子签约能力、满足复杂的签章管理场景
根据近半年开源用户和市场需求反馈,开放签团队推出电子签章工具版2.0版本,主要解决复杂的签约流程集成和电子印章授权管理场景。以API接口对外提供服务和配置一套可视化后台管理系统,可与业务系统无缝集成,用户使用起来毫无“违和…...
python和pycharm 和Anaconda的关系
好的,下面我会详细说明 Python、PyCharm 和 Anaconda 三者的关系,并逐一解释它们的功能和作用。 1. Python(编程语言) 定义:Python 是一种高级编程语言,设计简洁,易于学习,且功能强…...
DeepSeek V3和R1
DeepSeek V3 和 R1 是深度求索(DeepSeek)推出的两款大模型,基于混合专家架构(MoE),但在设计目标、训练方法和应用场景上存在显著差异。以下是两者的详细对比与补充内容: DeepSeek V3和R1 一、模…...
JavaScript数组-获取数组中的元素
在JavaScript中,数组是一种非常实用的数据结构,它允许我们将多个值存储在一个单独的变量中。无论是数字、字符串还是对象,都可以作为数组的元素。获取数组中的特定元素是操作数组的基础技能之一。本文将详细介绍如何在JavaScript中获取数组中…...
SSE:用于流式传输的协议
一.什么是SSE SSE协议是一种基于http协议的单向通信协议,服务端可以向客户端发送数据,但是客户端不能向服务器发送数据。客户端通过创建一个到服务器的单向连接来监听事件。可以将一次性返回数据包改为流式返回数据。SSE协议支持断线重连,也支…...
Aseprite详细使用教程(7)——切片工具
1.名词解释 快捷键:ShiftC 切片工具功能(了解即可): (1)优化资源加载: 将较大的图像切成多个较小的切片,可减小单个文件大小,在网页或游戏等场景中,能显著提升加载速度…...
航空公司客户价值分析
目录 1 目的 2 方法 3 源代码 4 结果 5 扩展 1 目的 ①借助航空公司客户数据,对客户进行分类; ②对不同的客户类别进行特征分析,比较不同类别的客户的价值; ③针对不同价值的客户类别制定相应的营销策略,为其提供个性…...
基于开源Odoo、SKF Phoenix API与IMAX-8数采网关的圆织机设备智慧运维实施方案 ——以某纺织集团圆织机设备管理场景为例
一、方案背景与需求分析 1.1 纺织行业设备管理痛点 以某华东地区大型纺织集团为例,其圆织机设备管理面临以下挑战: 非计划停机损失高:圆织机主轴轴承故障频发,2024年单次停机损失达12万元(停机8小时导致订单延误&am…...
LLM 架构
LLM 分类 : 自编码模型 (encoder) : 代表模型 : BERT自回归模型 (decoder) : 代表模型 : GPT序列到序列模型 (encoder-decoder) : 代表模型 : T5 自编码模型 (AutoEncoder model , AE) 代表模型 : BERT (Bidirectional Encoder Representation from Transformers)特点 : Enc…...
Word Embeddings
Count-based Approach Term-document matrix: Document vectors Two ways to extract information from the matrix: Column-wise: a document is represented by a |V|-dim vector (V: vocabulary) Widely used in information retrieval: find similar documents 查找類似…...
相机开发调中广角和焦距有什么不一样
在相机中,调整广角和调整焦距是两个不同的概念,它们的作用和实现方式也不同。以下是两者的详细对比和解释: 1. 调整广角 定义 广角是指相机的视野范围(Field of View, FOV)。调整广角实际上是调整相机的视野范围。更广的视野意味着可以捕捉到更多的场景内容(更宽的画面)…...
krpano学习笔记,端口修改,krpano二次开发文档,krpano三维div信息展示,krpano热点显示文字
一、修改krpano端口 .\tour_testingserver -port8085 ,修改端口,指定启动时的端口 二、给krpano添加div展示信息 和场景一起转动,不是layer,layer是固定的,没啥用。 主要是onloaded里面的1个方法。 <action name…...
Jenkins 给任务分配 节点(Node)、设置工作空间目录
Jenkins 给任务分配 节点(Node)、设置工作空间目录 创建 Freestyle project 类型 任务 任务配置 Node 打开任务-> Configure-> General 勾选 Restrict where this project can be run Label Expression 填写一个 Node 的 Label,输入有效的 Label名字&#x…...
深入解析iOS视频录制(二):自定义UI的实现
深入解析 iOS 视频录制(一):录制管理核心MWRecordingController 类的设计与实现 深入解析iOS视频录制(二):自定义UI的实现 深入解析 iOS 视频录制(三):完…...
跳表的C语言实现
跳表(Skip List)是一种基于链表的动态数据结构,用于实现高效的查找、插入和删除操作。它通过引入多级索引来加速查找过程,类似于多级索引的有序链表。跳表的平均时间复杂度为 O(logn),在某些场景下可以替代平衡树。 以…...
Java Web开发实战与项目——Spring Security与权限管理实现
Web应用中,权限管理是系统安全的核心部分,确保用户只能访问他们被授权的资源。Spring Security是Spring框架中的一个安全框架,它提供了强大的认证和授权功能,用于实现用户认证和权限控制。本章节将详细讲解如何使用Spring Securit…...
单元测试方法的使用
import java.util.Date; import org.junit.Test; /** java中的JUnit单元测试* * 步骤:* 1.选中当前项目工程 --》 右键:build path --》 add libraries --》 JUnit 4 --》 下一步* 2.创建一个Java类进行单元测试。* 此时的Java类要求:①此类是公共的 ②此类提供一个公共的无参…...
VScode内接入deepseek包过程(本地部署版包会)
目录 1. 首先得有vscode软件 2. 在我们的电脑本地已经部署了ollama,我将以qwen作为实验例子 3. 在vscode上的扩展商店下载continue 4. 下载完成后,依次点击添加模型 5. 在这里可以添加,各种各样的模型,选择我们的ollama 6. 选…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 (部分有免费额度&#x…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
