当前位置： 首页 > news >正文

react学习笔记——1. hello react

news 2025/12/16 14:15:45

包含的包一共有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，注意这里不需要引号，因为这里的代码是jsxlet VDOM = <h1>hello,react!</h1>// 2、渲染虚拟dom，使用render方法，此方法有两个参数，一个是虚拟dom，第二个是容器，并且此方法是一个追加的过程ReactDOM.render(VDOM, document.getElementById("test"))/*** 注意，只有这里需要document，因为react不需要自己操作dom，这里只是一个demo*/</script>
</body></html>

相关文章：

react学习笔记——1. hello react

包含的包一共有4个&#xff0c;分别的作用如下&#xff1a; babel.min.js&#xff1a;可以进行ES6到ES5的语法转换&#xff1b;可以用于import&#xff1b;可以用于将jsx转换为js。注意&#xff0c;在开发的时候&#xff0c;这个转换&#xff08;jsx转换js&#xff09;不在线上…...

编程日记 2023/8/4 19:24:37

明明已经安装字体，但IDEA、CLION无法找到思源黑体/Source Hans Sans的问题解决

IDEA、CLION的Jetbrain系列软件不支持非TrueType的中文字体&#xff0c;而Adobe官方给出的字体却不是TrueType的&#xff0c;所以便会导致Jetbrain系软件无法找到已安装的中文字体&#xff0c;因此我们需要安装TrueType的字体 请在以下Github链接中下载&#xff1a; TrueType思…...

编程日记 2023/8/4 19:23:33

2023-08-03力扣今日四题

链接&#xff1a; 剑指 Offer 67. 把字符串转换成整数 题意&#xff1a; 按规则将字符串转换成整数&#xff0c;规则不详叙 解&#xff1a; 字符串处理 实际代码&#xff1a; #include<iostream> #include<cstring> #include<climits> using namespac…...

编程日记 2023/8/4 19:22:28

【学会动态规划】最佳买卖股票时机含冷冻期（15）

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…...

编程日记 2023/8/4 19:21:27

随机RSI震荡指标公式(StochRSI)，RSI和KDJ二合一

随机RSI震荡指标(StochRSI)是由图莎尔钱德和斯坦利克罗发明的一种摆动指标&#xff0c;结合了相对强弱指标&#xff08;RSI&#xff09;和随机指标&#xff08;KDJ&#xff09;的原理&#xff0c;目的是提高灵敏度&#xff0c;解决RSI难以达到超买超卖区的问题&#xff0c;以便…...

编程日记 2023/8/4 19:20:26

轻松搭建酒店小程序

酒店小程序的制作并不需要编程经验&#xff0c;只需要按照以下步骤进行操作&#xff0c;就能很快地搭建自己的小程序商城。 第一步&#xff0c;注册登录账号进入操作后台&#xff0c;找到并点击【商城】中的【去管理】进入商城的后台管理页面&#xff0c;然后再点击【小程序商城…...

编程日记 2023/8/4 19:19:25

算法通过村——Hash和队列问题解析

算法的备胎Hash和找靠山的队列 备胎Hash Hash&#xff0c;不管是算法&#xff0c;还是在工程中都会大量使用。很多复杂的算法问题都用Hash能够轻松解决&#xff0c;也正是如此&#xff0c;在算法例就显得没什么思维含量&#xff0c;所以Hash是应用里的扛把子&#xff0c;但在算…...

编程日记 2023/8/4 19:18:23

租赁类小程序定制开发|租赁管理系统源码|免押租赁系统开发

随着互联网的发展&#xff0c;小程序成为了一种重要的移动应用开发方式。租赁小程序作为其中的一种类型&#xff0c;可以为很多行业提供便利和创新。下面我们将介绍一些适合开发租赁小程序的行业。 　　房屋租赁行业&#xff1a;租房小程序可以帮助房东和租户快速找到合适的租赁…...

编程日记 2023/8/4 19:17:21

后端进阶之路——浅谈Spring Security用户、角色、权限和访问规则（三）

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ 解决算法&#xff0c;一个专栏就够了★ ★ 架…...

编程日记 2023/8/4 19:16:21

Mac 安装不在 Apple 商店授权的应用程序

文章目录 一、场景介绍二、实操说明 一、场景介绍 在日常的工作生活中&#xff0c;发现一些好用的应用程序&#xff0c;但是出于某些原因&#xff0c;应用程序的开发者并没有将安装包上架到苹果商店。 那么这些优秀的应用程序下载安装以后就会出现如下弹框被拒之门外 二、实操…...

编程日记 2023/8/4 19:15:20

【MyBatis】MyBatis把空字符串转换成0的问题处理方案（96）

