002.react基础案例

一、创建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>
复制代码

四、总结

1. 需要“容器”作为根节点
2. script标签type值为text/babel
3. 先引用react核心库
4. VDOM中html标签外不用引号包裹