react 入门-创建元素

来源：互联网发布：linux中export命令编辑：程序博客网时间：2024/06/17 03:09

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

阅读全文

0 0