React 基础使用

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

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

引入依赖文件：

开发环境：


<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
<script src="https://unpkg.com/babel-standalone@6/babel.js">script>

部署环境：


<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>

react 基础使用：


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React的基础使用title>
  head>
  <body>
    
    <div id="test">div>
 
    
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>
    
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
    
    <script src="https://unpkg.com/babel-standalone@6/babel.js">script>
 
    
    <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

相关阅读:
深入解析docker内核网桥
「精致店主理人」：青年并肩同行，共赴创业之路
Dubbo+Zookeeper搭建
HTML和CSS如何记忆
SwiftUI NPL教程之在 iOS 应用程序开发中使用 Apple 内置的 NaturalLanguage 框架进行情感分析
【html5期末大作业】基于HTML+CSS+JavaScript管理系统页面模板
FastAPI 学习之路（二十三）用类作为依赖的注入
java高校会议室预约系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
JVM 执行引擎部分 (编译器、解释器)
MacBook安装gym

原文地址：https://blog.csdn.net/xiaowude_boke/article/details/134689771