React18从入门到实战

文章目录

  • 一、React环境的搭建
  • 二、项目文件的介绍
    • （1）package.json，他是项目存放依赖包的地方，里面包括了一些项目核心包及下载的其他插件包
    • （2）src文件夹是项目源码目录，平时开发页面就在其中
    • （3）.public文件
    • （4）node_modules
  • 三. JSX
    • 什么是JSX
    • JSX中使用js表达式
    • JSX实现列表渲染
    • JSX实现条件渲染
    • if else if else（可以根据多种情况来判断显示模板内容）
  • 四. 事件绑定
    • 基础绑定
    • 获取事件对象参数
  • 五. React的组件
  • 六. useState
    • 基础使用
    • 自增器小例子：
    • useState的特点
  • react组件样式
  • B站评论案例

一、React环境的搭建

创建react项目的更多方式

使用npx react-create-app react-basic项目名称创建

在这里插入图片描述

启动项目

 npm start

打包项目

 npm run build

启动测试运行项目

npm test

将项目中隐藏的webpack配置释放出

npm run eject

二、项目文件的介绍

（1）package.json，他是项目存放依赖包的地方，里面包括了一些项目核心包及下载的其他插件包

 "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

以上就是package文件中存放项目核心包的地方

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

这个地方是项目中可执行的一些命令

（2）src文件夹是项目源码目录，平时开发页面就在其中

将其中除去index.js和app.js的文件全部删掉并分别进入index和app将其中的引用代码清除，保留一个干净的目录开始练习

index.js文件是整个项目的入口，运行的起点

index.js删除后
//react必要的俩个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入项目的根组件
import App from './App';

//把app根组件渲染到id为root的节点上（节点在public的index.html中）
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

app.js文件是整个项目的根组件

app.js删除后
//app->index.js->public/index.htnl(root)路径
function App() {
  return (
    <div className="App">
          this is app
    </div>
  );
}

export default App;

（3）.public文件

favicon.ico

public文件里面通常放着一些静态资源。例如.ico结尾的文件即为我们项目运行成功后，在浏览器页签中所展示的icon图标，但是我们不能将其替换为png或者jpg格式的文件，如果想替换的话就必须替换为ico格式的文件。

index.html

项目的入口文件，引用了第三方类库啊，还可以引入cdn，或者样式，但是其中的div id=“root”>是项目的总容器，所有的内容存储在这个容器中。这个容器有且只能有一个。且在项目的其他地方我们不建议往这个容器中加入我们待渲染的组件和页面，因为在root中我们添加的是APP，如果我们再添加其他元素进去，会将我们添加的APP顶掉。

manifest.json

该文件是一个套壳的配置文件，当我们的项目需要在手机端运行时，就需要在这个文件里面进行配置。通过安卓和苹果的应用程序都需要使用专门的开发语言进行开发，因此如果我们想使用html来进行简单的移动端页面的开发，就需要进行套壳。这种就在这里不进行过多的讲解。

Robots.txt

该文件是屏蔽文件，主要是为了防止爬虫来进行页面数据的爬去，可以参考如下网站的简介 https://blog.csdn.net/weixin_30955341/article/details/94896204

（4）node_modules

该目录下所对应的文件时我们所安装的包文件

三. JSX

什么是JSX

JSX是js和xml（html）的缩写1，表示在js代码中能便编写html模板结构，它是react中编写ui模板的方式

在这里插入图片描述

本质并不是标准的js语法，它是js语法的扩展，浏览器本身不能直接识别，需要通过解析工具（babel）解析后才能在浏览器运行

在这里插入图片描述

jsx优点：

1.html的声明式模板写法
2.js的可编程能力

JSX中使用js表达式

通过大括号语法{}识别js中的表达式，比如常见的变量，函数调用，方法调用等

1. 使用引号传递字符串
2. 使用js变量
3. 函数调用和方法调用
4. 使用js对象
在这里插入图片描述

const count  = 100
function getName (){
  return 'zhang'
}
function App() {
  return (
    <div className="App">
          this is app
          {/* {使用引号传递字符串} */}
          {'this is message'}
          {/* 识别js变量 */}
          {count}
          {/* 函数调用和方法调用 */}
          {getName()}
          {new Date().getDate()}
          {/* 使用js对象 */}
          <div style={{color:'red'}}>red div</div>
          
    </div>
  );
}
export default App;

JSX实现列表渲染

在这里插入图片描述

