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

news2025/11/4 15:31:25

目录：

 第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都以模块来编写的, 这个应用就是一个模块化的应用

组件化

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【微信小程序】关于页面中引入背景的两种方式

【微信小程序】关于页面中引入背景的两种方式

| 布局设计思路 <view class"about"> <view class"pubilcTitle"><view class"en"></view><view class"cn"></view><view class"line"></view> </view> <view cl…
阅读更多...
linux基础（2）

linux基础（2）

目录 一.vi\vim编译器介绍1.三种模式2.vim的使用3.快捷键的使用 二.which&#xff0c;find命令三.grep命令四.wc命令五.管道符六.echo命令1.重定向符 七.tail命令 一.vi\vim编译器介绍 vim\vi是linux中最经典的文本编译器 同图形化界面中的文本编译器是一样的&#xff0c;vi是…
阅读更多...
记录：移动设备软件开发（搭建Android开发环建）

记录：移动设备软件开发（搭建Android开发环建）

目录 前言安装Android Studio 前言 Android是一种基于Linux的开放源代码操作系统&#xff0c;主要用于移动设备&#xff0c;如智能手机和平板电脑。Android提供了一个丰富的应用程序框架&#xff0c;允许开发者使用Java语言创建创新的应用程序。为了开发Android应用程序&#…
阅读更多...
前 K 个高频元素

前 K 个高频元素

题目链接 前 K 个高频元素 题目描述 注意点 k 的取值范围是 [1, 数组中不相同的元素的个数]题目数据保证答案唯一&#xff0c;换句话说&#xff0c;数组中前 k 个高频元素的集合是唯一的返回其中出现频率前 k 高的元素可以按 任意顺序 返回答案 解答思路 使用哈希表存储所…
阅读更多...
Go-Python-Java-C-LeetCode高分解法-第六周合集

Go-Python-Java-C-LeetCode高分解法-第六周合集

前言 本题解Go语言部分基于 LeetCode-Go 其他部分基于本人实践学习 个人题解GitHub连接&#xff1a;LeetCode-Go-Python-Java-C Go-Python-Java-C-LeetCode高分解法-第一周合集 Go-Python-Java-C-LeetCode高分解法-第二周合集 Go-Python-Java-C-LeetCode高分解法-第三周合集…
阅读更多...
Learn Prompt-为什么用 ChatGPT API？

Learn Prompt-为什么用 ChatGPT API？

引用人工智能先驱吴恩达先生说过的话&#xff1a;“一个系统需要的远不止一个提示&#xff08;prompt&#xff09;或者一个对LLM&#xff08;大性语言模型&#xff09;的调用。” API的优点&#xff1a; 集成更深: 通过 API&#xff0c;您可以将 ChatGPT 集成到自己的系统和工…
阅读更多...
腾讯云阿里云云服务器 Linux 操作系统 BT 宝塔面板快速建站教程

腾讯云阿里云云服务器 Linux 操作系统 BT 宝塔面板快速建站教程

宝塔面板概述 宝塔面板是一款服务器管理软件&#xff0c;支持Windows和Linux系统&#xff0c;可以通过Web端轻松管理服务器&#xff0c;提升运维效率。总体来说&#xff0c;宝塔面板具有操作简单、功能丰富、安全可靠等特点&#xff0c;是一款非常实用的服务器管理软件。 宝塔…
阅读更多...
ElasticSearch（ES）简单介绍

ElasticSearch（ES）简单介绍

ES简介 Elasticsearch&#xff08;通常简称为ES&#xff09;是一个开源的分布式搜索和分析引擎&#xff0c;旨在处理各种类型的数据&#xff0c;包括结构化、半结构化和非结构化数据。它最初是为全文搜索而设计的&#xff0c;但随着时间的推移&#xff0c;它已经演变成一个功能…
阅读更多...
QT：使用行编辑器、文本编辑器、单选按钮、水平布局、垂直布局做一个小项目

QT：使用行编辑器、文本编辑器、单选按钮、水平布局、垂直布局做一个小项目

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLineEdit> //行编辑器 #include <QTextEdit> //文本编辑器 #include <QRadioButton> //单选按钮class Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *pare…
阅读更多...
【Vue-01】MVVM数据双向绑定与Vue的生命周期

【Vue-01】MVVM数据双向绑定与Vue的生命周期

