React的基本使用

安装VSCode插件

  • ES7+ React
  • open in browser

React基本使用

基本使用步骤

  1. 引入两个JS文件（ 注意引入顺序 ）

    <!-- react库, 提供React对象 -->
//本地
<script src="../js/react.development.js"></script>
//线上
//<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- react-dom库, 提供了ReactDOM对象 -->
//本地
<script src="../js/react-dom.development.js"></script>
 //线上
//<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

  2. 在html定义一个根容器标签

    <div id="root"></div>

  3. 创建react元素(类似html元素)

    // 返回值：React元素 
// 参数1：要创建的React元素名称 =》字符串
// 参数2：元素的属性  =》对象 {id: 'box'} 或者 null
// 后面参数：该React元素的所有子节点 =》文本或者其他react元素
const element = React.createElement(
  'h1', 
  {title: '你好, React!'}, 
  'Hello React!'
)

  4. 渲染 react 元素

    // 渲染React元素到页面容器div中
ReactDOM.render(element, document.getElementById('root'))

特殊属性

  • class ==》 className
const element = React.createElement(
  'h1', 
  {
    title: '你好, React!',
    className: 'active'
  }, 
  'Hello React!'
)

在这里插入图片描述

多个渲染

    const title = 'Hello React!'
    const content = '这是对react的介绍，这是介绍'

    const vDom = React.createElement(
        'div', null, [
        React.createElement('h1', { title: '你好, React!', className: 'active' }, title),
        React.createElement('p', null, content)
    ])
    ReactDOM.render(vDom, document.getElementById('root'))

在这里插入图片描述

理解 React 元素

  1. 也称虚拟 DOM (virtual DOM) 或虚拟节点(virtual Node)

  2. 它就是一个普通的 JS 对象, 它不是真实 DOM 元素对象

    虚拟 DOM: 属性比较少 ==> 较轻的对象

    真实 DOM: 属性特别多 ==> 较重的对象

  3. 但它有一些自己的特点

    虚拟 DOM 可以转换为对应的真实 DOM => ReactDOM.render方法将虚拟DOM转换为真实DOM再插入页面

    虚拟 DOM 对象包含了对应的真实 DOM 的关键信息属性

    ​ 标签名 => type: “h1”

    ​ 标签属性 => props: {title: ‘你好, React!’}

    ​ 子节点 => props: {children: ‘Hello React!’}

JSX

基本理解和使用

问题: React.createElement()写起来太复杂了

解决: 推荐使用更加简洁的JSX

JSX 是一种JS 的扩展语法, 用来快速创建 React 元素(虚拟DOM/虚拟节点)

形式上像HTML标签/任意其它标签, 且标签内部是可以套JS代码的

const h1 = <h1 className="active">哈哈哈</h1>

浏览器并不认识 JSX 所以需要引入babel将jsx 编译成React.createElement的形式

babel编译 JSX 语法的包为：@babel/preset-react

运行时编译可以直接使用babel的完整包：babel.js

线上测试: https://www.babeljs.cn/

<!-- 必须引入编译jsx的babel库 -->
<!--本地 -->
<script src="../js/babel.min.js"></script>
<!--线上 -->
<!-- <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->

<!-- 必须声明type为text/babel, 告诉babel对内部的代码进行jsx的编译 -->
<script type="text/babel">
	// 创建React元素 (也称为虚拟DOM 或 虚拟节点)
    const vDom = <h1 class="active">hello React2</h1>
    // 渲染React元素到页面容器div中
    ReactDOM.render(vDom, document.getElementById('root'))
</script>

在这里插入图片描述

注意:

​ 必须有结束标签
​ 整个只能有一个根标签
​ 空标签可以自闭合

