React-Hello World

最新推荐文章于 2024-10-13 00:34:41 发布

合法的咸鱼

最新推荐文章于 2024-10-13 00:34:41 发布

阅读量137

点赞数

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

本文链接：https://blog.csdn.net/yuey0809/article/details/125991427

版权

React 核心语法 JSX React.createElement ReactDOM.render

关键词由CSDN通过智能技术生成

react 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

react语法方式1(核心语法)

<!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核心库 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- ReactDOM库 -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script>
    /**
     * 创建一个React元素, 方式1
     * React.createElement(参数1, 参数2, 剩余参数...)
     * 参数1: 元素类型, 如果是个字符串,则表示一个普通的html元素(React元素)
     * 参数2: 元素属性, 一个对象
     * 剩余参数: 该元素子节点
     * */
    const span = React.createElement('span', {}, '这是一个span元素')
    const h1 = React.createElement('h1', {
      title: '配置个属性'
    }, 'Hello world', span)
    /**
     * ReactDOM库
     * ReactDOM.render(挂载内容, 挂载节点)
     * */
    ReactDOM.render(h1, document.getElementById('root'))
  </script>
</body>
</html>

react语法方式2(JSX)

注意script的type

<!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核心库 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- ReactDOM库 -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 编译JSX -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const h1 = <h1 title='配置个属性'>Hello world <span>这是一个span元素</span></h1>
    ReactDOM.render(h1, document.getElementById('root'))
  </script>
</body>
</html>