react 入门-创建元素

Posted teamlet

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了react 入门-创建元素相关的知识，希望对你有一定的参考价值。

为了能让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')
    )

以上是关于react 入门-创建元素的主要内容，如果未能解决你的问题，请参考以下文章

react 入门-创建组件继承component法

React 入门 03 - 元素与组件

React 入门 03 - 元素与组件

简写的名字

React入门2

React入门2