JSX中使用 JS 表达式

  • JSX中使用JS表达式的语法：{js表达式}
  • 作用: 指定动态的属性值和标签体文本

  1. 可以是js的表达式, 不能是js的语句

  2. 可以是任意基本类型数据值, 但null、undefined和布尔值没有任何显示

  3. 可以是一个js数组, 但不能是js对象

  4. 可以是react元素对象

  5. style属性值必须是一个包含样式的js对象

    let title = 'i love react'
    const vDom = (
        <div>
            <h1>{title}</h1>
            <h1>{555}</h1>
            <h1>{null}</h1>
            <h1>{undefined}</h1>
            <h1>{true}</h1>
            <h1>{'true'}</h1>
            <h1>{('h1',{ title: '你好, React!',className:'active' },'Hello React!')}</h1>
            <h1>[1,'1',3]</h1>
            <h1 title="{title}" id="name" className="active" style={{color:'red'}}>hello</h1>
        </div>
    )
    ReactDOM.render(vDom, document.getElementById('root'))

在这里插入图片描述

条件渲染

if…else

    let vDom 
    let isLoading = true
    if(isLoading){
        vDom = <h1>加载中....</h1>
    }else{
        vDom = <h1>加载完成</h1>
    }
    ReactDOM.render(vDom, document.getElementById('root'))

在这里插入图片描述

三元表达式

const vDom = isLoading ? <h2>正在加载中2...</h2> : <div>加载完成啦2!</div>
ReactDOM.render(vDom, document.getElementById('root'))

&&

const vDom = isLoading && <h2>正在加载中3...</h2>
ReactDOM.render(vDom, document.getElementById('root'))
// 注意: 只适用于只在一种情况下才有界面的情况

表达式1 && 表达式2

​ 如果表达式1对应的boolean为true, 结果就为表达式2的值

​ 如果表达式1对应的boolean为false, 结果就为表达式1的值

表达式1 || 表达式1

​ 如果表达式1对应的boolean为true, 结果就是表达式1的值

​ 如果表达式1对应的boolean为false, 结果就为表达式2的值

列表渲染

  • react中可以将数组中的元素依次渲染到页面上
  • 可以直接往数组中存储react元素
  • 推荐使用数组的 map 方法
  • 注意：必须给列表项添加唯一的 key 属性, 推荐使用id作为key, 尽量不要用index作为key

需求: 根据下面的数组显示列表

const courses = [
{id: 1, name: ‘React’},
{id: 2, name: ‘Vue’},
{id: 3, name: ‘Uniapp’}
]

在这里插入图片描述

    const courses =[
        {id:1,name:'React'},
        {id:2,name:'Vue'},
        {id:3,name:'Uniapp'}
    ]

    const vDom = (
        <div>
            {courses.map(item=><p key={item.id}>{item.name}</p>)}
        </div>
    )
    ReactDOM.render(vDom, document.getElementById('root'))

样式处理

行内样式

  • 样式属性名使用小驼峰命名法
  • 如果样式是数值，可以省略单位
 <h1  className="active" style={{color:'red',fontSize:50}}>hello</h1>

类名

  • 必须用className, 不能用class
  • 推荐, 效率更高些
<h2 className="active">React class</h2>

在这里插入图片描述

事件处理

绑定事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。比如：onClick、onFocus 、onMouseEnter
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
 <h1  className="active" onClick={function(){alert('hello')}}>hello</h1>

事件处理

绑定事件

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

  • React 事件的命名采用小驼峰式（camelCase），而不是纯小写。比如：onClick、onFocus 、onMouseEnter
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串
const div = <div onClick={事件处理函数}></div>

事件对象

React 根据 W3C 规范来自定义的合成事件, 与原生事件不完全相同

  • 处理好了浏览器的兼容性问题

  • 阻止事件默认行为不能使用return false, 必须要调用: event.preventDefault()

  • 有自己特有的属性, 比如: nativeEvent --原生事件对象

  • 的change监听在输入过程中触发， 而原生是在失去焦点才触发

    • 原理：内部绑定的是原生input事件
function handleClick1(event) {
  console.log(event)
  alert(event.target.innerHTML)
}

const handleClick2 = (event) => {
  const isOdd = Date.now()%2===1
  alert(isOdd)
  if (!isOdd) {
    // return false // 不起作用
    event.preventDefault()
  }
}

