使用React渲染最基本的虚拟DOM到页面上

最新推荐文章于 2022-07-26 16:03:36 发布

小哦--

最新推荐文章于 2022-07-26 16:03:36 发布

阅读量462

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/sundanping_123/article/details/101227372

版权

本文介绍如何使用React库将基本的虚拟DOM元素渲染到实际的HTML页面中，通过.js代码展示了React组件的创建和挂载过程。

摘要由CSDN通过智能技术生成

在这里插入图片描述

.js代码：

// 假设，main.js 还是我们的入口文件
// console.log('ok')
// webpack-dev-server 打包好的 main.js 是托管到了内存中；所以在项目根目录中看不到；
// 但是，我们可以认为，在项目根目录中，有一个看不见的 main.js


// 1. 这两个导入时候，接收的成员名称，必须这么写
import React from 'react' // 创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' // 把创建好的 组件 和 虚拟DOM 放到页面上展示的


// 2. 创建虚拟DOM元素
// 参数1： 创建的元素的类型，字符串，表示元素的名称
// 参数2： 是一个对象或 null, 表示 当前这个 DOM 元素的属性
// 参数3： 子节点（包括 其它 虚拟DOM 获取 文本子节点）
// 参数n: 其它子节点
//  <h1 id="myh1" title="this is a h1">这是一个大大的H1<