React是什么？文字上最准确的定义就是官方文档，请自行查阅。
让我们马上上手来用下React。
有一个<div>标签，要求用JavaScript在这个标签里显示一段文字，如何做呢？原生的做法如下：
<div id="rootElement"></div>
<script type="text/javascript">
const rootElement = document.getElementById('rootElement')
const divElement = document.createElement('div')
divElement.textContent = 'du1dume'
divElement.className = 'container'
rootElement.appendChild(divElement)
</script>
入门系列吗，简单解释两句。先从html中获得root元素，再创建个div元素，把这个div元素的textContent属性赋值为随便什么文字，把这个div元素的className属性赋值为container，最后把这个div元素添加到root元素中，齐活！
下面我们来看看用React怎么实现。
其实和原生的实现非常类似，也是有个createElement方法用来创建一个元素，然后给这个元素的属性赋值，唯一的不通就在最后一步显示它的时候，原生的做法是用appendChild添加到页面中，而React提供了一个render方法把它添加到页面中。
首先，我们得把React引入到页面中，共两个js文件，如代码所示：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
然后，我们来看看如何创建一个新的div，并显示出来。如代码所示：
<div id="rootElement"></div>
<script src="https://unpkg.com/react@16.8.3/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.8.3/umd/react-dom.production.min.js"></script>
<script type="text/javascript">
/*这里还是获取根元素，没有变化*/
const rootElement = document.getElementById('rootElement')
const divElement = React.createElement(
'div',/*创建的是个div元素*/
{className: 'container'},/*为div元素的className属性赋值*/
'du1dume',/*相当于原生的做法，为textContent属性赋值*/
'du1dume2'
)
/*这里相当于原生的appendChild方法，把divElement添加到rootElement中*/
ReactDOM.render(divElement, rootElement)
/*打印div元素*/
console.log(divElement)
</script>
那么原生js创建的div和React创建的div有不同吗？我们已在render方法下面加了一行打印对象的代码，打印结果如图1
我们看到这个对象有一些属性，其中最重要的就是props属性。props中又有两个子属性，其中children属性的值就是我们要显示的文字，也就是React.createElement方法中的最后一个参数；而className属性就是我们传入的第二个参数，值为container。
实际上，我们可以给React.createElement方法传入任意多的参数，譬如：
const divElement = React.createElement(
'div',/*创建的是个div元素*/
{className: 'container'},/*为div元素的className属性赋值*/
'du1dume',/*相当于原生的做法，为textContent属性赋值*/
'du1dume2'/*又添加了一个参数*/
)
刷新页面我们再来看看打印的结果是什么，props属性的children属性变成了一个Array，里面有两个元素，顺序存放着我们传递的文字参数；既然如此，根据打印出来的信息，我们换一种传递文字参数的形式，代码如下：
const divElement = React.createElement(
'div',/*创建的是个div元素*/
{
className: 'container',/*为div元素的className属性赋值*/
children: ['du1dume', 'du1dume2']/*添加页面显示的文字信息*/
}
)
或者：
const divElement = React.createElement(
'div',/*创建的是个div元素*/
{
className: 'container',/*为div元素的className属性赋值*/
children: 'du1dume'/*添加页面显示的文字信息*/
}
)
刷新页面看看打印结果。这就是React.createElement方法，首先传入你想创建的元素的字符串形式，然后传入一个对象，这个对象中有很多属性可以使用，这个对象本身其实就是你所要创建元素的props属性。至于传多个参数，看你方便。
