react学习笔记——1. hello react

包含的包一共有4个,分别的作用如下:

  • babel.min.js:可以进行ES6到ES5的语法转换;可以用于import;可以用于将jsx转换为js。注意,在开发的时候,这个转换(jsx转换js)不在线上使用,因为转换需要时间,页面可能会出现白屏。
  • react.development.js:react的核心代码库,引入以后,全局多了一个React对象
  • react-dom.development.js:react操作dom的扩展库,引入以后,全局多了一个ReactDOM对象
    • 注意:react-dom.development.js必须要在react.development.js之后引入。
  • 还有一个是prop-types.js:这个包在7. 组件实例三大属性-props中才会用到,是用于对标签属性添加限制的,是react16版本以后才需要单独引入的。引入以后全局多了一个Prop-Types对象。

引入包以后简单的写一些代码,则会出现一下几个问题
在这里插入图片描述

  • 第一个是因为没有下载react的开发者工具
  • 第二个是确保不要在线上使用babel,因为jsx->js耗时,可能会产生白屏之类的。使用脚手架之后,这个问题就没了。
  • 最后一个是页面的偏爱图标,页面刷新以后,最后一个错误会消失,因为他找不到偏爱图标就不找了。这里可以将任意一个图标放在根目录下,即可作为偏爱图标,但是要求名字必须为"favicon.ico"。放在根目录以后,页面强制刷新(shift+F5)一下即可。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 这是进行移动端适配的 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello react</title>
</head>

<body>
    <!-- 准备一个“容器” -->
    <div id="test"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,但是线上的时候,不这样用,因为这个转换需要时间,页面会产生白屏 -->
    <script src="../js/babel.min.js"></script>
    <!-- 注意,这里面写的是jsx的语法,所以这里type需要是babel。上面不写,默认就是text/javascript -->
    <script type="text/babel">
        /**
         * 步骤:
         *      1、创建虚拟dom
         *      2、渲染虚拟dom到页面
        */
        // 1、创建虚拟dom,注意这里不需要引号,因为这里的代码是jsx
        let VDOM = <h1>hello,react!</h1>
        // 2、渲染虚拟dom,使用render方法,此方法有两个参数,一个是虚拟dom,第二个是容器,并且此方法是一个追加的过程
        ReactDOM.render(VDOM, document.getElementById("test"))
        /**
         * 注意,只有这里需要document,因为react不需要自己操作dom,这里只是一个demo
        */
    </script>
</body>

</html>

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

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

相关文章

webshell详解

Webshell详解 一、 Webshell 介绍二 、 基础常见webshell案例 一、 Webshell 介绍 概念 webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境&#xff0c;也可以将其称做为一种网页后门。黑客在入侵了一个网站后&#xff0c;通常会将asp或php后门文件与…

vscode如何退出/切换 github 账号

退出/切换 github 账号 左下角点击头像按钮&#xff0c;选择注销&#xff0c;然后再重新登录

计算机视觉:替换万物Inpaint Anything

目录 1 Inpaint Anything介绍 1.1 为什么我们需要Inpaint Anything 1.2 Inpaint Anything工作原理 1.3 Inpaint Anything的功能是什么 1.4 Segment Anything模型&#xff08;SAM&#xff09; 1.5 Inpaint Anything 1.5.1 移除任何物体 1.5.2 填充任意内容 1.5.3 替换任…

react ant add/change created_at

