玩转react——通过CDN引入玩转（直接引用）

最新推荐文章于 2024-02-27 08:56:06 发布

杨不旧

最新推荐文章于 2024-02-27 08:56:06 发布

阅读量6k

点赞数 4

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

本文链接：https://blog.csdn.net/qq_45152044/article/details/124257573

版权

react 专栏收录该内容

10 篇文章 2 订阅

订阅专栏

玩转vue的时候，直接引入只需要引入一个文件就可以使用了。
但是玩转react时候，需要引入引入三个文件。
分别是：

名字	说明
react.js	react的核心语法
react-dom.js	虚拟dom的语法
babel.js	讲高级js语法解析为浏览器认识的js

三个CDN的链接分别为：

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

对应的官网链接：前两个、第三个
在这里插入图片描述

在这里插入图片描述
引入讲究：
react一定要在dom前面，而babel随便你怎么放，或者就直接复制过去不要改。

为什么要引入babel.js？
因为react很多地方运用到了JAX语法，它是react团队发明的一种语法。配合虚拟dom和模板引擎使用。jsx相当于是js的语法糖，为了方便书写DOM。

第一个react例子

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
    <!-- react的容器 -->
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    //OH的右边的内容就是JSX的语法
    //（script type="text/babel" 需要这么写，不然就会报错，需要告诉babel需要转哪些，只需要在script标签写type="text/babel"就可以了）
    let oH = <div>
        hello react!
    </div>;
    // ReactDOM.render(要渲染什么内容，渲染到哪里)
    //只有用了这个才会创建虚拟DOM，先创建再更新
    ReactDOM.render(oH, document.querySelector("#app"));
</script>

如果没用JSX语法该怎么写

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    let oH= `<h1>hello react</h1>`
    document.querySelector('#app').innerHTML = oH;
</script>

用不用JSX语法的区别：
1、可以看到声明的OH中，源生写法需要用引号引住，不能换行，如果用模板字符串，也可以换行了。
2、其实你看到不管用JAX语法还是不用JAX语法，都是两行代码解决，但JAX语法可以配合react使用，JAX语法无法配合不了源生js使用，会识别不出html标签。但两者写代码的性能是不一样的。react写法可以识别哪些是静态的，哪些是动态的。可以一定程度提高代码的性能。

有关更多JSX的语法可以查看本专栏

杨不旧

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
玩转react——通过CDN引入玩转（直接引用）

玩转vue的时候，直接引入只需要引入一个文件就可以使用了。但是玩转react时候，需要引入引入三个文件。分别是：名字说明react.jsreact的核心语法react-dom.js虚拟dom的语法babel.js讲高级js语法解析为浏览器认识的js三个CDN的链接分别为：<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></scrip
复制链接

扫一扫