react个人笔记---引入那三个必须使用的库（附链接） -- 引入react库等简单操作

最新推荐文章于 2023-08-06 23:23:11 发布

奇葩之小王子

最新推荐文章于 2023-08-06 23:23:11 发布

阅读量1.6k

点赞数 3

文章标签： js react javascript html

本文链接：https://blog.csdn.net/qq_52138438/article/details/115251470

版权

react个人笔记 – 引入react库等简单操作

萌新作者在线卑微记录自己学习React的历程

代码及笔记来自尚硅谷学习视频

学习React首先要引入react库,库可在react官方网站下载,具体操作如下：
1.先进入官网(百度搜索react就行)
React官网
2.点文档，再点右边的CDN链接
在这里插入图片描述
复制这几段地址

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
https://unpkg.com/babel-standalone@6/babel.min.js
分别在浏览器中打开用ctrl+s 保存，建议保存到一个容易找到的文件夹下
以及prop库这里暂时用不到

注意：要先引入1库在引入2
然后就可以进行如下操作了：

<!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>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom.用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel" >
    //   此处一定要写babel
    // 1.创建虚拟DOM
    const VDOM = <h1>Hello,React</h1> //此处一定不要写引号，因为不是字符串
    // 2.渲染虚拟DOM到页面
    //ReactDOM.render(虚拟DOM,容器)
    ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

</body>
</html>

奇葩之小王子

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
react个人笔记---引入那三个必须使用的库（附链接） -- 引入react库等简单操作

react个人笔记 – 引入react库等简单操作萌新作者在线卑微记录自己学习React的历程代码及笔记来自尚硅谷学习视频学习React首先要引入react库,库可在react官方网站下载,具体操作如下：1.先进入官网(百度搜索react就行)React官网2.点文档，再点右边的CDN链接复制这几段地址https://unpkg.com/react@16/umd/react.development.jshttps://unpkg.com/react-dom@16/umd/react
复制链接

扫一扫