const vDom = <div>
    <button onClick={handleClick1}>点击提示按钮文本</button>
    <br/>
    <br/>
    <a href="http://www.baidu.com" onClick={handleClick2}>奇数才去百度</a>
  </div>

ReactDOM.render(vDom, document.getElementById('root'))

快速创建React项目

react脚手架使用

问题: JSX 转 JS 和 ES6 转 ES5 语法运行时编译太慢了
解决: 利用 Webpack 进行打包处理

问题: webpack打包环境搭建太麻烦, 且没有质量保证, 效率低
解决: 使用官方提供的脚手架工具
搭建好了webpack打包环境
项目的目录结构

创建React项目

使用 create-react-app:

  1. 下载 npm i create-react-app -g
  2. 创建项目命令: create-react-app 项目名称

也可以利用 npx 来下载 create-react-app 并创建项目

命令: npx create-react-app 项目名称

npx 做的事情:

  1. 先全局下载 create-react-app
  2. 执行 create-react-app 命令, 创建 react 项目
  3. 自动将 create-react-app 从全局中删除掉

从V18降级到V17的版本

最新的脚手架默认使用的是最新的 React18 的版本, 而这个版本是最近才出稳定版, 企业项目还未开始使用

如何降级到V17的最新版呢?

  1. 重新下载 react 和 react-dom, 并指定17的版本

    npm i react@17 react-dom@17

  2. 修改入口JS的实现

    import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

安装chrome调试工具

问题: 一旦开始进行组件化的应用开发, 我们需要查看应用中组件组成和各个组件的相关数据(props/state)

解决: 使用React的chrome调试工具, React Developer Tools

  • 方式一: chrome应用商品搜索 React, 下载安装React Developer Tools
  • 问题: 需要使用翻墙工具
  • 方式二: 使用本地的安装包
    • 进入扩展程序列表
    • 打开 开发者模式
    • 将安装包的文件夹拖入扩展程序列表界面, 直接安装

网盘地址链接：https://pan.baidu.com/s/1hEn4URDwU7rlBzROj2Y1ug
提取码：Dagy

  • 测试
    • 访问react项目, 插件图标会亮
    • 多了调试选项: Components

启动项目：npm run start

在这里插入图片描述

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

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

相关文章

web前端之实现复选功能、repeat

web前端之实现复选功能、repeat

MENU 1、原生实现1.1、html部分1.2、JavaScript部分1.3、css部分1.4、效果图 2、uniApp实现2.1、html部分2.2、JavaScript部分2.3、css部分2.4、效果图 1、原生实现 1.1、html部分 暂时为null&#xff0c;后续会补充。1.2、JavaScript部分 暂时为null&#xff0c;后续会补充…
阅读更多...
推理性能提升10倍，成本下降一半！第四范式发布大模型推理加速卡、推理框架...

推理性能提升10倍，成本下降一半！第四范式发布大模型推理加速卡、推理框架...

为破解大模型推理中GPU显存瓶颈&#xff0c;第四范式发布了大模型推理框架SLXLLM以及硬件版本的推理加速卡4Paradigm Sage LLM Accelerator&#xff08;简称SLX&#xff09;。通过多任务共享存储及处理优化技术&#xff0c;大模型推理性能提升10倍&#xff1b;在模型效果无损情…
阅读更多...
AJAX-原理XMLHttpRequest

AJAX-原理XMLHttpRequest

定义 使用 查询参数 定义&#xff1a;浏览器提供给服务器的额外信息&#xff0c;让服务器返回浏览器想要的数据 语法&#xff1a;http://xxxx.com/xxx/xxx?参数名1值1&参数名2值2
阅读更多...
vsto excel 插件注册表属性值含义

vsto excel 插件注册表属性值含义

在 VSTO (Visual Studio Tools for Office) 中&#xff0c;LoadBehavior 是用于指定 Office 插件加载行为的一个属性。具体含义如下&#xff1a; - LoadBehavior 0&#xff1a;此值表示插件已被禁用&#xff0c;将不会加载。 - LoadBehavior 1&#xff1a;此值表示插件将在 O…
阅读更多...
C#，图论与图算法，图（Graph）广度优先遍历（BFS，Breadth First Search）算法与源代码

