React 第一个Demo

news2024/11/26 12:31:47

0x00 前言

  • CTF 加解密合集
  • CTF Web合集
  • 网络安全知识库

次笔记仅记录学习React过程中的笔记,因为有必要掌握一门前端的框架, 在vue和React中选择了React。

0x01 正文

目标:
在这里插入图片描述

实现Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>

0x02 笔记

1.引用库

react.development.js是react核心库

react-dom.development.js是跨站库

babel.min.js是转换库,主要作用是为了将jsx转为js

2.js写法

相对于正常的js而言,需要将type中的内容转为:text/babel

举例:

<script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>

3.基本渲染写法

reactDOM.render的方式给容器赋值

举例:

<script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>

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

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

相关文章

java-方法重载

定义&#xff1a;一个类中&#xff0c;出现多个方法名称相同&#xff0c;但是他们的行参列表不同&#xff0c;那么这些方法就称为方法重载了。

Hydra工具的使用

目录 Hydra初识 Hydra使用 hydra破解mysql 前言 不固定用户名密码爆破 hydra破解ssh 以用户名为密码登录 hydra破解rdp 将爆破密码的结果输出到文件中 Hydra初识 前言&#xff1a; hydra是一款开源的暴力破解工具&#xff0c;支持多种服务破解原理&#xff1a;使用户…

NSSCTF2nd与羊城杯部分记录

文章目录 前言[NSSCTF 2nd]php签到[NSSCTF 2nd]MyBox[NSSCTF 2nd]MyHurricane[NSSCTF 2nd]MyJs[NSSCTF 2nd]MyAPK羊城杯[2023] D0nt pl4y g4m3!!!羊城杯[2023]ezyaml羊城杯[2023]Serpent羊城杯[2023]EZ_web羊城杯[2023]Ez_misc总结 前言 今天周日&#xff0c;有点无聊没事干&a…

Java集合、泛型、增强For

集合的概念&#xff1a; 集合类存放的都是对象的引用&#xff0c;而非对象本身。 集合是一个动态的数组&#xff0c; 数组的长度是不可变的&#xff0c;集合长度是可变的 集合的类型&#xff1a; Collection接口&#xff1a; Collection表示一组对象&#xff…

springboot + vue + elementui — upload解决跨域、实现图片上传

今日记录通过elementui上传时得到的问题。 我们在本地部署的服务,前端服务请求后端接口,存在跨域问题&#xff0c; 1.可以利用springboot解决跨域问题&#xff0c;这里不列举 2.利用vue配置进行反向代理。 vue解决跨域 在vue.config.js文件中配置 const { defineConfig }…

nginx-gzip压缩

gzip压缩算法&#xff0c;在客户端要支持&#xff0c;在服务端浏览器也要支持该算法。 gzip动态压缩 nginx配置 gzip_buffers:缓冲区大小。 gzip_comp_level:压缩等级&#xff0c;1-9等级越高&#xff0c;压缩速率越高&#xff0c;压缩比也越高&#xff0c;当然消耗cpu资源…

chmod文件和目录的关系

结论&#xff1a;目录的权限和文件的权限并没啥关系&#xff0c;授权777后&#xff0c;在777的目录底下新增文件&#xff0c;默认还是只有当前用户有权限&#xff0c;不会有继承关系

sudo apt update 出现Release is not valid yet

一、问题 今天执行&#xff0c;下面的这命令报错。 sudo apt update二、成因 就是时钟问题&#xff0c;导致ssh认证不了&#xff0c;调正好就行。 三、解决方法 执行下面这行命令就可以正常了。 sudo hwclock --hctosys四、最后 求赞&#xff0c;求收藏&#xff01;&…

SW-重新组织装配体代替柔性装配体

柔性装配体容易报错&#xff0c;只有把简单的配合零件做用重新组织装配体的方式另存到顶层&#xff0c;以便与动画模拟

【Unity3D赛车游戏优化篇】【八】汽车实现镜头的流畅跟随,以及不同角度的切换

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

索引简单概述(SQL)

