后端程序员React初接触1

news2025/1/17 4:08:24

后端程序员React初接触

学习react基础与相关库的使用学习包括react基础路由组件库等等

react是用于构建用户界面的JavaScript库

发送请求获取数据
处理数据
操作dom呈现页面（react帮忙操作dom）

数据渲染为视图有facebook打造并开源

解决的问题

dom操作繁琐
使用js直接操作dom浏览器会大量操作dom进行重排
没有组件化编码方案代码复用率低
可以进行移动端的开发

特点：使用虚拟dom+优秀的diffing算法

使用非脚手架的形式

babel.js作用js转jsx
react.development.js 核心库
react-dom.development.js拓展库

引用时存在顺序先使用核心库在使用拓展库

搭建初始结构

<!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>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 映入拓展库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 映入babel用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 表示写的是jsx此处写的是babel -->
    <script type="text/babel">
        
    </script>
</body>
</html>

案例实现

<!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>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 映入拓展库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 映入babel用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 表示写的是jsx此处写的是babel -->
    <script type="text/babel">
        //创建虚拟dom
        const VDOM = <h1>Hello,React</h1> /*此处一定不要写引号，因为不是字符串*/
        // 渲染dom到页面
        ReactDOM.render(VDOM,document.getElementById('app'))
    </script>
</body>
</html>

在这里插入图片描述

使用js创建虚拟dom

<!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>使用js方式创建虚拟dom</title>
</head>
<body>
    <!--准备好一个容器-->
    <div id="app">
        
    </div>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 映入拓展库 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 表示写的是jsx此处写的是babel -->
    <script type="text/javascript">
        //创建虚拟dom
        const VDOM =React.createElement('h1',{id:'title'},'Hello,React1')
        // 渲染dom到页面
        ReactDOM.render(VDOM,document.getElementById('app'))
    </script>
</body>
</html>