目录 一、Vue介绍 1.1 什么是Vue &#xff1f; 1.2 Vue的优点 1.3 库与框架的区别 二、Vue入门 2.1 MVVM&#xff08;数据双向绑定&#xff09; 2.2 BootCDN&#xff08;加速服务&#xff09; 三、Vue实例 3.1 Vue开发示例 3.2 双向数据绑定 3.3 Vue生命周期钩子 一…
阅读更多...
云服务部署：AWS、Azure和GCP比较

云服务部署：AWS、Azure和GCP比较

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出

多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出

多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出 目录 多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 多输入多输出 | MATLAB实现GA-BP遗传算法优化BP神经网络多输入多输出…
阅读更多...
React+Typescript项目环境中搭建并使用redux环境

React+Typescript项目环境中搭建并使用redux环境

前几篇文章 我们的项目已经开始功能渐渐完善了 那么 我们来说最后一个点 redux 这个并不需要我们多努力 其实官方文档给到已经算是很全面了 我们可以直接访问地址 TypeScript 中文手册中文手册和官方是一样的 而且对我们非常友好 我们会在左侧导航栏中找到一个 React 点进去 …
阅读更多...
内网IP端口提供外网连接访问？快解析动态域名与内网映射P2P穿透方案

内网IP端口提供外网连接访问？快解析动态域名与内网映射P2P穿透方案

我们在本地搭建服务器及发布互联网时&#xff0c;可以通过动态域名的方式联网。DDNS原理是用固定的域名代替变化IP&#xff0c;实现局域网发布公网&#xff0c;是适合本地动态IP环境的使用。但当本地没有公网IP时&#xff0c;如果解析绑定到内网IP&#xff0c;将内网IP端口提供…
阅读更多...
【集合】LinkedList 详解

【集合】LinkedList 详解

Java中的LinkedList是一种实现了List接口的双向链表数据结构。链表是由一系列节点&#xff08;Node&#xff09;组成的&#xff0c;每个节点包含了指向上一个节点的指针prev,数据item和指向下一个节点next的指针。 实现了Deque接口&#xff0c;可以在两端进行操作(插入、删除…
阅读更多...
四大函数式接口（重点，必须掌握）

四大函数式接口（重点，必须掌握）

新时代程序员必须要会的 &#xff1a;lambda表达式、链式编程、函数式接口、Stream流式计算 什么是函数式接口 1.函数型接口 package com.kuang.function;import java.util.function.Function;/*** Function函数型接口 有一个输入参数&#xff0c;有一个输出* 只要是函数式接口…
阅读更多...
华为云云耀云服务器L实例评测|利用云服务器部署个人博客站

华为云云耀云服务器L实例评测|利用云服务器部署个人博客站

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 目录 前言效果图环境服务器购买安装宝塔面板环境搭建源码下载配置NGINX打包前端总结 前言 有句话说的好&#xff1a;在小的个体&#xff0c;也有自己的品牌。 就像我和腾讯一样&#xff0c…
阅读更多...
爬虫笔记_

爬虫笔记_

爬虫简介 爬虫初始深入 爬虫在使用场景中的分类 通用爬虫&#xff1a; 抓取系统重要组成部分。抓取的是一整张页面数据 聚焦爬虫&#xff1a; 是建立在通用爬虫的基础上。抓取的是页面中特定的局部内容。 增量式爬虫 监测网站中数据更新的情况。只会抓取网站中最新更新出来的…
阅读更多...
unity学习第1天

unity学习第1天

本身也具有一些unity知识&#xff0c;包括Eidtor界面使用、Shader效果实现、性能分析&#xff0c;但对C#、游戏逻辑不太清楚&#xff0c;这次想从开发者角度理解游戏&#xff0c;提高C#编程&#xff0c;从简单的unity游戏理解游戏逻辑&#xff0c;更好的为工作服务。 unity201…
阅读更多...
Linux内核编译机制

Linux内核编译机制

文章目录 KconfigKconfig语法 KbuildMakefile Linux内核的编译主要过程&#xff1a;配置、编译、安装。 配置主要由Kconfig提供图形界面完成编译主要基于Kbuild编译系统&#xff0c;执行make完成编译安装主要也是基于Kbuild提供的脚本&#xff0c;然后执行make完成安装 Kconf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023