一、什么是索引&#xff1f; 索引是一种特殊的文件&#xff08;InnoDB数据表上的索引是表空间的一个组成部分&#xff09;&#xff0c;他们包含着对数据表里所有记录的引用指针。 索引是一种数据结构。数据库索引&#xff0c;是数据库管理系统中一个排序的数据结构&#xff0…

智慧公厕是智慧城市公共厕所形态的新一代技术支撑

在现代城市发展中&#xff0c;智慧城市正逐渐成为名副其实的未来趋势。作为城市基础设施的一部分&#xff0c;公共厕所的发展也与智慧城市息息相关。通过提升城市设施治理效率、实现数据开放与融合以及提升业务协同效率&#xff0c;智慧城市为公共厕所形态带来了全新的变革。本…

Python中的Numpy向量计算(R与Python系列第三篇)

目录 一、什么是Numpy? 二、如何导入NumPy? 三、生成NumPy数组 3.1利用序列生成 3.2使用特定函数生成NumPy数组 &#xff08;1&#xff09;使用np.arange() &#xff08;2&#xff09;使用np.linspace() 四、NumPy数组的其他常用函数 &#xff08;1&#xff09;np.z…

【论文解读】斯坦福小镇Generative Agents

git开源地址&#xff1a;GitHub - joonspk-research/generative_agents: Generative Agents: Interactive Simulacra of Human Behavior 论文地址&#xff1a;https://arxiv.org/abs/2304.03442 前言 最近很火的方向&#xff0c;利用GhatGPT的规划、对话、总结能力&#xff…

电商类面试问题--01Elasticsearch与Mysql数据同步问题

在实现基于关键字的搜索时&#xff0c;首先需要确保MySQL数据库和ES库中的数据是同步的。为了解决这个问题&#xff0c;可以考虑两层方案。 全量同步&#xff1a;全量同步是在服务初始化阶段将MySQL中的数据与ES库中的数据进行全量同步。可以在服务启动时&#xff0c;对ES库进…

Flink提交jar出现错误RestHandlerException: No jobs included in application.

今天打包一个flink的maven工程为jar&#xff0c;通过flink webUI提交&#xff0c;发现居然报错。 如上图所示&#xff0c;提示错误为&#xff1a; Server Response Message: org.apache.flink.runtime.rest.handler.RestHandlerException: No jobs included in application. …

6.网络编程套接字(上)

文章目录 1.网络编程基础1.1为什么需要网络编程&#xff1f;——丰富的网络资源1.2什么是网络编程1.3网络编程中的基本概念1.3.1发送端和接收端1.3.2请求和响应1.3.3客户端和服务端1.3.4常见的客户端服务端模型 2.Socket套接字2.1概念2.2分类2.3Java数据报套接字通信模型2.4Jav…

HTTPS协议详解:基本概念与工作原理

个人主页&#xff1a;insist--个人主页​​​​​​ 本文专栏&#xff1a;网络基础——带你走进网络世界 本专栏会持续更新网络基础知识&#xff0c;希望大家多多支持&#xff0c;让我们一起探索这个神奇而广阔的网络世界。 目录 一、HTTPS协议的基本概念 二、为什么需要HTTP…

三相PMSM的坐标变换

三相PMSM的坐标变换 三相PMSM的数学模型具有复杂性和耦合性的多变量系统。因此需要对其进行降阶和解耦变换。 Vα&#xff0c;Vb&#xff0c;Vc是自然坐标系。 Vα&#xff0c;Vβ是静止坐标系。 Vd&#xff0c;Vq是同步旋转坐标系。 自然坐标系 三相永磁同步电机的驱动电路…

PixelSNAIL论文代码学习(1)——总体框架和平移实现因果卷积

文章目录 引言正文目录解析README.md阅读Setup配置Training the model训练模型Pretrained Model Check Point预训练的模型训练方法 train.py文件的阅读model.py文件阅读h12_noup_smallkey_spec模型定义_base_noup_smallkey_spec模型实现一、定义因果卷积过程通过平移实现因果卷…