const list = [
  {id:0,name:"vue"},
  {id:1,name:"react"},
  {id:2,name:"微信小程序"}
]
function App() {
  return (
    <div className="App">
         <ul>
          {list.map(item=><li key={item.id}>{item.name}</li>)}
         </ul>
    </div>
  );
}

export default App;

JSX实现条件渲染

逻辑运算符&&(只需要根据变量判断是否显示隐藏)

const flag = true
function App() {
  return (
    <div className="App">
         {flag&&<span>flag为true就显示flase不显示</span>}
    </div>
  );
}

export default App;

三元表达式（可以根据变量来显示true的模板内容还是false的模板内容）

const flag = false
function App() {
  return (
    <div className="App">
         {flag?<span>loading...</span>:<span>no loading</span>}
    </div>
  );
}

export default App;

if else if else（可以根据多种情况来判断显示模板内容）

// 定义文章类型
const articleType = 2
function getArticleType(){
  if(articleType===0){
    return <div>我是无图文章</div>
  }else if(articleType===1){
    return <div>我是单图文章</div>
  }else if(articleType===2){
    return <div>我是双图文章</div>
  }else{
    return <div>我是三图或者更多图的文章</div>
  }
}
function App() {
  return (
    <div className="App">
      {/* 通过调用函数来渲染不同模板 */}
      {getArticleType()}
    </div>
  );
}

export default App;

在这里插入图片描述

四. 事件绑定

基础绑定


function App() {
  function handClick(){
    alert('我被点击了')
  }
  return (
    <div className="App">
      <button onClick={handClick}>点我</button>
    </div>
  );
}

export default App;

在这里插入图片描述

获取事件对象参数

默认事件参数


function App() {
  const handClick=(e)=>{
    console.log('我被点击了',e)
  }
  return (
    <div className="App">
      <button onClick={handClick}>点我</button>
    </div>
  );
}

export default App;

自定义参数传递

语法：事件绑定的位置改成箭头函数的写法，在执行click函数实际处理业务函数时候传递实参

在这里插入图片描述

function App() {
  const handClick=(name)=>{
    console.log('我被点击了',name)
  }
  return (
    <div className="App">
      <button onClick={()=>handClick('掌门')}>点我</button>
    </div>
  );
}

export default App;

五. React的组件

组件是什么

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

React组件

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

在这里插入图片描述


const Button=()=>{
  //业务组件逻辑
  return <button>click mo</button>
}
function App() {
  
  return (
    <div className="App">
    {/* 自闭合 */}
    <Button/>
    {/* 成对标签 */}
    <Button></Button>
    </div>
  );
}

export default App;

六. useState

基础使用

useState是一个react hook函数，它允许我们向一个组件添加一个状态变量，从而控制组件的渲染效果

const [count setCount] = useState(0)

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

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

3. useState的参数做为count的初始值

自增器小例子：


// 实现一个计数器点击自增
import {useState} from 'react'
function App() {
  // 1.调用useState添加一个状态变量
  //count 状态变量
  // setCount修改状态变量的方法
  const [count,setCount]=useState(0)
  // 2.点击事件回调
  const handleClick=()=>{
    //作用：
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染视图
    setCount(count+1)
  }
  return (
    <div className="App">
        <button onClick={handleClick}>{count}</button>
    </div>
  );
}

export default App;

useState的特点

在react中，状态被认为是只读的，我们应该替换他而不是修改它，直接修改状态不能引起视图更新

修改变量状态

