前端学习--React(1)

一、React简介

React由Meta公司研发,是一个用于 构建Web和原生交互界面的库

优势:组件化开发、不错的性能、丰富生态(所有框架中最好)、跨平台(web、ios、安卓)

开发环境搭建

打开相应文件夹 新建终端并输入

npx create-react-app react1

就可以得到一个名为react1 的项目

运行一下↓

在package.json中,这是两个核心依赖包

"react": "^18.2.0",
"react-dom": "^18.2.0",

 下面是可以执行的命令,开发阶段执行start,开发完毕打包执行build

"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"},

所有的开发工作在src中执行,最开始只保留App.js和index.js即可

然后精简一下App.js和index.js

//index.js//项目入口
//导入必要的核心包
import React from 'react';
import ReactDOM from 'react-dom/client';
//导入项目根组件
import App from './App';
//把App根组件渲染到index.html中id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />
);
//App.js
//项目根组件
function App() {return (<div className="App">this is react</div>);
}export default App;

二、JSX基础

JSX基础和概念

JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中编写 UI模版的方式

既具有HTML声明式写法,又有JS的可编程能力

JSX在原生JS中无法被识别,那如何渲染到浏览器中?

JSX本质

是js语法扩展,需要解析工具(babel)才能在浏览器中运行

Babel · Babel (babeljs.io)

 JSX场景

jsx可以通过{}识别js表达式,有以下四种情况:

1. 使用引号传递字符串

2. 使用JavaScript变量

3. 函数调用和方法调用

4. 使用JavaScript对象

function printName(){return 'Rose'
}function App() {const count = 1000return (<div className="App">{/*1 使用引号传递字符串 */}{'this is react project'}{/* 2 识别js变量 */}{count}{/* 3 函数调用 */}{printName()}{/* 4 方法调用 */}{new Date().getDate()}{/* 5 使用js对象 */}{/* 外层花括号是识别表达式的语法,内层是对象结构 */}<div style={{color : 'red'}}>this is red color</div></div>);
}export default App;

 

JSX列表渲染

核心方法是map,循环哪个结构就在map里return哪个结构,不要忘记每个循环元素都要有唯一标识key

