[尚硅谷React笔记]——第1章 React简介

2023-09-17 14:54:39

目录：

 第1章 React简介

  • React的基本使用:
  • 虚拟DOM的两种创建方式：
    • 使用jsx创建虚拟DOM
    • 使用js创建虚拟DOM(一般不用)
    • 虚拟DOM与真实DOM:
  • React JSX:
  • JSX练习：
  • 模块与组件、模块化与组件化的理解
    • 模块
    • 组件
    • 模块化
    • 组件化

 

 第1章 React简介

  • 中文官网: https://react.docschina.org/

React的基本使用:

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = <h1>Hello,React</h1>
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

运行结果：

虚拟DOM的两种创建方式：

  • 使用jsx创建虚拟DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建虚拟DOM
    // const VDOM = <h1 id="title">Hello,React</h1>
    const VDOM = <h1 id="title"><span>Hello,React</span></h1>
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

  • 使用js创建虚拟DOM(一般不用)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>

<script type="text/javascript">
    //1.创建虚拟DOM
    // const VDOM = React.createElement('h1', {id: 'title'}, 'Hello,React')
    const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'))
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
  • 虚拟DOM与真实DOM:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>
<div id="demo"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = (
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

    const TDOM = document.getElementById('demo')

    console.log('虚拟DOM', VDOM)
    console.log('真实DOM', TDOM)
    debugger
    // console.log(typeof VDOM)
    // console.log(VDOM instanceof Object)
</script>
</body>
</html>

React JSX:

  • 全称:  JavaScript XML
  • react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
  • 作用: 用来简化创建虚拟DOM
    • 写法：var ele = <h1>Hello JSX!</h1>
    • 注意1：它不是字符串, 也不是HTML/XML标签
    • 注意2：它最终产生的就是一个JS对象
  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则
    • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    • 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  • babel.js的作用
    • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    const myId = 'aTgUiGu'
    const myData = 'HeLlo,rEaCt'

    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h2 className="title" id={myId.toLowerCase()}>
                <span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
            </h2>
            <h2 className="title" id={myId.toUpperCase()}>
                <span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
            </h2>
            <input type="text"></input>
        </div>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

    // jsx语法规则:
    // 1.定义虚拟DOM时,不要写引号。
    // 2.标等中混入Js表达式时要用
    // 3.样式的类名指定不要用class，要用className.
    // 4.内联样式，要用style={{key : value}}的形式去写。
    // 5.只有一个根标签
    // 6.标签必须闭合
    // 7.标签首字母
    // (1).若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
    // (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

</script>
</body>
</html>

JSX练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title {
            background-color: orange;
            width: 200px;
        }
    </style>
</head>
<body>
<!--准备好一个“容器”-->
<div id="test"></div>

<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    const data = ['Angular', 'React', 'Vue']
    //1.创建虚拟DOM
    const VDOM = (
        <div>
            <h1>前端js框架列表</h1>
            <ul>
                {
                    data.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>

运行结果：

模块与组件、模块化与组件化的理解

模块

  1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
  2. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
  3. 作用：复用js, 简化js的编写, 提高js运行效率

组件

  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  2. 为什么要用组件： 一个界面的功能更复杂
  3. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

  • 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化

  • 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

更多推荐

机器学习实战：Python基于LR线性回归进行预测（十）

文章目录1前言1.1LR的介绍1.2LR的应用2.weather数据集实战演示2.1导入函数2.2导入数据2.3数据整体可视化2.4训练模型2.5预测模型2.6评估模型3.讨论1前言注意这里的LR指的是LinearRegression，线性回归。而非逻辑回归LogisticRegression，虽然二者简称都是LR，但

《DevOps实践指南》- 读书笔记（五）

DevOps实践指南Part4第二步：反馈的技术实践14.建立能发现并解决问题的遥测系统14.1建设集中式监控架构14.2建立生产环境的应用程序日志遥测14.3使用遥测指导问题的解决14.4将建立生产遥测融入日常工作14.5建立自助访问的遥测和信息辐射器14.6发现和填补遥测的盲区14.6.1应用程序和业务度量指标14

【窗体】Winform两个窗体之间通过委托事件进行值传递，基础篇

2023年，第38周。给自己一个目标，然后坚持总会有收货，不信你试试！在实际项目中，我们可能会用到一些窗体做一些小工具或者小功能。比如：运行程序，在主窗体A基础上，点击某个按钮希望能够弹出B窗体，在B窗体完成操作后，希望能够把值传递回到A窗体，然后进行其他业务操作。目录一、显示线上图片二、显示本地图片三、A窗体打开B窗

西瓜书读书笔记整理（六）—— 第六章 支持向量机

第六章支持向量机6.1间隔与支持向量6.1.1什么是支持向量机6.1.2支持向量与间隔6.1.3支持向量机的求解过程6.2对偶问题（dualproblem）6.2.1什么是对偶问题6.2.2如何求解支持向量机的对偶问题6.3核函数（kernelfunction）6.3.1什么是支持向量机的核函数6.3.2常见的几种核函

[NLP] LLM---＜训练中文LLama2(五)＞对SFT后的LLama2进行DPO训练

当前关于LLM的共识大型语言模型（LLM）使NLP中微调模型的过程变得更加复杂。最初，当ChatGPT等模型首次出现时，最主要的方法是先训练奖励模型，然后优化LLM策略。从人类反馈中强化学习（RLHF）极大地推动了NLP的发展，并将NLP中许多长期面临的挑战抛在了一边。基于人类反馈的强化学习(Reinforcement

算法通关村-----数组中元素出现次数问题

数组中出现次数超过一半的数字问题描述数组中有一个数字出现的次数超过数组长度的一半，请找出这个数字。你可以假设数组是非空的，并且给定的数组总是存在多数元素。详见剑指offer39问题分析最直接的方式就是使用hashMap,遍历给定数组，将数字和对应出现次数存储在hashMap中，然后再遍历hashMap，找到出现次数最大

代码随想录算法训练营第三十八天｜理论基础 ● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯

理论基础无论大家之前对动态规划学到什么程度，一定要先看我讲的动态规划理论基础。如果没做过动态规划的题目，看我讲的理论基础，会有感觉是不是简单题想复杂了？其实并没有，我讲的理论基础内容，在动规章节所有题目都有运用，所以很重要！如果做过动态规划题目的录友，看我的理论基础就会感同身受了。代码随想录视频：从此再也不怕动态规划了

第二篇------Virtual I/O Device (VIRTIO) Version 1.1

上篇文章：https://blog.csdn.net/Phoenix_zxk/article/details/132917657篇幅太大，所以分开写，接下来续上4.3.3.2.1设备要求：Guest->Host通知设备必须忽略GPR2的位0-31（从左边数）。这样可以使子通道ID的传递方式与现有的I/O指令传递方式保持

计算机等级考试信息安全三级填空题-二

1.信息安全的五个根本属性是：机密性、完整性可控性、不可否认性和完整性。2.在Windows系统中，查看当前已经启动的效劳列表的命令是：netstart3.在数据库中，删除表的命令是：DROP4.在信息资产治理中，标准信息系统的因特网组件包括：效劳器、网络设备和保护设备。5.在信息资产治理中，标准信息系统的组成局部包括

开源教育对话大模型 EduChat

文章目录一、🚀前言二、🤖本地部署三、👨‍💻使用示例四、🔎总结🍉CSDN叶庭云：https://yetingyun.blog.csdn.net/一、🚀前言教育是一项对人类身心发展产生影响的社会实践活动，旨在从内在激发人们固有或潜在的素质。因此，我们必须坚持以人为本的教育理念，重点关注个性化、引导式和身心全面

拓世科技集团到访考察吉安青原区：共谋AIGC数字经济产业园发展大计

千帆竞发立潮头，奋勇争先谋发展，在中国这片广袤的大地上，先行者的每一次拓进都是历史的华章，远谋者的每一次交汇都是未来的预言。当红色江西大地与现代科技脉搏共振，当青原区的绿意拥抱拓世科技的AIGC科技，一场关于科技与地区发展的交响曲就此奏响。在这个充满变革与机遇的时代，拓世科技集团与吉安青原区政府携手共谋AIGC产业布局

热文推荐
  1. MySQL 约束与复杂查询

    当涉及到数据库管理系统（DBMS）的高级主题时，包括数据库的约束、表的设计以及各种类型的查询，特别是聚合查询、联合查询和合并查询，是非常重要的。这些主题可以帮助我们更好地理解数据库的内部工作机制以及如何有效地操作数据。在这篇博客中，我们将深入探讨这些主题~~目录数据库的约束表的设计1.一对一关系（One-to-OneR

  2. 了解消息中间件的基础知识

    为什么要使用消息中间件？解耦：消息中间件可以使不同的应用程序通过解耦的方式进行通信，减少系统间的依赖关系提供异步通信：消息中间件可以实现异步消息传递，提高系统的响应性能。流量削峰：消息中间件可以起到流量削峰的作用，将短时间内的爆发式流量存储在消息队列中，使系统能够平稳地处理请求解决分布式系统数据传输的需求：如分布式场景

  3. C++57个入门知识点_番外4_静态链接与动态链接中LIB和DLL的区别与使用

    在Qt5.9C++开发指南_创建和使用静态链接库和Qt5.9C++开发指南_创建和使用共享库中我们介绍了Qt中创建使用静态链接和动态链接库的方法，本篇是对具体的库文件和使用方法做一个通用的介绍，相互之间互为参考。文章目录1.两种LIB文件介绍2.关于lib和dll的区别3.库文件的链接使用方法3.1两种链接方式3.2静

  4. JavaWeb基础学习（5）

    JavaWeb基础学习一、Filter1.1Filter介绍1.2Filter快速入门1.3、Filter执行流程1.4、Filter使用细节1.5、Filter-案例-登陆验证二、Listener2.1Listener介绍2.2、ServletContextListener使用三、AJAX3.1AJAX介绍与概念3.

  5. Java编程实践：使用面向对象编程(OOP)概念构建简单的国际象棋游戏

    介绍国际象棋是一个两人玩的策略游戏。使用Java和面向对象编程（OOP）概念来模拟这个游戏可以帮助我们更好地理解OOP的核心原理。本教程将带领您一步步地使用Java构建一个简单的国际象棋游戏。OOP概念概述面向对象编程（OOP）是一种计算机编程范式，其中程序被组织成对象。主要的OOP概念包括：类（Class）：定义对象

  6. LoGoNet：基于局部到全局跨模态融合的精确 3D 目标检测

    论文地址：https://arxiv.org/abs/2303.03595论文代码：https://github.com/sankin97/LoGoNet论文背景激光雷达传感器点云通常是稀疏的，无法提供足够的上下文来区分远处的区域，从而造成性能次优。激光雷达-摄像机融合方法在三维目标检测中表现出了良好的性能。目前先进的

  7. Flask狼书笔记 | 08_个人博客（上）

    文章目录8个人博客8.1大型项目结构8.2编写程序骨架8.3编写博客前台8个人博客个人博客是一个典型的CMS（内容管理系统），通常包含前台和后台两部分。这一张将涉及更高级的项目组织方式，以及一些新的Python包：Flask-Login，Unidecode。8.1大型项目结构本章将学习使用蓝本，和工厂函数，来进一步组织

  8. 设计模式：策略模式

    目录组件代码示例源码中应用优缺点总结策略模式（StrategyPattern）是一种行为型设计模式，它允许在运行时根据不同的情况选择不同的算法或行为。策略模式通过将算法封装成独立的策略类，使得它们可以互相替换，而不影响客户端的使用。组件在策略模式中，有三个核心组件：策略接口（StrategyInterface）：定义了

  9. ARTS打卡第三周

    概述infoq的arts打卡学习，贯彻左耳朵耗子的学习理念，活到老学到老，每天都精进一点，上个星期没有写打卡文档，只能用工作太忙为借口为自己开脱了一、Algorithm一道算法题最近工作使用算法场景较少，基本上是基于数据统计对系统进行优化，因此结合工作的算法暂时没有，最近在学习go，就用go来写一些经典算法吧，再配上单