先看问题: Postman入参: MyBatis采用map循环插入: // Mapper接口层void addPar(Param(value "question") Map<String, Object> paramMap);<!-- 新增&#xff1a;参数 --><insert id"addPar" parameterType"map">INSERT IGNO…...

编程日记 2023/8/4 19:14:19

OpenLayers实战，OpenLayers获取移动端精确定位，OpenLayers适配App混合H5方式调用手机定位位置并定位到指定点

专栏目录： OpenLayers实战进阶专栏目录 前言 本章讲解OpenLayers如何获取移动端精确定位位置。不使用任何native本地方法，只使用纯js实现。 本篇文章适用于App混合H5方式调用手机精确定位，打包时需要选择GPS位置权限，手机获取定位过程中会弹出是否允许定位的权限提示。 …...

编程日记 2023/8/4 19:13:18

Go指针取址问题：循环后每次都拿到相同内容

例子&#xff1a; func main() {yourList : [...]int{1, 2, 3}yourMap1 : make(map[int]*int)yourMap2 : make(map[int]*int)for key, value : range yourList {// 修改前yourMap1[key] &value// 修改后tmp : valueyourMap2[key] &tmpfmt.Println(value, &value…...

编程日记 2023/8/4 19:12:16

用Rust实现23种设计模式之简单工厂

在 Rust 中&#xff0c;可以使用结构体和 trait 来实现工厂方法模式。工厂方法模式是一种创建型设计模式&#xff0c;通过定义一个创建对象的接口&#xff0c;让子类决定实例化哪个类。下面是一个简单的示例&#xff0c;展示了如何使用 Rust 实现工厂方法模式&#xff1a; // …...

编程日记 2023/8/4 19:11:15

SpringBoot + minio实现分片上传、秒传、续传

什么是minio MinIO是一个基于Go实现的高性能、兼容S3协议的对象存储。它采用GNU AGPL v3开源协议&#xff0c;项目地址是https://github.com/minio/minio。 引用官网&#xff1a; MinIO是根据GNU Affero通用公共许可证v3.0发布的高性能对象存储。它与Amazon S3云存储服务兼容…...

编程日记 2023/8/4 19:10:12

logback 里面设置 自动删除3天之前的日志

目录 1 实现 1 实现 要实现达到一定大小后将日志文件压缩&#xff0c;并删除三天前的日志数据&#xff0c;可以结合使用 SizeAndTimeBasedRollingPolicy 滚动策略和 DeleteOlderThan 选项来配置。下面是一个示例配置&#xff0c;实现日志文件达到一定大小后进行滚动和压缩&…...

编程日记 2023/8/4 19:09:09

对于数据库查询索引和查字典索引的理解

之前面试问过我对于数据库索引的理解&#xff0c;这个问题不是具体的问题太宽泛&#xff0c;面试官也没进行引导&#xff0c;我不知道怎么回答&#xff0c;下面是结合查字典进行理解。 查字典 拿查字典举例&#xff0c;知道一个字怎么写但是不知道具体的意思以及发音&#xff…...

编程日记 2023/8/4 19:08:08

git删除已经提交的大文件

当你不小心把一个巨大的二进制文件提交到git仓库的时候&#xff0c;此时删除再提交也没有用了&#xff0c;大文件已经在仓库中留底了。另外比如需要删除某个需要保密的文件&#xff0c;都是相同的解决办法。 我本来想着把dll放在三方库里面提交到仓库里&#xff0c;省得在不同…...

编程日记 2023/8/4 19:07:07

【数据分析】pandas 一

目录 一&#xff0c;pandas简介&#xff1a; 二&#xff0c;pandas数据结构Series简介&#xff1a; 2.1 data为ndarray 2.2 data为字典 三&#xff0c;Serise切片操作&#xff1a; 四&#xff0c;Series性质&#xff1a; 4.1 Series类似于numpy,字典 4.2 矢量化操作和标…...

编程日记 2023/8/4 19:06:05

题解 | #G.Gcd# 2023牛客暑期多校6

G.Gcd 数论 题目大意 给定一个包含两个非负数的初始集合 S { x , y } S\{x,y\} S{x,y} 每次操作可以选定其中不相等的两个数 a , b a,b a,b &#xff0c;并将 a − b a-b a−b 或 g c d ( a , b ) gcd(a,b) gcd(a,b) 置入集合 S S S &#xff0c;其中 g c d ( 0 , a …...

编程日记 2023/8/4 19:05:04

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/12/12 21:14:39

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/12/15 13:10:05

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/12/12 7:41:41

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/12/9 14:35:12

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/12/14 23:15:45

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/12/15 16:22:57

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2025/12/15 20:11:23

React核心概念：State是什么？如何用useState管理组件自己的数据？

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

编程新知 2025/11/3 8:29:51

深入解析光敏传感技术：嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

编程新知 2025/12/14 23:38:11

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

编程新知 2025/12/2 9:58:35