React 18的基本使用

唐璜Taro

已于 2022-11-10 16:08:13 修改

阅读量904

点赞数 3

分类专栏： React.js 文章标签： react.js javascript 前端

于 2022-10-23 21:29:29 首次发布

本文链接：https://blog.csdn.net/weixin_44067347/article/details/127477561

版权

React.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏

文章目录

前言
一、React是什么？
二、使用步骤
总结

前言

随着前端的不断发展，React这门技术也越来越重要，很多人都开启了学习React18，本文就介绍了React 16 与React 18的基础内容。

一、React是什么？

React：用于构建用户界面的JavaScript库；

声明式
组件化
跨平台

二、使用步骤

1.引入库

react.js ( 核心库，拥有react web 和 react-native 所共同拥有的代码)
react-dom.js （针对web和native完成的事情各不相同，web端会将jsx渲染成真实的dom，native会将jsx渲染成原生的控件）
babel.js （ES6代码转成ES5代码，是我们能够在目前不支持在ES6的浏览器上执行React代码）

2. CDN引入

React 16：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

React 18：

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

3. 编写React代码（JSX语法）

注意：

如果我们需要使用 JSX，则script标签的 type 属性需要设置text/babel

React 16

<!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="root"></div>
    <!-- React 16 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello,React 16</h1>,
        document.getElementById('root')
      )
    </script>
  </body>
</html>

在这里插入图片描述

React 18

<!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="root"></div>
    <!-- React 18 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
      const root = ReactDOM.createRoot(document.getElementById('root'))
      root.render(<h1>Hello,React 18</h1>)
    </script>
  </body>
</html>

在这里插入图片描述

总结

以上就是今天要讲的内容，本文仅仅简单介绍了React的使用，而React提供了大量能使我们快速便捷地处理数据的函数和方法。

唐璜Taro

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
React 18的基本使用

随着前端的不断发展，React这门技术也越来越重要，很多人都开启了学习React18，本文就介绍了React 16 与React 18的基础内容。以上就是今天要讲的内容，本文仅仅简单介绍了React的使用，而React提供了大量能使我们快速便捷地处理数据的函数和方法。
复制链接

扫一扫

专栏目录