React 18的基本使用

文章目录

  • 前言
  • 一、React是什么?
  • 二、使用步骤
    • 1.引入库
    • 2. CDN引入
    • 3. 编写React代码(JSX语法)
  • 总结


前言

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


一、React是什么?

React:用于构建用户界面的JavaScript库;

  • 声明式
  • 组件化
  • 跨平台
    React 18的基本使用_第1张图片

二、使用步骤

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的基本使用_第2张图片


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 18的基本使用_第3张图片


总结

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

你可能感兴趣的:(React.js,react.js,javascript,前端)