let [count,setCount] = useState(0)
const handleClick=()=>{
	//直接修改无法引起视图更新
	count++
	console.log(count
}

const handleClick=()=>{
//作用：
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染视图
    setCount(count+1)
 }

修改对象状态

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


import {useState} from 'react'
function App() {
  // 1.调用useState添加一个状态变量
  //count 状态变量
  // setCount修改状态变量的方法
  const [form,setForm]=useState({name:"张"})
  // 2.点击事件回调
  const changeForm=()=>{
    //作用：
    // 1.用传入的新值修改count
    // 2.重新使用新的count渲染视图
    setForm({
      ...form,
      name:"赵"
    })
  }
  return (
    <div className="App">
        <button onClick={changeForm}>修改formm{form.name}</button>
    </div>
  );
}

export default App;

react组件样式

命名类名方式需要使用className

import './index.css'
<div className="top"></div>

index.css中
.top{
	width:100px;
	height:100px;
	background:red;
}

行内方式

直接写版本

<div style="width100px;height:100px;">111</div>

简洁版本

const style={
	width:"100px",
	height:"100px"
}

<div style={style}>111</div>

B站评论案例

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【ArcGIS微课1000例】0108：ArcGIS计算归一化差值植被指数

【ArcGIS微课1000例】0108：ArcGIS计算归一化差值植被指数

本文讲解ArcGIS中，基于Landsat8数据的NDVI归一化差值植被指数计算。 文章目录 一、加载数据二、归一化植被指数NDVI1. NDVI介绍2. NDVI计算三、注意事项一、加载数据 加载配套数据0108.rar中的Landsat8的8个单波段数据，如下所示： Landsat8波段信息对照表如下表所示： 接下来…
阅读更多...
前端开发语言有那些？

前端开发语言有那些？

前端开发语言有那些&#xff1f; 1、html 超文本标记语言&#xff1a;构建前端网页的基本结构&#xff0c;就象人的骨架一样。 2、css 层叠样式表&#xff1a;控制网页的样式和布局&#xff0c;就象人需要穿各种服式展现不同风采。 3、javascript 简称 JS 动态脚本语言&#x…
阅读更多...
论文笔记：Detecting Pretraining Data from Large Language Models

论文笔记：Detecting Pretraining Data from Large Language Models

iclr 2024 reviewer评分 5688 1 intro 论文考虑的问题&#xff1a;给定一段文本和对一个黑盒语言模型的访问权限&#xff0c;在不知道其预训练数据的情况下&#xff0c;能否判断该模型是否在这段文本上进行了预训练 这个问题是成员推断攻击(Membership Inference Attacks&…
阅读更多...
SpriingBoot整合MongoDB多数据源

SpriingBoot整合MongoDB多数据源

背景&#xff1a; MongoDB多数据源&#xff1a;springboot为3以上版本&#xff0c;spring-boot-starter-data-mongodb低版本MongoDBFactory已过时&#xff0c; 改为MongoDatabaseFactory。 1、pom引入&#xff1a; <dependency><groupId>org.springframework.boo…
阅读更多...
axios取消请求，解决接口返回顺序错乱问题

axios取消请求，解决接口返回顺序错乱问题

下面的方案适用于系统中的某个请求的取消&#xff0c;项目的请求使用 axios 封装 使用场景&#xff1a;当页面有多个 tab&#xff0c;例如年、月、日的列表数据&#xff0c;当点击切换的时候要获取对应的数据&#xff0c;此时如果快速点击在tab直接反复横跳会出现下面的问题&am…
阅读更多...
K8S - Service简介和 1个简单NodePort例子

K8S - Service简介和 1个简单NodePort例子

大纲图 流量方向 如上图&#xff0c; 当用户or 别的service 从k8s 集群外部访问 集群内的services 流量方向有两种 一种是垂直方向&#xff0c; 通过域名 -> Load Balancer -> gateway -> services , 在k8s 一般是通过ingress 来实现&#xff0c; 而ingress 不是本文…
阅读更多...
免费https详细教程

免费https详细教程

简单叙述一下https的定义和实现https的一些基本作用&#xff0c;然后会给到申请SSL证书的方式以及安装部署流程&#xff0c;最终实现网站的https访问。 随着互联网的快速发展&#xff0c;网络安全问题日益凸显。在互联网上传输敏感信息、进行在线交易和共享个人数据时&#xf…
阅读更多...
nginx配置实例-负载均衡

nginx配置实例-负载均衡

目录 一、目的&#xff1a;实现效果 二、准备工作 三、实验部署 3.1修改第二台Tomcat服务器的监听端口为8081 3.2修改完成后&#xff0c;重新启动tomcat8081这台服务器。 3.3在浏览器测试 3.4在两台tomcat里面webapps目录中&#xff0c;创建名称是edu的文件夹&#xff0c…
阅读更多...
Vue的学习之旅-part3

Vue的学习之旅-part3

Vue的学习之旅-part1 vue的自带指令v-model的修饰符 一般用于input输入框中v-model.numberv-model.trimv-slot 作用域插槽具名插槽插槽-组件数据传递注意点1&#xff1a;注意点2&#xff1a; v-on: 绑定触发事件v-on监听事件的修饰符冒泡&#xff1a; 通过.stop阻止阻止默认行为…
阅读更多...
软考118-上午题-【软件工程】-能力成熟度模型

软考118-上午题-【软件工程】-能力成熟度模型

一、考试题型 选择题&#xff08;13题&#xff09; 二、能力成熟度模型CMM 能力成熟度模型CMM的研究目的是&#xff1a;提供一种评价软件承接方能力的方法&#xff0c;同时它可帮助软件组织改进其软件过程。 CMM 将软件过程改进分为以下5个成熟度级别&#xff1a; 1、初始级…
阅读更多...
探索实践昏暗光线低光照场景下目标检测，基于YOLOv7【tiny/l/x】模型开发构建昏暗光线低光照场景下的目标检测识别系统

探索实践昏暗光线低光照场景下目标检测，基于YOLOv7【tiny/l/x】模型开发构建昏暗光线低光照场景下的目标检测识别系统

昏暗光线低光照条件下的目标检测问题&#xff0c;是机器视觉领域一个长期存在且持续受到关注的挑战。这个问题的背景主要源自现代社会对机器视觉技术的广泛需求&#xff0c;特别是在光线条件不佳的环境下&#xff0c;如夜间监控、自动驾驶、安防系统等场景。在昏暗光线或低光照…
阅读更多...
849. Dijkstra求最短路 I

849. Dijkstra求最短路 I

tips&#xff1a; 采用0x3f3f3f3f作为一个极大值&#xff1a; 1061109567 //是一个很大的数&#xff0c;可以用来代表∞&#xff1b; 在memset里0x3f表示为0x3f3f3f3f memset(a, 0x3f, sizeof a); //0x是十六进制的意思&#xff1b; memset()是对char操作&#xff0c;即一个…
阅读更多...
海外媒体宣发套餐推广8个要点解析为标题-华媒舍

海外媒体宣发套餐推广8个要点解析为标题-华媒舍

在当前全球化的时代背景下&#xff0c;海外市场的开拓对于企业的发展至关重要。而海外媒体宣传是一种有效的推广方式&#xff0c;可以帮助企业在全球范围内打开市场。本文将对8个海外媒体宣发套餐的推广要点进行解析&#xff0c;帮助企业了解如何在海外市场进行宣传推广。 1. 媒…
阅读更多...
js,uniapp,vue,小写数字转化为大写

js,uniapp,vue,小写数字转化为大写

应用场景&#xff1a; 把1、2、3&#xff0c;转为一、二、三 方法&#xff1a; retBigSrt(num) {const changeNum [零, 一, 二, 三, 四, 五, 六, 七, 八, 九]const unit [, 十, 百]num parseInt(num)const getWan (temp) > {const strArr temp.toString().split().re…
阅读更多...
论文阅读《Semantic Prompt for Few-Shot Image Recognition》

论文阅读《Semantic Prompt for Few-Shot Image Recognition》

论文地址&#xff1a;https://arxiv.org/pdf/2303.14123.pdf 论文代码&#xff1a;https://github.com/WentaoChen0813/SemanticPrompt 目录 1、存在的问题2、算法简介3、算法细节3.1、预训练阶段3.2、微调阶段3.3、空间交互机制3.4、通道交互机制 4、实验4.1、对比实验4.2、组…
阅读更多...
软件杯 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

软件杯 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…
阅读更多...
QT C++（QT对象树与内存泄漏管理，QT中文乱码问题）

QT C++（QT对象树与内存泄漏管理，QT中文乱码问题）

文章目录 1. QT对象树与内存泄漏2. QT中文乱码 1. QT对象树与内存泄漏 #include "widget.h" #include "ui_widget.h" #include <QLabel>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//通过代码构…
阅读更多...
SpringCloud Alibaba Sentinel 实现熔断功能

SpringCloud Alibaba Sentinel 实现熔断功能

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第十六篇&#xff0c;即使用 Sentinel 实现熔断功能。 二、 Ribbon 系列 首先我们新建两个服务的提供者…
阅读更多...
90天玩转Python—05—基础知识篇：Python基础知识扫盲,使用方法与注意事项

90天玩转Python—05—基础知识篇：Python基础知识扫盲,使用方法与注意事项

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇：C站最全Python标准库总结 90天玩转Python--02--基础知识篇：初识Python与PyCharm 90天玩转Python—03—基础知识篇：Python和PyCharm（语言特点、学习方法、工具安装） 90天玩转Python—04—基础知识篇：Pytho…
阅读更多...
神经网络中的超参数调整

神经网络中的超参数调整

背景 在深度神经网络学习和优化中&#xff0c;超参数调整一项必备技能&#xff0c;通过观察在训练过程中的监测指标如损失loss和准确率来判断当前模型处于什么样的训练状态&#xff0c;及时调整超参数以更科学地训练模型能够提高资源利用率。在本研究中使用了以下超参数&#x…
阅读更多...
最新文章

Copyright @ 2022~2023