代码

以下是html代码，复制代码到html文件，可直接运行。

(请关注<body></body>里的JS代码和注释)：

<!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>helloReact</title>
</head>

<body>
    <div id="app"></div>

    <script type="text/babel">
        ReactDOM.render(        
            //代码块①开始
        	<h1>hello world!</h1>,      
            //代码块①结束，注意结束有个逗号
            document.getElementById("app")	//设置挂载点
		//上一行代码(结尾没有分号)将代码块①放入上边的 <div id="app"></div>，F12检查元素可以看到效果。
        )
    </script>
	
	//两个和react相关的脚本文件
    <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>

    //babel文件，作用是解码，详情请参考ES6
	<script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>

</body>

</html>

运行效果

效果.png

调试

F12检查元素

可以看到代码块①被添加进id为app的<div>

代码块①被添加进id为app的div

转码效果

babel官网转码（进入官网后点击Try it out）。关于什么是babel，参看ES6（我还不会hh）。

左边是JSX语法，方便我们写代码。

通过babel转码