第一个react程序

一、 基本环境

   1、启动http服务器

      根据本地的Python版本不同，启动http服务器需要不同的指令，比如，我的Python是2.7版本，此时执行如下指令：

       

      启动后，在浏览器中访问：  localhost.8000，即可以访问该http服务器；

   2、编写react程序

       1）在自己的目录下，新建文件：   index.html， 文件中，内容如下：

        

        如上， react的代码，都会写在标签<script></script>标签内；此时打开index.html ，可以看到title部分为『Hello  React』；

     2）引入react框架代码到源程序中：具体如下：

        

        

        一方面，这个框架代码，其实可以直接下载到本地，然后直接引用本地的文件，这里，我直接使用的官方提供的 CDN 地址；

       具体介绍：  实例中，我们引入了三个库：  react.min.js、 react-dom.min.js、 babel.min.js;

             react.min.js: React的核心库；

             react-dom.min.js:  提供与DOM相关的功能；

             babel.min.js:  babel内嵌了对jsx的支持；通过将 Babel和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平；

       另一方面，需要在body中，增加『text/babel』,这个是固定的；

     3）展现内容

       任何需要展示在界面上的东西，都需要依赖react提供的『render』函数； 这里把内容添加render函数，调用及其得到的结果如下：

         

       

虽然可以正常返回，但是，返回的结果中，有警告提示，提示我们上面那么调用，并不是合理的；

原因分析：

    a)  render函数的调用，需要传入两个参数，如上所示：

          第一个参数，是jsx对象，jsx对象会把需要展示在界面上的内容进行组织并表示出来；之后react会将jsx转换为一些createElement调用，而createElement会在整个浏览器的DOM模型中添加DOM元素，来改变DOM模型，从而达到浏览器在渲染上做出响应改变的效果；

        第二个参数，是这个jsx所对应的DOM模型所要挂载的父节点，这里我们挂载到了body节点； 但是，正如警告所示，直接讲dom模型挂载到body节点，是有问题的； 【具体的内部原因，稍后考究】

  b) 找到原因后，我们做一个修改；

        这里采取，定义一个div节点，然后把jsx的DOM元素挂在到定义的div上即可；具体如下：

        

再次运行，查看结果，之前的警告已经没有了；

  

  4） 丰富界面

     在header中，通过style标签，增加css代码，这里分别对jsx对应的dom所挂在的container做了修饰，对h1也做了修饰，具体修改如下：

         

调用后的结果如下：

未完待续。。。