一、创建html 引入React的三个常用包
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.devolopment.js"><script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="../js/react.devolopment.js"><script>
<!-- 引入babel用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js""><script>
注：先引入核心库再引入其他库
二、准备一个容器
<div id="test"></div>
三、创建虚拟DOM并渲染
<script type="text/babel"> /*注意此处写babel*/
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))
/*该创建方式构建虚拟DOM 代码量大时浏览器渲染时耗时严重会出现白屏，仅供学习*/
</script>
四、总结
- 需要“容器”作为根节点
- script标签type值为text/babel
- 先引用react核心库
- VDOM中html标签外不用引号包裹
