此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第一篇，入门篇，使用React写一个hello React！
入门，使用react写一个hello world
使用jsx写hello world
首先我们先准备好“容器”，一个id为test的div。
然后我们以此引入react库，分别为react核心库，react操作dom的库和babel库，核心库必须在操作dom的库之前引入，顺序不可颠倒。babel库是将jsx转为浏览器可以看懂js的库。
注意在写script双标签的时候，将type格式改为："text/babel"，表示写为babel格式，我们写的是jsx，否则识别为普通js文件，导致报错。
然后写一个h1双标签，标签内写内容。注意不要加引号成为一个字符串，我们要写的是一个dom节点。
使用ReactDOM.render(dom节点名称，容器名称)，dom节点就是我们之前写的h1双标签，我们赋值给了VDOM这个变量，容器名称我们使用js原生方式document.getElementById('test')获取。将两项参数填入，就可以将dom节点挂载到页面上。
代码如下：
<!-- 准备好容器 -->
<div id="test"></div><!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">//写为babel格式，否则识别为普通js文件
//1.创建虚拟dom
const VDOM = <h1>Hello,Recat</h1> //此处不可以写引号，此非字符串，而是虚拟dom
//2.渲染dom到页面，就是根据虚拟dom生成真实dom
ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id
</script>效果如图：
使用原生js复刻上面代码
使用原生js写出hello world。因为是原生js，所以我们不用引入babel库，只引入前面的两个库就行了。
在script双标签内正常书写type="text/javascript"，表示代码是js。
使用React.createElement('标签名称',{标签属性'},'内容'),此为react自己创建dom节点的api，第一个参数为标签名字，如h1，第二个参数为标签属性，以对象的形式存在，如{'id:title'},第三个参数为标签内容。
然后再使用ReactDOM.render将dom节点挂载到页面上。
代码如下：
<!-- 准备好容器 -->
<div id="test"></div><!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
<!-- 在使用js创建虚拟dom的时候，我们不引入babel库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> -->
<script type="text/javascript">
//1.创建虚拟dom
const VDOM = React.createElement('h1',{id:'title'},'Hello,Recat') //此处是react自身的api，创建dom节点
//2.渲染dom到页面，就是根据虚拟dom生成真实dom
ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id
</script>效果如下：
标签嵌套的情况
如果我们写一个h1标签嵌套span标签的hello，Recat会怎么样？
与之前代码相同，只改变虚拟dom的部分，先看jsx代码：
//1.创建虚拟dom
const VDOM = <h1><span>Hello,Recat</span></h1>效果如图：
如果我们在js原生代码里面这样写呢？
//1.创建虚拟dom
const VDOM = React.createElement('h1',{id:'title'},'<span>Hello,Recat</span>')结果如下，就会把span双标签当作字符串渲染到页面上。所以我们还是推荐使用jsx来编写代码，因为它可以更好的编写dom节点。
所以说，recat的一大特点，就是更为方便的创建虚拟dom。我们可以把前面的代码做一些优化，用小括号包裹起来我们创建的dom节点，让其和dom结构一模一样。
jsx创建虚拟dom的代码，是js创建虚拟dom代码的语法糖。
代码如下：
const VDOM = (//此处不可以写引号，此非字符串，而是虚拟dom
<h1>
<span>Hello,Recat</span>
</h1>
)