react初体验（1）

1. 下载react依赖(将ES6语法转译成Es5语法，jsx格式转译成js格式)

• babel.min.js
• react.development.js （react核心库）
• react-dom.development.js （扩展库）

2. 准备一个容器

    <!-- 2.准备一个'容器' -->
    <div id='test'></div>
   

3. 引入依赖库顺序必须是这样的

• 首先 react.development.js
• 其次 react-dom.development.js
• 最后 babel.min.js

<!-- 3.引入react核心库 -->   //引入React全局就多一个react对象
<script type='text/javascript' src='./js/react.development.js'></script>
<!-- 引入react-dom.用于支持react操作DOM --> //引用reactDom全局多一个 ReactDOM对象
<script type='text/javascript' src='./js/react-dom.development.js'></script>
<!-- 引入babel.用于支持jsx转为js -->
<script type='text/javascript' src='./js/babel.min.js'></script>

4.加入script标签，其中 默认type='text/javascript'是js文件，我们是react所以要写成babel，我们写的不是js而是jsx

<!-- 2.引入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 type="text/babel"> //此处一定要写babel

</script>

5. Render接受了两个参数，一个是虚拟dom，一个是容器（把那个虚拟dom渲染到那个容器上，React并未提供选择器的写法）

<script type="text/babel"> //此处一定要写babel
    //1.创建虚拟DOM
    const VDOM = <h1> hello,lisa</h1> //此处不要写引号，因为不是字符串
    //2.渲染虚拟DOM到页面
    //ReactDom.render(虚拟DOM,容器)
    ReactDom.render(VDOM,document.getElementById('test'))

</script>

6.不是追加 是替换动作

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

</script>