C#，图论与图算法，图（Graph）广度优先遍历（BFS，Breadth First Search）算法与源代码

1 深度优先算法与 宽度优先遍历 深度优先算法（DFS，Deep First Search）与 宽度优先遍历（BFS，Breadth First Search） 是树、图数据结构的基础性、标准性的遍历算法。 2 深度优先算法（DFS，Deep First Search） 深度优先搜索（DFS）是一种用于搜索图形或树数据结构的算法…
阅读更多...
【HTTP】面试题整理

【HTTP】面试题整理

HTTP&#xff1a;什么是队头阻塞以及怎么解决&#xff1f; 队头阻塞&#xff08;Head-of-Line Blocking&#xff09; 计算机网络中的一个概念&#xff0c;特别是在处理HTTP请求时。当多个HTTP请求被发送到一个服务器&#xff0c;并且这些请求被放置在一个队列中等待处理时&…
阅读更多...
石油炼化5G智能制造工厂数字孪生可视化平台，推进行业数字化转型

石油炼化5G智能制造工厂数字孪生可视化平台，推进行业数字化转型

石油炼化5G智能制造工厂数字孪生可视化平台&#xff0c;推进行业数字化转型。在石油炼化行业&#xff0c;5G智能制造工厂数字孪生可视化平台的出现&#xff0c;为行业的数字化转型注入了新的活力。石油炼化行业作为传统工业的重要领域&#xff0c;面临着资源紧张、环境压力、安…
阅读更多...
leetcode刷题（javaScript）——动态规划相关场景题总结

leetcode刷题（javaScript）——动态规划相关场景题总结

动态规划在 JavaScript 刷题中有一定的难度&#xff0c;但也是非常常见和重要的算法思想。动态规划通常适用于需要求解最优解、最大值、最小值等问题的场景&#xff0c;可以将复杂问题拆分成子问题&#xff0c;通过存储子问题的解来避免重复计算&#xff0c;从而提高效率。 理解…
阅读更多...
鸿蒙-项目创建及了解

鸿蒙-项目创建及了解

目录 项目创建 1.App普通项目创建 2.元服务创建 项目结构 .hvigor .idea AppScope entry EntryAbility.ts pages resources module.json5 ohosTest hvigorfile.ts build-profile.json5 oh_modules build-profile.json5 hvigorfile.ts 项目运行 项目创建 F…
阅读更多...
信息系统项目管理师015：元宇宙（1信息化发展—1.5数字化转型与元宇宙—1.5.2元宇宙）

信息系统项目管理师015：元宇宙（1信息化发展—1.5数字化转型与元宇宙—1.5.2元宇宙）

文章目录 1.5.2 元宇宙1.主要特征2.发展演进 记忆要点总结 1.5.2 元宇宙 元宇宙(Metaverse)是一个新兴概念&#xff0c;是一大批技术的集成。北京大学陈刚教授对元宇宙的定义是&#xff1a;元宇宙是利用科技手段进行链接与创造的&#xff0c;与现实世界映射与交互的虚拟世界&am…
阅读更多...
Linux 文件系统：C语言接口、系统接口

Linux 文件系统：C语言接口、系统接口

目录 一、文件接口 二、感性理解Linux系统下“一切皆文件” 三、C语言文件接口 1、fopen 2、当前路径 3、fwrite、fprintf、fputs 4、fgets 模拟实现cat命令 五、系统接口 1、open系统调用 2、write系统调用 例&#xff1a;O_WRONLY 例&#xff1a;O_WRONLY|O_CREAT…
阅读更多...
jeecg启动Sentinel 一直是空白页面 解决办法用 外部 Sentinel SpringCloud之Sentinel概述和安装及简单整合

jeecg启动Sentinel 一直是空白页面 解决办法用 外部 Sentinel SpringCloud之Sentinel概述和安装及简单整合

