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

react学习笔记——1. hello react

news 2026/4/12 21:31:09

包含的包一共有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

【限时解密】2026奇点大会闭门论坛纪要：头部AI实验室正秘密迁移至“神经符号视觉架构”，传统端到端VLM或于Q3被淘汰

第一章&#xff1a;2026奇点智能技术大会&#xff1a;大模型视觉理解 2026奇点智能技术大会(https://ml-summit.org) 多模态视觉理解范式的跃迁 本届大会首次系统性展示了基于世界模型&#xff08;World Model&#xff09;驱动的视觉理解新架构——VLM-Ω&#xff08;Vision-…...

编程新知 2026/4/12 21:13:20

浪潮NF5280M5装ESXi 6.7踩坑记：手把手教你给镜像注入PM8060 RAID驱动

浪潮NF5280M5服务器ESXi 6.7安装实战&#xff1a;RAID驱动注入全流程解析 去年夏天接手了一个企业虚拟化项目&#xff0c;客户采购的正是浪潮NF5280M5这款主流机架式服务器。当我像往常一样准备部署ESXi 6.7时&#xff0c;安装程序却死活识别不出配置好的RAID阵列——这个突如其…...

编程新知 2026/4/12 20:26:38

hadoop+Spark+Java基于搜索日志的图文推荐系统设计(源码+文档+调试+可视化大屏)

前言本文介绍了一款使用spring boot开发的搜索日志的图文推荐&#xff0c;及其设计与实现过程。根据软件工程对软件系统开发定制的规则和标准&#xff0c;详细的介绍了系统的分析与设计过程&#xff0c;并且详细的概括了系统的开发与测试过程&#xff0c;将其与JAVA语言紧密结合…...

编程新知 2026/4/12 20:06:26

Delphi XE跨平台开发实战：Linux服务端应用构建指南

1. 为什么选择Delphi XE开发Linux服务端应用 作为一个在Windows平台深耕多年的Delphi开发者&#xff0c;当我第一次听说Delphi XE支持Linux开发时&#xff0c;内心是充满怀疑的。毕竟Linux开发环境向来以命令行和开源工具链著称&#xff0c;而Delphi给我的印象一直是可视化开发…...

编程新知 2026/4/12 19:40:10

老板与员工：分钟理解 Subagent 架构甘

一、项目背景与核心价值 1. 解决的核心痛点 Navicat的数据库连接密码并非明文存储&#xff0c;而是通过AES算法加密后写入.ncx格式的XML配置文件中。一旦用户忘记密码&#xff0c;常规方式只能重新配置连接&#xff0c;效率极低。本项目只作为学习研究使用&#xff0c;不做其他…...

编程新知 2026/4/12 16:52:40

libcrypt-dev安装指南：解决crypt.h缺失报错

1. 当你的代码突然喊"找不到crypt.h"时 第一次在Linux环境下编译加密相关的代码时&#xff0c;看到终端里跳出"crypt.h: No such file or directory"的红色报错&#xff0c;我差点把咖啡喷在键盘上。这个场景太常见了——你从GitHub克隆了个看起来很酷的开…...

编程新知 2026/4/12 16:32:17

玉米秸秆粉碎机毕业设计 论文

玉米秸秆粉碎机作为农业机械化的重要设备&#xff0c;其核心作用在于将收割后的玉米秸秆高效破碎成细小颗粒&#xff0c;为后续资源化利用提供基础。传统处理方式中&#xff0c;秸秆多通过焚烧或堆放处理&#xff0c;不仅造成环境污染&#xff0c;还浪费了大量可循环资源。粉碎…...

编程新知 2026/4/12 16:02:03

ERTEC 系列 PROFINET 芯片级硬件过滤器分析改

一、语言特性&#xff1a;Java 26 与模式匹配进化 1.1 Java 26 语言级别支持 IDEA 2026.1 EAP 最引人注目的变化之一&#xff0c;就是新增 Java 26 语言级别支持。这意味着开发者可以提前体验和测试即将在 JDK 26 中正式发布的语言特性。 其中最重要的变化是对 JEP 530 的全面支…...

编程新知 2026/4/12 15:51:57

造相-Z-Image-Turbo 亚洲美女LoRA一键部署教程：基于Ubuntu20.04的快速环境搭建

造相-Z-Image-Turbo 亚洲美女LoRA一键部署教程&#xff1a;基于Ubuntu20.04的快速环境搭建 想试试最近挺火的造相-Z-Image-Turbo模型&#xff0c;再搭配上那个效果很不错的亚洲美女LoRA&#xff0c;生成点好看的图片吗&#xff1f;但一想到要自己配环境、装依赖、搞配置&#…...

编程新知 2026/4/12 14:47:00

PIVlab软件入门：从GUI操作到2D2C粒子测速实战

1. PIVlab是什么&#xff1f;为什么选择它做粒子测速&#xff1f; 第一次接触PIVlab时&#xff0c;我也被这个基于MATLAB的开源工具惊艳到了。它把复杂的粒子图像测速&#xff08;Particle Image Velocimetry, PIV&#xff09;流程封装成了一个直观的图形界面&#xff0c;让没有…...

编程新知 2026/4/12 14:26:44