1.2 Hello React

_语墨

已于 2022-03-23 20:26:31 修改

阅读量1k

点赞数 1

分类专栏： React

于 2022-03-12 23:26:24 首次发布

本文链接：https://blog.csdn.net/weixin_44247866/article/details/123452459

版权

React 虚拟DOM ReactDOM.render React.createElement JSX

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

React 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

React.createElement()

创建一个React元素，称作虚拟DOM，本质上是一个对象
1.参数1：元素类型，如果是字符串，一个普通的HTML元素
2.参数2：元素的属性，一个对象
3.后续参数：元素的子节点

ReactDOM.render()

1.参数1：显示的东西
2.参数2：容器

ReactDOM.render(“hello react”,document.getElementById(“root”))

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <!-- React的核心库，与宿主环境无关 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 依赖核心库，将核心的功能与页面结合 -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script>
     // 创建一个span标签
     var span =React.createElement("span",{},"这是一个span标签")
     //创建一个div标签
     var div=React.createElement("div",{title:'我的第一个react元素'},"hello","React",span)

     ReactDOM.render(div,document.getElementById("root"))
    </script>
</body>

</html>

JSX

JS的扩展语法，需要使用babel进行转义

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <!-- React的核心库，与宿主环境无关 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 依赖核心库，将核心的功能与页面结合 -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 编译JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
        ReactDOM.render(<h1 title="第一个React元素">Hello World <span>一个span元素</span></h1>, document.getElementById("root"));
    </script>
</body>

</html>