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

react学习笔记——1. hello react

news 2026/2/9 16:28:37

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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2026/2/8 4:37:37

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/9 16:05:07

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2026/1/4 5:02:00

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2026/1/31 4:37:40

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

Linux-进程间的通信

1、IPC&#xff1a; Inter Process Communication&#xff08;进程间通信&#xff09;&#xff1a; 由于每个进程在操作系统中有独立的地址空间&#xff0c;它们不能像线程那样直接访问彼此的内存&#xff0c;所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...

编程新知 2026/2/2 19:17:14

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

编程新知 2026/1/20 3:30:27