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

相关阅读:
计算机组成原理之定点除法
QT常用控件介绍
专业的期货开户经理让新手如鱼得水
天眼护航安全无界：天通哨兵PS02—电力巡检保护的智能利器
公司oa是什么?一般公司oa有什么样功能?
【RF分类】基于matlab随机森林算法数据分类【含Matlab源码 2048期】
【MyBatis篇】MyBatis框架基础知识笔记
前端模块化
TI 毫米波雷达开发内容拆解分析
我有点想用JDK17了

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