在项目中首次引入 react

最新推荐文章于 2022-04-03 01:53:32 发布

土垚金鑫

最新推荐文章于 2022-04-03 01:53:32 发布

阅读量556

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_44994731/article/details/105043563

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运行 cnpm i react react-dom -S 安装包
- react：专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中
- react-dom：专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()

在index.html页面中，创建容器：

<!-- 容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
<div id="app"></div>

导入包：

import React from 'react'
import ReactDOM from 'react-dom'

创建虚拟DOM元素：

// 这是 创建虚拟DOM元素的 API    <h1 title="啊，五环" id="myh1">你比四环多一环</h1>
//  第一个参数： 字符串类型的参数，表示要创建的标签的名称
//  第二个参数：对象类型的参数， 表示 创建的元素的属性节点
//  第三个参数： 子节点
const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')

渲染：

// 3. 渲染虚拟DOM元素
// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象
ReactDOM.render(myh1, document.getElementById('app'))

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</h1>
// const myh1 = React.createElement('h1', null, '这是一个大大的H1')
const myh1 = React.createElement('h1', { id: 'myh1', title: 'this is a h1' }, '这是一个大大的H1')

const mydiv = React.createElement('div', null, '这是一个div元素', myh1)

// 渲染 页面上的 DOM 结构，最好的方式，就是写 HTML 代码

// const mytest = <div>aaa</div>


// 3. 使用 ReactDOM 把虚拟DOM 渲染到页面上
// 参数1： 要渲染的那个虚拟DOM元素
// 参数2： 指定页面上的DOM元素，当作容器 
ReactDOM.render(mytest, document.getElementById('app'))
// Target container is not a DOM element.  经过分析，猜测：第二个参数接收的应该是一个  DOM 元素而不是 选择器

index.js

// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'

import '@/08.梳理class的静态和实例成员'

// 3. 调用 render 函数渲染   jsx  XML 比 HTML 严格多了
ReactDOM.render(<div>
  123
</div>, document.getElementById('app'))

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Index 首页</title>
  <!-- <script src="../dist/main.js"></script> -->
  <!-- <script src="/main.js"></script> -->
</head>

<body>
  <!-- 创建一个容器，将来 渲染的虚拟DOM ，会放到容器内显示 -->
  <div id="app"></div>
</body>

</html>

土垚金鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在项目中首次引入 react

运行 cnpm i react react-dom -S 安装包react：专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中react-dom：专门进行DOM操作的，最主要的应用场景，就是ReactDOM.render()在index.html页面中，创建容器：<!-- 容器，将来，使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -...
复制链接

扫一扫

专栏目录