React 第一个Demo

news/2024/7/15 19:09:26 标签: react.js, javascript, ecmascript

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.niftyadmin.cn/n/4998361.html

相关文章

Uniswap v3 详解(一):设计原理

刚看完 Uniswap v2 的代码&#xff0c;本来打算写一个 Uniswap v2 设计与实现&#xff0c;结果 Uniswap v3 就发布了。趁着这个机会就先写一个 Uniswap v3 设计与实现吧。 因为 v3 版本的实现复杂度和 v2 已经不在一个量级了&#xff0c;难免会有理解上的偏差&#xff0c;本文…

ubuntu设置sudo免密

前提&#xff1a;有root权限 本质是修改/etc/sudoers 文件&#xff0c;但直接编辑这个文件容易改错造成系统异常&#xff0c;因此一般使用sudo visudo命令修改&#xff0c;这个命令保存时会检查文件格式&#xff0c;该命令会使用默认文本编辑器把/etc/sudoers 读到一个临时文件…

利用正则表达式进行爬取数据以及正则表达式的一些使用方法

1.8 本地数据爬取 Pattern&#xff1a;表示正则表达式 Matcher&#xff1a;文本匹配器&#xff0c;作用按照正则表达式的规则去读取字符串&#xff0c;从头开始读取。 在大串中去找符合匹配规则的子串。 代码示例&#xff1a; package com.itheima.a08regexdemo; ​ import …

React Hook之useContext

1. 什么是useContext React官方解释&#xff1a;useContext 是一个 React Hook&#xff0c;可以让你读取和订阅组件中的 context&#xff08;React官方文档地址&#xff09;。 通俗的讲&#xff0c;useContext的作用就是&#xff1a;实现组件间的状态共享&#xff0c;主要应用场…

数学建模--非整数规划问题蒙特卡洛方法的Python求解

目录 1.算法流程简介 2.算法核心代码 1.算法流程简介 #非线性整数规划 #我们一般采用蒙特卡洛算法来进行估算求解 #在实验次数足够多的情况下我们认为此解是非线性整数规划的最优解 """ #Qustion1:求解: max zx1^2x2^23x^24x4^22x5^2-8x1-2x2-3x3-x4-2x5s.t…

UG\NX CAM二次开发 查询工序所在的方法组TAG UF_OPER_ask_method_group

文章作者:代工 来源网站:NX CAM二次开发专栏 简介: UG\NX CAM二次开发 查询工序所在的方法组TAG UF_OPER_ask_method_group 效果: 代码: void MyClass::do_it() { int count=0;tag_t * objects;UF_UI_ONT_ask_selected_nodes(&count, &objects);for (i…

【电路参考】缓启动电路

一、外部供电直接上电可能导致的问题 1、在热拔插的过程中&#xff0c;两个连接器的机械接触&#xff0c;触点在瞬间会出现弹跳&#xff0c;电源不稳&#xff0c;发生震荡。这期间系统工作可能造成不稳定。 2、由于电路中存在滤波或大电解电容&#xff0c;在上电瞬间&#xff…

第 361 场周赛 (AC 1,第二题过了但是考试结束了)

7020.统计对称整数的数目 思路一&#xff1a;指定区间统计对称整数 1.遍历区间2.判断该数对不对称 对称逻辑&#xff1a;首尾同时开始遍历&#xff0c;并且同时累加为两个数&#xff0c;最后判断两个数是否相等 class Solution { public:bool judge(int num){if(num<10) …