REACT学习DAY02(恨连接不上服务器)

受控表单绑定

概念:使用React组件的状态(useState)控制表单的状态

1. 准备一个React状态值

const [value,setValue] = useState('')

2. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数

<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>

React中获取DOM

在 React 组件中获取/操作 DOM,需要使用 useRef React Hook钩子函数,分为两步:

1. 使用useRef创建 ref 对象,并与 JSX 绑定

const inputRef = useRef(null)
<input type="text" ref={inputRef} />

2. 在DOM可用时,通过 inputRef.current 拿到 DOM 对象

八老师说贺越说要先看千锋捏

所以转战 了

感觉自己有点理解了react基本使用?

 这他喵不是和黑马是两个东西吗

当时豆包建议我下的

这个脚手架需要较高版本的Node.js(14.18+,16+)

然后可以

npm create vite@latest

在安装的时候可以选JS或者JS+SWC

所以我们选择JS+SWC

 在文件上面vite.svg是没有被编译过的

使用npm run build就是把它给打包

逆天追踪

已经取消了

只能说我的服务器挂了和我也脱不开关系

ESLint配置与Prettier配置

ESLint是代码规范插件

npm run lint
vite-plugin-eslint

Prettier是代码格式化插件

下载一个这个东西

 然后还是按Alt+Shift+F就格式化了

React模块与react-dom模块分别起什么作用

react模块有核心功能和组件

react-dom模块是操作浏览器DOM,react-dom/server

JSX与HTML之间写法的区别

首先是标签要小写、必须闭合

然后是类选择器要写成className

for属性要换成htmlFor

<label htmlFor="elem">用户名</label>

属性是采取驼峰命名法

大括号使用JS

但是对象和函数不能直接放到JSX的{}中

属性可以使用 大括号渲染

只有唯一的根元素

import { Fragment } from 'react'

这个相当于一个容器,简写就是空箭头

<></>

区别是Fragment可以添加key属性

行间样式、全局样式、局部样式的使用

function App(){return(<div style={{width:'100px',height:'100px',background:'red'}}>hello</div>)
}export default App

写的东西最后会通过脚手架编译成新的东西

引用的话需要这样写:

<div className={style.box2}>aaa</div>
<div className={style['head-title']}>bbbbb</div>

当把配置改一下之后就好用了,这是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'}}
})

把它变成这样加一个css之后就可以使用驼峰命名使用引入的样式了

支持sass预处理和classnames模块的使用

怎么支持预处理呢?

执行一下这个命令:

npm install sass

每一次的旋转都是对我小心脏的锻炼

就怕又断联了

sass.scss

$bg:red;.box3{background-color: $bg;
}

classname模块又是在干嘛的呢?

继续添加一个包:

npm install classnames

import classNames from 'classnames'function App(){const myClass = classNames({box1:true,box2:false,})return(// <div className={ myClass.join(' ')}>//     Hello App// </div><><div className={myClass}>hello App</div></>)
}export default App

还可以用其他的:

React元素是如何添加事件操作

event合成事件,可以解决一些事件的处理

事件委托到容器元素

如何根据不同的条件进行不同的内容渲染

function App(){let count = 0return (<div>Hello App<br />{count >3 ? <div>hello react</div> :  <p>hi JavaScript</p>}</div>)
}
export default App

别的类型+空字符串是转换成字符串类型

但是对象加上空字符串转成的是不同的格式

对一个数据集合进行批量渲染

循环语句:for,while

JSX中默认对数组进行join()操作

数组方法:map

列表渲染需要添加key属性。这些key会告诉react,每个组件里面对应着数组的哪一项,可以帮助React推断发生了什么,从而得以正确地更新DOM树


// function App(){
//     const list = ['aaaa','bbbb','cccc']
//     for(let i=0;i<list.length;i++)
//     {
//         list[i] = <li>{list[i]}</li>
//     }
//     return (
//         <div>hello App
//             hello App
//             <br />
//             <ul>
//                 {list}
//             </ul>
//         </div>
//     )
// }// export default Appfunction App(){const list = ['aaaa','bbbb','cccc']// for(let i=0;i<list.length;i++)// {//     list[i] = <li>{list[i]}</li>// }return (<div>hello App<br /><ul>{ list.map((item,index)=><li key={index}>{item}</li>) }</ul></div>)
}export default App

