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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tcp的粘包和半包问题及解决方案

目录 粘包&#xff1a; 半包&#xff1a; 应用进程如何解读字节流&#xff1f;如何解决粘包和半包问题&#xff1f; ①&#xff1a;固定长度 ②&#xff1a;分隔符 ③&#xff1a;固定长度字段存储内容的长度信息 粘包&#xff1a; 一次接收到多个消息&#xff0c;粘包 应…

HBase概述

HBase 一 HBase简介与环境部署 1.1 HBase简介&在Hadoop生态中的地位 1.1.1 什么是HBase HBase是一个分布式的、面向列的开源数据库HBase是Google BigTable的开源实现HBase不同于一般的关系数据库, 适合非结构化数据存储 1.1.2 BigTable BigTable是Google设计的分布式…

mysql的update_time

CREATE TABLE users (id INT AUTO_INCREMENT PRIMARY KEY,name VARCHAR(50) NOT NULL,age INT,update_time TIMESTAMP NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 更新时间 );具体解释如下&#xff1a; DEFAULT CURRENT_TIMESTAMP: 这部分表示当插入…

【CI/CD】图解六种分支管理模型

图解六种分支管理模型 任何一家公司乃至于一个小组织&#xff0c;只要有写代码的地方&#xff0c;就有代码版本管理的主场&#xff0c;初入职场&#xff0c;总会遇到第一个拦路虎 git 管理流程&#xff0c;但是每一个企业似乎都有自己的 git 管理流程&#xff0c;倘若我们能掌握…

如何在不使用脚本和插件的情况下手动删除 3Ds Max 中的病毒?

如何加快3D项目的渲染速度&#xff1f; 3D项目渲染慢、渲染卡顿、渲染崩溃&#xff0c;本地硬件配置不够&#xff0c;想要加速渲染&#xff0c;在不增加额外的硬件成本投入的情况下&#xff0c;最好的解决方式是使用渲云云渲染&#xff0c;在云端批量渲染&#xff0c;批量出结…

ABAP 自定义搜索功能 demo1

ABAP 自定义搜索功能 demo1 效果&#xff1a; 双击选中行则为选中对应发票 实现 1定义 定义屏幕筛选参数 SELECTION-SCREEN BEGIN OF SCREEN 9020. SELECT-OPTIONS:s1_belnr FOR rbkp-belnr, s1_gjahr FOR rbkp-gjahr, s1_lifnr FOR rbkp-lifnr, s1_erfna FOR rbkp-erfnam, …

go入门实践二-tcp服务端

文章目录 前言接口与方法并发-协程项目管理bufio包使用其他代码 前言 上一篇&#xff0c;我们通过go语言的hello-world入门&#xff0c;搭建了go的编程环境&#xff0c;并对go语法有了简单的了解。本文实现一个go的tcp服务端。借用这个示例&#xff0c;展示接口、协程、bufio的…

php运算符的短路特性

php运算符的短路特性 1、逻辑运算符&#xff1a;逻辑与&#xff08;&&)和逻辑或&#xff08;||&#xff09;&#xff0c;存在着短路特性 PHP中有以下两个运算符具有短路的特性&#xff0c;他们是逻辑运算符的逻辑与&#xff08;&&)和逻辑或&#xff08;||&am…

线程概念linux

何为线程&#xff1a; 线程是程序中负责执行的单位&#xff0c;它可以被看作是进程的一部分&#xff0c;是进程的子任务。线程与进程的区别在于&#xff0c;进程是一个资源单位&#xff0c;而线程是进程的一部分&#xff0c;它只有栈这个独立的资源&#xff0c;其他资源如代码…

Java SpringBoot集成Activiti7工作流

Activiti7 Java SpringBoot集成Activiti7工作流介绍项目集成引入依赖YML配置文件配置类 启动项目生成表结构Activiti的数据库支持 Activiti数据表介绍项目Demo地址&#xff1a; Java SpringBoot集成Activiti7工作流 本文项目Demo地址附在文章后方 官网主页&#xff1a;http://a…

