React 第一个Demo

0x00 前言

次笔记仅记录学习React过程中的笔记，因为有必要掌握一门前端的框架，在vue和React中选择了React。

0x01 正文

目标：
在这里插入图片描述

实现Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <div id="test"></div>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>

    <script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

0x02 笔记

1.引用库

react.development.js是react核心库

react-dom.development.js是跨站库

babel.min.js是转换库，主要作用是为了将jsx转为js

2.js写法

相对于正常的js而言，需要将type中的内容转为：text/babel

举例：

<script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>
1
2
3
4

3.基本渲染写法

reactDOM.render的方式给容器赋值

举例：

<script type="text/babel">
        const VDOM = <h1>Hello,react</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
</script>
1
2
3
4

相关阅读:
修改PyCharm主题、字体大小、汉化PyCharm、安装translation翻译插件
win10win11截图技巧——不用安装其他截图工具或者运行其他截图工具，就可以截图，win10和win11可用
华为认证云计算前景如何
二分练习题
centos7修改root用户密码
QT之QChart的简介
《最新出炉》系列初窥篇-Python+Playwright自动化测试-17-处理鼠标悬停
LocalViT 论文解读
Linux find学习
r5 5600g和i5 12400选哪个好

原文地址：https://blog.csdn.net/HAI_WD/article/details/132657708