超级详细的react学习笔记(二)基本使用

最新推荐文章于 2022-04-25 19:24:53 发布

laker Zhang

最新推荐文章于 2022-04-25 19:24:53 发布

阅读量226

点赞数

文章标签： react

本文链接：https://blog.csdn.net/layxing27/article/details/109408232

版权

文章目录

1 结构搭建
2 基本开发
3 渲染

1 结构搭建

参考链接

2 基本开发

2.1 安装依赖

react : 构建实例虚拟dom创建生命周期
react-dom : 解析dom元素渲染到页面
-S:是开发和生产模式都要使用的依赖
-D:是开发模式使用的依赖

cnpm i react react-dom -S

2.2 结构如下

在这里插入图片描述

2.3 编写index.js

引入所需的包 ES6语法
react三个参数
- 标签类型
- 属性
- 内容
react-dom两个参数
- 被渲染的元素
- 所挂载的容器(DOM元素节点)

// 1 引入包
import React from 'react'
import ReactDOM from 'react-dom'
// 2 创建 
const con = React.createElement('h1',{id:"myclass",title:'我是h1'},'我是标题');
// 3 渲染
ReactDOM.render(con,document.getElementById('app'));

2.4 编写index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/main.js"></script>
</head>
<body>
   <div id="app">     
   </div>  
</body>
</html>

2.5 执行如下

在这里插入图片描述

3 渲染

index.js

// 1 引入包
import React from 'react'
import ReactDOM from 'react-dom'
// 2 创建 
const con = React.createElement('h1',{id:"myclass",title:'我是h1'},'我是标题');

const h2=React.createElement('div',null,"这是div",con)
// 3 渲染
// ReactDOM.render(con,document.getElementById('app'));
ReactDOM.render(h2,document.getElementById('app'));

在这里插入图片描述

laker Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超级详细的react学习笔记(二)基本使用

文章目录1 结构搭建2 基本开发2.1 安装依赖2.2 结构如下2.3 编写index.js2.4 编写index.html2.5 执行如下1 结构搭建参考链接2 基本开发2.1 安装依赖react : 构建实例虚拟dom创建生命周期react-dom : 解析dom元素渲染到页面-S:是开发和生产模式都要使用的依赖-D:是开发模式使用的依赖cnpm i react react-dom -S2.2 结构如下2.3 编写index.js// 1 引入包import R
复制链接

扫一扫