react 基础学习前言

react 前期知识储备

javascript 基础知识储备。
ES6 相关基础知识储备。
与是否掌握 Vue 编程无关。

react 学习的好处

众所周知，小厂使用 vue，大厂使用 react。
react 的维护团队有点厉害，由 facebook 团队进行维护。
react 咋国际上的地位相比于 vue 或者是 angular 框架高一些。
react 更是纯组件开发的代表，即一切皆组件。
掌握了 vue ，angular 之后，在学习一下 react 更全面一点，俗称“技多不压身”。
一切向 “钱” 看！

什么是 react

官网

react 中文官网：点击进入

在这里插入图片描述

特点

react —— 用于构建用户界面的 JavaScript 库。

特点在官网写的很清楚了：

声明式编码。即不需要操作 DOM，数据驱动视图只需要更新数据即可。
组件化编码。
一次学习，随处编写。支持客户端和服务器的渲染。
高效性，采用虚拟的 DOM。
单项数据流。

案例：简单的 DOM 渲染案例

我们就简单的使用 react 把一个基础的 dom 渲染到页面上去，很简单，莫慌。

首先创建一个 js 文件夹，存放一下我们使用的三个 js 文件。

在这里插入图片描述文件放进来之后，我们在创建一个 react001.html 文件，编写 react，实现这个 demo 功能。

<!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>react001-基础</title>
</head>
<body>

    <!-- 准备好一个容器 -->
    <div id="app"></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>
    <!-- 引入 label，用于将 jsx 转化为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建虚拟dom
        const VDOM = <h1>我是𝒆𝒅.</h1>  // 此处一定不要写双引号，因为不是字符串。
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
    </script>

</body>
</html>

好的，保存，双击 html 文件，打开浏览器，查看效果！

在这里插入图片描述 OK，DOM 渲染出来了，这就是一个最基本的 Dom 渲染操作。

有几点注意的东西，我在代码里面备注了，千万不要犯错。

还有一点，我们在代码里面渲染了一个 DOM，如果我们在渲染一个怎么办？有聪明的宝子们知道了，就是去在追加一个，看下面代码。

    <!-- 此处必须写 text/babel -->
    <script type="text/babel">
        // 1. 创建虚拟dom
        const VDOM = <h1>我是𝒆𝒅.</h1>  // 此处一定不要写双引号，因为不是字符串。
        const VDOM1 = <h1>我今年10岁了</h1>  // 此处一定不要写双引号，因为不是字符串。
        // 2. 渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById("app"))
        ReactDOM.render(VDOM1, document.getElementById("app"))
    </script>

追加一个不就可以了嘛！打开浏览器刷新！看效果。

在这里插入图片描述哎哟，发现第一个 dom 没了！

为什么呢？很简单哈，就是 ReactDOM.render 不是一个追加操作，而是替换，那想追加怎么操作呢？后边说。好的，这篇博文暂时到这里，下一篇博客见！

在这里插入图片描述

【本篇博文相关代码资料】：我是𝒆𝒅. 的 gitee

# react 基础学习前言

react 基础学习前言

react 前期知识储备

react 学习的好处

什么是 react

官网

特点

相关库

案例：简单的 DOM 渲染案例