Vue npm 128

npm #降低版本 npm install npm3.8.6 -g升级到最新版本 npm install -g npmvue用npm 安装指定element-ui 版本 npm i element-ui2.0.10查看当前镜像源 npm config get registry切换镜像 npm config set registry https://registry.npmmirror.com --registryhttps://registry.n…

C++ 万能引用实现完美转发示例

万能引用 万能引用的一种常见使用场景是用在模板函数中&#xff1a; template<class T> void fun(T&& t) { //... }函数参数t就是一个万能引用&#xff0c;万能引用在这里的作用&#xff0c;简单来说就是它既能够接收左值也能接受右值 验证函数 定义一个参数…

组件化、跨平台…未来前端框架将如何演进?

前端框架在过去几年间取得了显著的进步和演进。前端框架也将继续不断地演化&#xff0c;以满足日益复杂的业务需求和用户体验要求。从全球web发展角度看&#xff0c;框架竞争已经从第一阶段的前端框架之争&#xff08;比如Vue、React、Angular等&#xff09;&#xff0c;过渡到…

powerdesigner各种字体设置;preview字体设置;sql字体设置

1.设置左侧菜单&#xff1a; 步骤如下&#xff1a; tools —> general options —> fonts —> defalut UI font ,选择字体样式及大小即可&#xff0c;同下图。 2.设置preview字体大小&#xff08;sql预览&#xff09; 步骤如下&#xff1a; tools —> general o…

c语言实现简单的tcp服务端

功能&#xff1a;监听本地8888端口&#xff0c;接收到客户端连接请求后创建线程单独处理与客户端的交互&#xff0c;支持同时与多个客户端交互。 #include <stdio.h> #include <stdlib.h> #include <string.h> #include <unistd.h> #include <sys/…

Mac隐藏和显示文件

由于之前没有使用过Mac本&#xff0c;所以很多地方都不太清楚&#xff0c;在下载git项目的时候&#xff0c;发现没有.git文件&#xff0c; 一开始还以为下载错了&#xff0c;但是git命令是可以看到远端分支以及当前分支的&#xff0c;之后在一次解压文件的时候发现&#xff0c;…

【音频分离】demucs V3的环境搭建及训练(window)

文章目录 一、环境搭建&#xff08;1&#xff09;新建虚拟环境&#xff0c;并进入&#xff08;2&#xff09;安装pyTorch&#xff08;3&#xff09;进入代码文件夹&#xff0c;批量安装包&#xff08;4&#xff09;安装其他需要的包 二、数据集准备&#xff08;1&#xff09;下…

数据采集的方法有哪些?

近年来&#xff0c;国家和各大企业都在部署大数据战略。“大数据”这个词也越来越频繁地出现在我们的生活中。当我们在进行网上冲浪时&#xff0c;页面总会跳出我们想要搜索的相关产品或关联事物。大数据&#xff0c;似乎总是能够“算”出我们“心中所想”。那么&#xff0c;大…

sqlserver 判断字符串是否为数字

在 SQL Server 中&#xff0c;可以使用以下方法判断一个字符串是否为数字&#xff1a; 使用 ISNUMERIC() 函数&#xff1a;这个函数可以判断一个字符串是否可以转换为数字。例如&#xff1a; SELECT 123 AS NumberStr, 123.45 AS DecimalStr, abc AS NonNumericStr WHERE ISN…

基于ssm民宿管理系统

使用Springboot部署的&#xff0c;基于ssm架构的民宿管理系统。集订单预定与博客功能为一体。 简介 享宿&#xff0c;即民宿出租预定平台主要为需要房屋租住的用户提供高效便捷、轻松贴心的移动式房源查找及租住平台。结合博客分享功能意在丰富房源的同时带动订单销售&#xff…