两种实现组件的标记写法

const Qf = {Welcome() {return <div>hello Welcome</div>},
}const { Welcome } = Qffunction App() {return (<div>hello App<Qf.Welcome></Qf.Welcome><Welcome></Welcome></div>)
}export default App

还有一种函数的写法

react/display-name 规则要求每个 React 组件都应该有一个显示名称,在开发者工具和错误信息里,显示名称有助于识别组件。对于函数式组件,通常函数名会被当作显示名称,但对于像 Qf.Welcome 这样的嵌套组件,ESLint 可能无法自动识别显示名称。

所以需要手动设置(我看千峰的上面没有要求这个,可能是我用的这个版本高)

const Qf=()=>{return (<div>hello Qf</div>)
}// 手动设置 Qf 组件的显示名称
Qf.displayName = 'Qf';Qf.Welcome=()=>{return (<div>hello Welcome</div>)
}// 手动设置 Qf.Welcome 组件的显示名称
Qf.Welcome.displayName = 'Qf.Welcome';function App() {return (<div>hello App<Qf/><Qf.Welcome></Qf.Welcome></div>)
}export default App

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/70651.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python——GUI图形用户界面编程

GUI简介 我们前面实现的都是基于控制台的程序&#xff0c;程序和用户的交互通过控制台来完成 本章&#xff0c;我们来学习GUI图形用户界面编程&#xff0c;我们可以通过python提供的丰富的组件&#xff0c;快速的视线使用图形界面和用户交互 GUI变成类似于“搭积木”&#x…

DeepSeek 助力 Vue 开发:打造丝滑的单选按钮(Radio Button)

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 Deep…

美颜相机1.0

项目开发步骤 1 界面开发 美颜相机界面构成&#xff1a; 标题 尺寸 关闭方式 位置 可视化 2 创建主函数调用界面方法 3 添加两个面板 一个是按钮面板一个是图片面板 用JPanel 4 添加按钮到按钮面吧【注意&#xff1a;此时要用初始化按钮面板的方法initBtnPanel 并且将按钮添…

openharmony中hdf框架的驱动消息机制的实现原理

openharmony中hdf框架的驱动消息机制的实现原理 在分析hdf框架时发现绕来绕去的&#xff0c;整体梳理画了一遍流程图&#xff0c;发现还是有点模糊甚至不清楚如何使用的&#xff0c;详细的每个点都去剖析细节又过于消耗时间&#xff0c;所以有时间便从功能应用的角度一块块的去…

leaflet实现历史轨迹播放效果

效果图如下&#xff1a; 效果实现&#xff1a; 1、添加完整轨迹线&#xff0c;蓝色的 this.echoLine L.polyline(points, { weight: 8 }).addTo(this.map) 2、添加实时轨迹线&#xff0c;初始状态置空 this.realEchoLine L.polyline([], { weight: 12, color: "#FF9…

JAVAEE一>Spring IoC和DI详解

目录 Spring容器说明&#xff1a;Ioc容器优势&#xff1a;DI介绍&#xff1a;从Spring获取对象&#xff1a;获取对象的方法&#xff1a;关于上下文的概念&#xff1a; Controller注解&#xff08;控制层&#xff1a;接收参数并响应&#xff09;&#xff1a;Service注解&#xf…

(四)趣学设计模式 之 原型模式!

目录 一、 啥是原型模式&#xff1f;二、 为什么要用原型模式&#xff1f;三、 原型模式怎么实现&#xff1f;四、 原型模式的应用场景五、 原型模式的优点和缺点六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xf…

完美解决:.vmx 配置文件是由 VMware 产品创建,但该产品与此版 VMware Workstation 不兼容

参考文章&#xff1a;该产品与此版 VMware Workstation 不兼容&#xff0c;因此无法使用 问题描述 当尝试使用 VMware Workstation 打开别人的虚拟机时&#xff0c;可能会遇到以下报错&#xff1a; 此问题常见于以下场景&#xff1a; 从其他 VMware 版本&#xff08;如 ESX…

Linux——安装Git的方法

安装Git的命令&#xff1a; yum -y install git查看Git的版本&#xff1a; git --version

编程小白冲Kaggle每日打卡(13)--kaggle学堂:<机器学习简介>基础数据探索

