<!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="wrapper"></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>
<!-- 引入babel工具进行转义 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// React.createElement 核心库方法 该方法创建react对象 区别于document创建的dom对象
var li = React.createElement('li',{
title:"wodenide"
});
//JS的扩展语法,需要使用babel进行转义。
var li = <div className="wrapper0">你好祖国</div>
//该方法将创建的react对象与页面建立联系进行渲染
ReactDOM.render(li,document.getElementById('wrapper'));
</script>
</body>
</html>
The two process parameters of the display content to fill the container, and
## React.createElement react core library provided
React to create an element , called a virtual DOM, is essentially an object different from the document that created the object dom
1 1. Parameters: element type, if the string is, an ordinary HTML element
2. Parameter 2: attribute element in the form of an object passing
3. Follow-up parameters: children of the element inner label
## JSX
JS's extended syntax, you need babel escaped.