一、详细创建步骤

1、创建容器

<div id="test"></div>

2、引入react核心库

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
​
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

3、书写script代码 渲染页面

/* 此处一定要写babel */
<script type="text/babel">
   //1.创建虚拟DOM
    const VDOM = <h1>Hello,React</h1>
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

二、注意事项

目前主要引入两个核心库，分别为react以及react-dom，这两个必须顺序引入，react先引入，其次再引入react-dom。如果顺序不对，会产生如下错误：