jeecg启动Sentinel 一直是空白页面 解决办法用 外部 Sentinel SpringCloud之Sentinel概述和安装及简单整合 文章目录 jeecg启动Sentinel 一直是空白页面 解决办法用 外部 Sentinel SpringCloud之Sentinel概述和安装及简单整合 Sentinel概述基本介绍 Sentinel安装下载地址: http…
阅读更多...
旅行社旅游线路预定管理系统asp.net

旅行社旅游线路预定管理系统asp.net

旅行社旅游线路预定管理系统 首页 国内游 境外游 旅游景点 新闻资讯 酒店信息―留言板 后台管理 后台管理导航菜单系统管理修改密码留言管理注册会员管理基础数据设置国别设置有份设地区设置 旅行社管理友情链接管理添加友情链接友情链接管理新闻资讯管理添加新闻资讯新闻资讯管…
阅读更多...
【计算机网络篇】物理层（2）传输方式

【计算机网络篇】物理层（2）传输方式

文章目录 &#x1f354;传输方式⭐串行传输和并行传输⭐同步传输和异步传输&#x1f388;同步传输&#x1f388;异步传输 ⭐单向通信&#xff0c;双向交替通信和双向同时通信 &#x1f354;传输方式 在物理层中&#xff0c;传输方式是指数据在传输介质中传输的方式和方法。常见…
阅读更多...
Springboot整合支付宝沙箱支付

Springboot整合支付宝沙箱支付

2.配置说明 要记住这几个重要的配置 appId 这个是appIdprivateKey 商户私钥publicKey 支付宝公钥, 即对应APPID下的支付宝公钥notifyUrl 支付成功后异步回调地址(注意是必须是公网地址)returnUrl #支付后回调地址signType 签名类型 一般写 RSA2charset utf-8format json #网关…
阅读更多...
基于消失点的相机自标定

基于消失点的相机自标定

基于消失点的相机自标定 附赠最强自动驾驶学习资料&#xff1a;直达链接 相机是通过透视投影变换来将3D场景转换为2D图像。在射影变换中&#xff0c;平行线相交于一点称之为消失点。本文详细介绍了两种利用消失点特性的标定方法。目的是为根据实际应用和初始条件选择合适的标…
阅读更多...
深度学习实战模拟——softmax回归（图像识别并分类）

深度学习实战模拟——softmax回归（图像识别并分类）

目录 1、数据集&#xff1a; 2、完整代码 1、数据集&#xff1a; 1.1 Fashion-MNIST是一个服装分类数据集&#xff0c;由10个类别的图像组成&#xff0c;分别为t-shirt&#xff08;T恤&#xff09;、trouser&#xff08;裤子&#xff09;、pullover&#xff08;套衫&#xf…
阅读更多...
PSCA系统控制集成之复位层次结构

PSCA系统控制集成之复位层次结构

PPU 提供以下对复位控制的支持。 • 复位信号Reset signals&#xff1a;PPU 提供冷复位和热复位输出信号。PPU 还为实现部分保留的电源域管理提供了额外的热复位输出信号。 • 电源模式控制Power mode control&#xff1a;PPU 硬件适当地管理每个支持的电源模式转换的复位信号…
阅读更多...
高端资源素材源码图库下载平台整站系统，附带整站源码

高端资源素材源码图库下载平台整站系统，附带整站源码

推荐高端图库素材下载站的响应式模板和完整的整站源码&#xff0c;适用于娱乐网资源网。 该模板支持移动端&#xff0c;并集成了支付宝接口。 页面设计精美&#xff0c;不亚于大型网站的美工水准&#xff0c;并且用户体验也非常人性化。主要用户分为两类&#xff1a;下载用户…
阅读更多...
Python大数据实践:selenium爬取京东评论数据

Python大数据实践:selenium爬取京东评论数据

准备工作 selenium安装 Selenium是广泛使用的模拟浏览器运行的库&#xff0c;用于Web应用程序测试。 Selenium测试直接运行在浏览器中&#xff0c;就像真正的用户在操作一样&#xff0c;并且支持大多数现代 Web 浏览器。 #终端pip安装 pip install selenium #清华镜像安装 p…
阅读更多...
最新文章

Copyright @ 2022~2023