react 入门-创建元素

最新推荐文章于 2024-07-24 08:58:17 发布

teamlet

最新推荐文章于 2024-07-24 08:58:17 发布

阅读量3.8k

点赞数

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

本文链接：https://blog.csdn.net/teamlet/article/details/78794182

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

为了能让react在浏览器中运行，需要引入两个js库，分别是 React和ReactDom。

一、举例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React Elements</title>
</head>
<body>

<!-- Target Container -->
<div id="react-container"></div>

<!-- React Library & React DOM-->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>
    const sayHello = React.createElement("h1", null, "Hello World")
    ReactDOM.render(
        sayHello,
        document.getElementById('react-container')
    )
    console.log('say', sayHello)
</script>

</body>
</html>

二、Element和Dom的对比

1、Html Element

页面的结构是由Html Element构造的。

<h1>这是个标题</h1>

<div>点击获取帮助</div>

h1和div都是Html Element。

2、Html Dom

在浏览器中DOM是Document Object Model (DOM) 的简写，通过document对象操作 html element，如var element = document.createElement(“div”);

3、React Element

React库提供了创建React Element的API，如下面创建一个简单的 React Element

React.createElement("h1", null, "Hello World")

或者为element添加属性：

React.createElement("h1",
{id: "header1", 'data-type': "title"}, "Hello World")

4、React Dom

React Dom操作的是React element，React Element实际上是 javascript 的 object。

通过ReactDom可以将React Element在浏览器中渲染出来。

ReactDOM.render(
        sayHello,
        document.getElementById('react-container')
    )

teamlet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 入门-创建元素

为了能让react在浏览器中运行，需要引入两个js库，分别是 React和ReactDom。
复制链接

扫一扫

专栏目录