const list = [{name:'Alice',id:1001},{name:'Bob',id:1002},{name:'Candy',id:1003}
]function App() {return (<div className="App">this is a list<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}

JSX条件渲染

基础情况

可以通过逻辑与&&(控制一个元素)和三元表达式:?(两个元素)实现基础的条件渲染

const showSpan = true
function App() {return (<div className="App">{/* 逻辑& */}{showSpan && <span>hello</span>}{/* 三元表达式 */}{showSpan ? <span> showSpan为true</span> : <span>showSpan为false</span>}</div>);
}

复杂情况

用if-else

const type = 1
function getType(){if(type === 1){return <div>我是1</div>}else if(type === 2){return <div>我是2</div>}else{return <div>我是3</div>}
}
function App() {return (<div className="App">{/* 逻辑& */}{getType()}</div>);
}

三、事件绑定

 on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名

function App() {let count = 0const handleClick = () => {count ++console.log('button被点击了'+count)}return (<div className="App"><button onClick={handleClick}> click </button></div>);
}

如果是自定义参数,要写成箭头函数

<button onClick={() => handleClick(1)}> click </button>

事件对象e和自定义参数都需要

<button onClick={(e) => handleClick(e, 1)}> click </button>

 四、React组件

在不同的前端框架,组件是通用概念,组件之间可以嵌套也可以复用

const Button = () => {return <button>Click</button>
}
function App() {return (<div className="App"><Button></Button><Button/></div>);
}

五、useState

useState 是一个 React Hook(函数),它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

即数据驱动视图

下面是一个典型自增按钮

import { useState } from "react";
function App() {//count是状态变量, setCount是修改变量的方法 每次修改count必须调用setCountconst [count, setCount] = useState(0)const handleClick = () => {setCount(count + 1)}return (<div className="App"><button onClick={handleClick}>{count}</button></div>);
}

react中的状态只读,每次应该通过修改状态的函数来替换,直接修改不能引发视图更新

修改对象属性

import { useState } from "react";
function App() {const [student, setStu] = useState({name:'Jack',age:20})const handleClick2 = () => {setStu({...student, //这一行保留,那么只修改name一个属性,反之原有属性都会被覆盖掉name:'XiaoMing'})console.log(student)}return (<div className="App"><button onClick={handleClick2}>{student.name}</button></div>);
}

六、组件样式处理

行内样式

const style = {color:'pink',fontWeight:'700',fontSize:'20px'
}
function App() {return (<div className="App"><span style={style}> 11 </span></div>);
}

class类名控制

//index.css
.fc-lightblue{color: lightblue;
}//index.js
import './index.css'
function App() {return (<div className="App"><span className='fc-lightblue'> 11 </span></div>);
}

案例应用

lodash数组排序

Lodash Documentation

npm i lodash

_.orderBy(collection, [iteratees=[_.identity]], [orders])
//参数分别是 要排序的数组 排序参照属性 排序方法(asc/desc)

classnames动态控制类名

npm i classnames

import classNames from 'classnames'<span className={classNames('class1', {class2: type === item.type})}>{item.text}
</span>

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

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

相关文章

【深度学习实验】注意力机制(四):点积注意力与缩放点积注意力之比较

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 理论介绍a. 认知神经学中的注意力b. 注意力机制 1. 注意力权重矩阵可视化&#xff08;矩阵热图&#xff09;2. 掩码Softmax 操作3. 打分函数——加性注意力模型3. 打分函数——点积注意力与缩放…

设计模式(二)-创建者模式(3)-抽象工厂模式

一、为什么需要抽象工厂模式&#xff1f; 在工厂模式中&#xff0c;我们需要定义多个继承于共同工厂抽象基类的工厂子类&#xff0c;这些子类负责创建一个对应的对象。工厂模式存在一个缺点就是&#xff1a;每次扩展新的工厂子类&#xff0c;就会增加系统的复杂度。 如果我们…

[论文笔记] Scaling Laws for Neural Language Models

概览: 一、总结 计算量、数据集大小、模型参数量大小的幂律 与 训练损失呈现 线性关系。 三个参数同时放大时,如何得到最佳的性能? 更大的模型 需要 更少的样本 就能达到相同的效果。 </

如何使用 WPF 应用程序连接 FastReport报表

随着期待已久的FastReport WPF的发布&#xff0c;您不再需要使用 FastReport .NET 来处理基于 WPF 的项目。 不久前&#xff0c;在 FastReport .NET 中使用 WPF 还相当不方便。并非一切都进展顺利&#xff1b;连接 FastReport.dll 和许多其他问题存在问题。我们重新思考了该方…

No such module ‘FacebookCore‘

在下面的地方添加这个库

2023亚太杯数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…

Jmeter之压力测试总结!

一、基本概念 1.线程组N&#xff1a;代表一定数量的并发用户&#xff0c;所谓并发就是指同一时刻访问发送请求的用户。线程组就是模拟并发用户访问。 2.Ramp-Up Period(in seconds)&#xff1a;建立所有线程的周期&#xff0c;就是告诉jmeter要在多久没启动所有线程&#xff…

【论文阅读笔记】Deep learning for time series classification: a review

【论文阅读笔记】Deep learning for time series classification: a review 摘要 在这篇文章中&#xff0c;作者通过对TSC的最新DNN架构进行实证研究&#xff0c;探讨了深度学习算法在TSC中的当前最新性能。文章提供了对DNNs在TSC的统一分类体系下在各种时间序列领域中的最成功…

和鲸 × 暨大经管:高效 SAAS 服务持续赋能交叉学科应用型数据人才培养

随着新一轮科技革命与产业变革的加速演进&#xff0c;拥有学科背景的应用型数据科学人才逐渐成为我国政产学研各界的人力资源需求重点。为响应需求&#xff0c;国家愈发重视新生力量数据思维与意识的培养&#xff0c;各高校也纷纷探索如何以新兴信息技术赋能传统主流学科。 在…

[Linux] shell脚本相关知识

一、shell脚本基础 1.1 shell脚本的作用 shell将人类使用的高级语言翻译成二进制&#xff0c;再将二进制翻译成高级语言。换句话就是人类写了一个命令集合&#xff0c;然后用bash去翻译给硬件执行。 linux中常见的shell&#xff1a; bash:基于gun的框架下发展的shell csh:类…

竞赛选题 车道线检测(自动驾驶 机器视觉)

0 前言 无人驾驶技术是机器学习为主的一门前沿领域&#xff0c;在无人驾驶领域中机器学习的各种算法随处可见&#xff0c;今天学长给大家介绍无人驾驶技术中的车道线检测。 1 车道线检测 在无人驾驶领域每一个任务都是相当复杂&#xff0c;看上去无从下手。那么面对这样极其…

计算机网络学习笔记(六):应用层(待更新)

目录​​​​​​​ 6.2 文件传送协议FTP(File Transfer Protocol) 6.2.1 FTP概述 6.2.2 FTP的基本工作原理 6.5 电子邮件&#xff1a;SMTP、POP3、IMAP 6.5.1 电子邮件概述 6.5.2 发邮件&#xff1a;简单邮件传送协议SMTP 6.5.3 电子邮件的信息格式、地址格式 6.5.4 收…

Linux编辑器-gcc/g++使用

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;熟练使用gcc/g编译器 > 毒鸡汤&#xff1a;真正…

Leaflet结合Echarts实现迁徙图

效果图如下&#xff1a; <!DOCTYPE html> <html><head><title>Leaflet结合Echarts4实现迁徙图</title><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0">…

2023年中国离心制冷机产量及产业链分析[图]

离心制冷机是一种常用的空调制冷设备&#xff0c;目前主要应用于酒店、写字楼、商场、学校等众多大型场所的集中制冷场景。离心制冷机由离心式制冷压缩机、蒸发器、冷凝器、主电动机、抽气回收装置、润滑系统、控制柜和起动柜等零部件组成。这些零部件的组成有的采用分散型组装…

Rust语言精讲:数据类型全解析

大家好&#xff01;我是lincyang。 今天&#xff0c;我们将深入探讨Rust语言中的数据类型&#xff0c;这是理解和掌握Rust的基础。 Rust语言数据类型概览 Rust是静态类型语言&#xff0c;所有变量类型在编译时确定。Rust的数据类型分为两类&#xff1a;标量类型和复合类型。…

内容输入.type

内容输入.type 查看完整说明 语法 .type(text) .type(text, options)正确用法 cy.get(input).type(Hello, World) // Type Hello, World into the input错误用法 cy.type(Welcome) // Errors, cannot be chained off cy cy.clock().type(www.cypress.io) // Errors, clock…

Windows安装MongoDB

1、下载MongoDB的zip&#xff0c;解压 2、创建目录 mkdir D:\JavaSoftware\Database\MongoDB\mongodb-win32-x86_64-windows-5.0.8\data\db mkdir D:\JavaSoftware\Database\MongoDB\mongodb-win32-x86_64-windows-5.0.8\data\log 3、创建一个配置文件mongod.cfg&#xff0c…

YOLOv8改进 | DAttention (DAT)注意力机制实现极限涨点

论文地址&#xff1a; DAT论文地址 官方地址&#xff1a;官方代码的地址 代码地址&#xff1a;文末有修改了官方代码BUG的代码块复制粘贴即可 一、本文介绍 本文给大家带来的是YOLOv8改进DAT(Vision Transformer with Deformable Attention)的教程&#xff0c;其发布于2022…

数字IC基础:有符号数和无符号数加、减法的Verilog设计

相关阅读 数字IC基础https://blog.csdn.net/weixin_45791458/category_12365795.html?spm1001.2014.3001.5482 本文是对数字IC基础&#xff1a;有符号数和无符号数的加减运算一文中的谈到的有符号数加减法的算法进行Verilog实现&#xff0c;有关算法细节请阅读原文&#xff0…