React 基础使用

news/2024/10/21 17:32:00/

react 是一个开源的 JavaScript 库,用于将数据渲染为 HTML 界面(只关注视图)。

react 使用了虚拟 DOM 和 Diff 算法。当数据更新后,Diff 算法会将新生成的虚拟 DOM 和之前的虚拟 DOM 进行对比,只将不同的地方更新到页面中。

 引入依赖文件:

开发环境:

<!-- 引入 react 核心库 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<!-- 引入 react-dom ,用于支持 react 操作 DOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 引入 babel ,用于将 jsx 转为 js -->
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

部署环境:

<!-- 引入 react 核心库 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<!-- 引入 react-dom ,用于支持 react 操作 DOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入 babel ,用于将 jsx 转为 js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

react 基础使用:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>React的基础使用</title></head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入 react 核心库 --><script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script><!-- 引入 react-dom ,用于支持 react 操作 DOM --><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script><!-- 引入 babel ,用于将 jsx 转为 js --><script src="https://unpkg.com/babel-standalone@6/babel.js"></script><!-- script 标签的 type 类型一定要改为 babel 类型 --><script type="text/babel">// 1. 创建虚拟 DOM(一定不要加引号,因为这不是字符串)const VDOM = <h1>你好呀!</h1>;// 2. 渲染虚拟 DOM 到页面ReactDOM.createRoot(document.querySelector("#test")).render(VDOM);</script></body>
</html>

原创作者:吴小糖

创作时间:2023.11.29


http://www.ppmy.cn/news/1259798.html

相关文章

计算机视觉-02-基于U-Net的肝脏肿瘤分割(包含数据和代码)

文章目录 1. 介绍1.1 简介1.2 任务介绍1.3 数据集介绍1.3.1 介绍1.3.2 数据预处理建议 1.5 整体流程梳理1.5.1 数据读取&#xff1a;从原始dcm格式读入成我们需要的数组格式1.5.2 数据预处理&#xff1a;上面给出了提示a. 将ct值转化为标准的hu值b. 窗口化操作c. 直方图均衡化d…

DDSP-SVC-3.0完全指南:一步步教你用AI声音开启音乐之旅

本教程教你怎么使用工具训练数据集推理出你想要转换的声音音频&#xff0c;并且教你处理剪辑伴奏和训练后的音频合并一起&#xff0c;快来试试看把&#xff01; 1.使用的工具 要想训练ai声音&#xff0c;首先需要有各种工具&#xff0c;还需要我们提供你需要训练的声音&#…

前端知识笔记(十九)———px,em,rem,vw,vh之间的区别

一&#xff0c;px&#xff08;像素&#xff09;&#xff1a;像素是屏幕上显示的最小单位&#xff0c;它是固定的&#xff0c;不随页面缩放而改变大小。在响应式设计中&#xff0c;使用像素单位可能会导致布局在不同屏幕尺寸上显示不一致。例如&#xff1a;现在在你电脑上一个字…

智加科技获全国首张重卡无人驾驶开放道路测试牌照

2023年12月1日&#xff0c;智加科技获得苏州市智能网联汽车无人化测试牌照。该牌照也是江苏省及国内首张无人重卡开放高速公路全路段全场景全息路网&#xff08;S17苏台高速&#xff09;道路测试牌照。 该重卡无人驾驶开放道路测试牌照&#xff0c;经由苏州市智能网联汽车联席小…

回归预测 | MATLAB实现基于LightGBM算法的数据回归预测(多指标,多图)

回归预测 | MATLAB实现基于LightGBM算法的数据回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现基于LightGBM算法的数据回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLA…

Spring MVC学习随笔-控制器(Controller)开发详解:控制器跳转与作用域(二)视图模板、静态资源访问

学习视频&#xff1a;孙哥说SpringMVC&#xff1a;结合Thymeleaf&#xff0c;重塑你的MVC世界&#xff01;&#xff5c;前所未有的Web开发探索之旅 衔接上文Spring MVC学习随笔-控制器(Controller)开发详解&#xff1a;控制器跳转与作用域&#xff08;一&#xff09; SpingMVC中…

【Docker】从零开始:13.Docker安装tomcat

Docker】从零开始&#xff1a;13.Docker安装Tomcat 下载Tomcat镜像启动Tomcat镜像新版本Tomcat修改访问Tomact首页 下载Tomcat镜像 [rootdocker ~]# docker pull tomcat Using default tag: latest latest: Pulling from library/tomcat 0e29546d541c: Pull complete 9b829c7…

封装请求头内容格式

// 请求头-内容类型 export const ContentType { JSON: application/json;charsetUTF-8, FORM: application/x-www-form-urlencoded;charsetUTF-8, UPLOAD: multipart/form-data, STREAM: application/octet-stream;charsetUTF-8 } /** * description: 文件上传 * param {*}…