React 基础使用-阿里云开发者社区

React 基础使用

2024-04-07 16

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React 基础使用

react 是一个开源的 JavaScript 库，用于将数据渲染为 HTML 界面（只关注视图）。

react 使用了虚拟 DOM 和 Diff 算法。当数据更新后，Diff 算法会将新生成的虚拟 DOM 和之前的虚拟 DOM 进行对比，只将不同的地方更新到页面中。

引入依赖文件：

开发环境：

<!-- 引入 react 核心库 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<!-- 引入 react-dom ，用于支持 react 操作 DOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- 引入 babel ,用于将 jsx 转为 js -->
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>

部署环境：

<!-- 引入 react 核心库 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<!-- 引入 react-dom ，用于支持 react 操作 DOM -->
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<!-- 引入 babel ,用于将 jsx 转为 js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

react 基础使用：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React的基础使用</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
 
    <!-- 引入 react 核心库 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <!-- 引入 react-dom ，用于支持 react 操作 DOM -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入 babel ,用于将 jsx 转为 js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
 
    <!-- script 标签的 type 类型一定要改为 babel 类型 -->
    <script type="text/babel">
      // 1. 创建虚拟 DOM（一定不要加引号，因为这不是字符串）
      const VDOM = <h1>你好呀！</h1>;
      // 2. 渲染虚拟 DOM 到页面
      ReactDOM.createRoot(document.querySelector("#test")).render(VDOM);
    </script>
  </body>
</html>

React 基础使用

热门文章

最新文章

相关课程

相关电子书