1.引入ant的 Table import { Table, Space, Button, message } from antd; 2.获得接口的数据的时候增加上创建时间 const response await axios.get(${Config.BASE_URL}/api/v1/calculation_plans?token${getToken()});if (response.data.message ok) {const data respon…

Scrum是什么意思,Scrum敏捷项目管理工具有哪些?

一、什么是Scrum&#xff1f; Scrum是一种敏捷项目管理方法&#xff0c;旨在帮助团队高效地开展软件开发和项目管理工作。 Scrum强调迭代和增量开发&#xff0c;通过将项目分解为多个短期的开发周期&#xff08;称为Sprint&#xff09;&#xff0c;团队可以更好地应对需求变…

2023华数杯数学建模C题完整5问代码思路分析

目前已经写出2023华数杯C题母亲身心健康对婴儿成长的影响全部5问的完整代码和42页论文&#xff08;正文30页&#xff0c;论文部分摘要如下&#xff1a; 本文共解决了五个问题&#xff0c;涉及婴儿行为特征、睡眠质量与母亲的身体指标和心理指标的关系&#xff0c;以及如何优化…

STL C++学习背景

STL C学习背景 背景知识 背景知识 STL前置知识 STL&#xff0c;英文全称 standard template library&#xff0c;中文可译为标准模板库或者泛型库&#xff0c;其包含有大量的模板类和模板函数&#xff0c;是 C 提供的一个基础模板的集合&#xff0c;用于完成诸如输入/输出、数…

【Linux】Linux工具

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 一、Linux安装软件&#xff1a; 1.yum安装 2.Linux和Windows文件互传 问题: 3.yum卸载软件 二、vim编辑器 1.命令模式 2.vim配置项说明 3.vim操作总结 一、Linux安装软件&#…

DC-4靶机

信息收集 先查看靶机的MAC地址 arp-scan -l 找到目标靶机的IP地址&#xff0c;对其进行扫描 发现开放了80端口和ssh&#xff0c;浏览器访问靶机的80端口&#xff0c;看看有没有可以利用的东西 目录爆破发现也没有什么东西 dirsearch -u http://192.168.80.146 漏洞利用 利用…

LUN映射出错导致写操作不互斥的服务器数据恢复案例

服务器数据恢复环境&#xff1a; 某公司的光纤SAN存储系统&#xff0c;6块硬盘组建一组RAID6&#xff0c;划分若干LUN&#xff0c;MAP到不同的SOLARIS操作系统服务器上。 服务器故障&分析&#xff1a; 由于业务增长需要新增应用&#xff0c;工作人员增加了一台IBM服务器&am…

16-1_Qt 5.9 C++开发指南_多语言界面

文章目录 1. 多语言界面设计概述2. tr()函数的使用3. 生成语言翻译文件4. 使用Qt Linguist 翻译 ts 文件5. 调用翻译文件改变界面语言5.1 生成qm文件5.2 项目启动时设置界面语言5.3 动态切换语言 1. 多语言界面设计概述 有些软件需要开发多语言界面版本&#xff0c;如中文版和…

Cesium 工程模板

1、vue2.x cli https://github.com/948033145/anov-gis-vue2 2、vue3.x vite https://github.com/948033145/anov-gis-vite 下载代码 anov-gis-vue2.x.zip 下载代码 anov-gis-vite.zip

云原生应用里的服务发现

服务定义&#xff1a; 服务定义是声明给定服务如何被消费者/客户端使用的方式。在建立服务之间的同步通信通道之前&#xff0c;它会与消费者共享。 同步通信中的服务定义&#xff1a; 微服务可以将其服务定义发布到服务注册表&#xff08;或由微服务所有者手动发布&#xff09;…

剑指 Offer !!56 - II. 数组中数字出现的次数 II

剑指 Offer 56 - II. 数组中数字出现的次数 II 在一个数组 nums 中除一个数字只出现一次之外&#xff0c;其他数字都出现了三次。请找出那个只出现一次的数字。示例 1&#xff1a;输入&#xff1a;nums [3,4,3,3] 输出&#xff1a;4 示例 2&#xff1a;输入&#xff1a;nums …

Rpc原理

dubbo原理 1、RPC原理 一次完整的RPC调用流程&#xff08;同步调用&#xff0c;异步另说&#xff09;如下&#xff1a; 1&#xff09;服务消费方&#xff08;client&#xff09;调用以本地调用方式调用服务&#xff1b; 2&#xff09;client stub接收到调用后负责将方法、参数…

解密SpringMVC:探秘常用注解,让你的Java应用飞速起航!

这里写目录标题 什么是 Spring MVC&#xff1f;常用注解RequestMappingRequestParamRequestBodyPathVariableRequestPart 什么是 Spring MVC&#xff1f; Spring MVC是Spring框架中的一个模块&#xff0c;是基于Java的Web应用程序开发框架。它提供了一种用于构建灵活、高效、可…

数学建模-爬虫系统学习

尚硅谷Python爬虫教程小白零基础速通&#xff08;含python基础爬虫案例&#xff09; 内容包括&#xff1a;Python基础、Urllib、解析&#xff08;xpath、jsonpath、beautiful&#xff09;、requests、selenium、Scrapy框架 python基础 进阶&#xff08;字符串 列表 元组 字典…

如何使用ONLYOFFICE+ffmpeg来给视频文件打马赛克

如何使用ONLYOFFICEffmpeg来给视频文件打马赛克 我这里之前写过很多关于ONLYOFFICE使用、安装的系列图文&#xff0c;也写过很多关于ffmpeg使用的图文&#xff0c;那么这次继续&#xff0c;把这两个开源软件放在一起&#xff0c;能碰撞出什么火花般的功能来。 这就是给视频文…

【C#学习笔记】内存管理

文章目录 分配内存释放内存GC标记清除算法分代算法 .NET的GC机制有这样两个问题&#xff1a; 官方文档 自动内存管理 自动内存管理是CLR在托管执行过程中提供的服务之一。 公共语言运行时的垃圾回收器为应用程序管理内存的分配和释放。 对开发人员而言&#xff0c;这就意味着…

凯迪正大—SF6泄漏报警装置的主要特点

SF6泄漏报警系统主要特点 ① 系统采用声速原理&#xff0c;可定量、实时在线测量SF6泄漏气体含量&#xff0c;克服了传统测量方法如负电晕放电法和卤素传感器法只能定性判别是否越限的缺陷&#xff0c;能够准确得到气体中SF6含量。 ② 系统采用双差分处理方法&#xff0c;有效…