react学习笔记——1. hello react

news2024/10/6 16:29:23

包含的包一共有4个，分别的作用如下：

babel.min.js：可以进行ES6到ES5的语法转换；可以用于import；可以用于将jsx转换为js。注意，在开发的时候，这个转换（jsx转换js）不在线上使用，因为转换需要时间，页面可能会出现白屏。
react.development.js：react的核心代码库，引入以后，全局多了一个React对象
react-dom.development.js：react操作dom的扩展库，引入以后，全局多了一个ReactDOM对象
- 注意：react-dom.development.js必须要在react.development.js之后引入。
还有一个是prop-types.js：这个包在7. 组件实例三大属性-props中才会用到，是用于对标签属性添加限制的，是react16版本以后才需要单独引入的。引入以后全局多了一个Prop-Types对象。

引入包以后简单的写一些代码，则会出现一下几个问题
在这里插入图片描述

第一个是因为没有下载react的开发者工具
第二个是确保不要在线上使用babel，因为jsx->js耗时，可能会产生白屏之类的。使用脚手架之后，这个问题就没了。
最后一个是页面的偏爱图标，页面刷新以后，最后一个错误会消失，因为他找不到偏爱图标就不找了。这里可以将任意一个图标放在根目录下，即可作为偏爱图标，但是要求名字必须为"favicon.ico"。放在根目录以后，页面强制刷新（shift+F5）一下即可。

<!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>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，但是线上的时候，不这样用，因为这个转换需要时间，页面会产生白屏 -->
    <script src="../js/babel.min.js"></script>
    <!-- 注意，这里面写的是jsx的语法，所以这里type需要是babel。上面不写，默认就是text/javascript -->
    <script type="text/babel">
        /**
         * 步骤：
         *      1、创建虚拟dom
         *      2、渲染虚拟dom到页面
        */
        // 1、创建虚拟dom，注意这里不需要引号，因为这里的代码是jsx
        let VDOM = <h1>hello,react!</h1>
        // 2、渲染虚拟dom，使用render方法，此方法有两个参数，一个是虚拟dom，第二个是容器，并且此方法是一个追加的过程
        ReactDOM.render(VDOM, document.getElementById("test"))
        /**
         * 注意，只有这里需要document，因为react不需要自己操作dom，这里只是一个demo
        */
    </script>
</body>

</html>