React 第一个Demo

最新推荐文章于 2024-07-24 21:50:11 发布

Wcbddd

最新推荐文章于 2024-07-24 21:50:11 发布

阅读量445

点赞数

分类专栏： React 文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/HAI_WD/article/details/132657708

版权

React 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>

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>

3.基本渲染写法

reactDOM.render的方式给容器赋值

举例：

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

Wcbddd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React 第一个Demo

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

扫一扫

专栏目录