Kaggle官方课程链接&#xff1a;Basic Data Exploration 本专栏旨在Kaggle官方课程的汉化&#xff0c;让大家更方便地看懂。 Basic Data Exploration 加载并理解您的数据。 使用Pandas熟悉您的数据 任何机器学习项目的第一步都是熟悉数据。您将使用Pandas库进行此操作。Pand…

从零开始的网站搭建(以照片/文本/视频信息通信网站为例)

本文面向已经有一些编程基础&#xff08;会至少一门编程语言&#xff0c;比如python&#xff09;&#xff0c;但是没有搭建过web应用的人群&#xff0c;会写得尽量细致。重点介绍流程和部署云端的步骤&#xff0c;具体javascript代码怎么写之类的&#xff0c;这里不会涉及。 搭…

【Java项目】基于SpringBoot的【高校校园点餐系统】

【Java项目】基于SpringBoot的【高校校园点餐系统】 技术简介&#xff1a;采用Java技术、MySQL数据库、B/S结构实现。 系统简介&#xff1a;高校校园点餐系统是一个面向高校师生的在线点餐平台&#xff0c;主要分为前台和后台两大模块。前台功能模块包括&#xff08;1&#xff…

Django check_password原理

check_password 是 Django 提供的一个用于密码校验的函数&#xff0c;它的工作原理是基于密码哈希算法的特性。 Django 的 make_password 函数在生成密码哈希时&#xff0c;会使用一个随机的 salt&#xff08;盐值&#xff09;。这个 salt 会与密码一起进行哈希运算&#xff0…

Vulnhun靶机-kioptix level 4-sql注入万能密码拿到权限ssh连接利用mysql-udf漏洞提权

目录 一、环境搭建信息收集扫描ip扫描开放端口扫描版本服务信息指纹探测目录扫描 二、Web渗透sql注入 三、提权UDF提权修改权限 一、环境搭建 然后选择靶机所在文件夹 信息收集 本靶机ip和攻击机ip 攻击机&#xff1a;192.168.108.130 靶机&#xff1a;192.168.108.141 扫描…

PHP 会话(Session)实现用户登陆功能

Cookie是一种在客户端和服务器之间传递数据的机制。它是由服务器发送给客户端的小型文本文件&#xff0c;保存在客户端的浏览器中。每当浏览器向同一服务器发送请求时&#xff0c;它会自动将相关的Cookie信息包含在请求中&#xff0c;以便服务器可以使用这些信息来提供个性化的…

PAT 甲级 1090 Highest Price in Supply Chain

构造一个二维数组 v &#xff0c;v[i] 存放指向 i 的所有元素。 构造队列 q 存放每个待读取的节点。 构造数组 high 存放每个节点的高度&#xff08;第几级经销商&#xff09; #include<iostream> #include<queue> #include<cmath> using namespace std; …

DeepSeek掘金——SpringBoot 调用 DeepSeek API 快速实现应用开发

Spring Boot 实现 DeepSeek API 调用 1. 项目依赖 在 pom.xml 中添加以下依赖: <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId></dependency>&l…

算法——数学建模的十大常用算法

数学建模的十大常用算法在数学建模竞赛和实际问题解决中起着至关重要的作用。以下是这些算法的具体信息、应用场景以及部分算法的C语言代码示例&#xff08;由于篇幅限制&#xff0c;这里只给出部分算法的简要代码或思路&#xff0c;实际应用中可能需要根据具体问题进行调整和扩…

推荐几款SpringBoot项目手脚架

作为程序员、一般需要搭建项目手脚架时、都会去Gitee或Github上去找、但是由于Github在国内并不稳定、所以就只能去Gitee去上查找。 不同语言检索方式不一样、但是也类似。 Gitee WEB应用开发 / 后台管理框架 芋道源码 ELADMIN 后台管理系统 一个基于 Spring Boot 2.7.1…

智能自动化新纪元:AI与UiPath RPA的协同应用场景与技术实践

智能自动化新纪元&#xff1a;AI与UiPath RPA的协同应用场景与技术实践 引言 在数字化转型的浪潮中&#xff0c;企业对于自动化技术的需求已从简单的任务执行转向更复杂的智能决策。传统RPA&#xff08;Robotic Process Automation&#xff09;通过模拟人类操作处理重复性任务…