版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/teamlet/article/details/78794182
为了能让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')
)