React的初体验

读过我的上一篇文章，大家应该对React的有了点小小的认识也带着小小的疑问，我个人认为，读的再多说的再好也不如实际上手练一练，俗话说得好真金不怕火炼，敲上那么一敲，走上正轨 let‘s Go

万丈高楼平地起，今天我们就学习一下怎么像平常开发似的引入react
互联网的资源还是很丰富的，我们找到下面的几个文件

<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/babel.js"></script>//编译文件 实现高版本js转成适应浏览器版本对应的js文件

有了这三个文件我们就可以开始进行下一步的开发

<div id="app"></div>

这是我们的body部分，起了一个id为app的div作为我们的容器
接下来正式进入我们react的js开发部分

<script type="text/babel">
        var obj = "lisi"
        ReactDOM.render(
            <div>
                <h1>React Js Hello</h1>
                <h2>{5+5}</h2>
                <h1>{ obj }</h1>
            </div>,
            document.getElementById('app')
        )        
</script>

js中有 3个点 是需要我们 特别关注 的地方

1. script标签

<script type="text/babel"></script>

关注的地方1： 我们的script标签的 type值为“text/babel”
只有加上这样一条属性，我们的浏览器才会通过引入的babel.js去正确执行我们写好的文件

<script type="text/babel">
        var obj = "lisi"
        ReactDOM.render(
            <div>
                <h1>React Js Hello</h1>
                <h2>{5+5}</h2>
                <h1>{ obj }</h1>
            </div>,
            document.getElementById('app')
        )        
</script>

关注的地方2： React渲染视图的方式 ReactDOM.render(）
既然我们使用的是React，那么我们就要遵循react给我们定制好的规则一步一步的向下走，
这个函数里有两个参数，第一个参数： 我们要渲染的内容，第二个参数： 渲染视图的容器

 ReactDOM.render(
            <div>
                <h1>React Js Hello</h1>
                <h2>{5+5}</h2>
                <h1>{ obj }</h1>
            </div>, 
            document.getElementById('app')
        )        

关注的地方3： 第一个参数
第一个参数作为我们要渲染的视图部分，有且只能有一个顶层容器来包裹
视图代码，看着像是我们普通的HTML代码，但不是。这里的代码为JSX的语法
（JSX ---->javascript + xml）
我们定义了一个obj 值为 “lisi” <===> let obj = " lisi "
通过插值表达式的方式，将我们定义的值插入其中 { obj }
插值表达式也可以接受一些计算值{5+5}

这样我们的第一个react实例就做好了，打开浏览器看看效果吧。

下一篇我们将进入更深层次的学习，相信自己，加油！！！！