React简介

分寸感

已于 2023-01-17 09:02:08 修改

阅读量60

点赞数

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

于 2023-01-13 10:42:23 首次发布

本文链接：https://blog.csdn.net/weixin_44275277/article/details/128670738

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一节 React简介

前言

用于构建用户界面的JavaScript库，由Facebook开发。

一、React的特点？

采用组件化模式、声明式编码（与命令式不同），提高开发效率及组件复用率。
在React Native中可以使用React语法进行移动端开发。
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

二、Hello,React！

1.引入React核心库

代码如下（示例）：

<body>
    <!-- 容器 -->
    <div id="test"></div>
    <!-- 引入react核心库、支持React操作DOM、babel将jsx转为js -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <!-- 此处写babel 要不然会当作js -->
    <script type="text/babel">
      //1.创建虚拟DOM
      const VDOM = <h1> hello,react </h1>;
      //2. 渲染虚拟DOM到页面 (虚拟DOM，容器)
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
  </body>

2.输出结果

在这里插入图片描述

3.jsx创建虚拟DOM

代码如下（示例）：

const myId = "title";
      const myData = "HeLlo,rEact";
      //1.创建虚拟DOM 为一般的js对象
      const VDOM = (
        <div>
          <h1 className="title" id={myId}>
            <span style={{ color: "white", fontSize: "29px" }}>
              {" "}
              {myData.toLowerCase()}{" "}
            </span>
          </h1>
          <input />
        </div>
      );