React Hello world 程序以及bower的简单介绍

React是由FaceBook推出的js框架，在这里，你要明确地记住，react是传统的mvc框架中的 V 层框架，记住这点有益于你去理解很多React 与MVC 框架的不同之处，好了，下面我们开始我们今天的学习。

在讲解之前，我需要介绍一个前端的包管理工具，这有助于我们前期的学习。

Bower 类似于 npm ，但是是属于前端的包管理工具，因为使用它安装的包不需要使用 require 去引入，而是根据你的一般习惯直接通过script 标签去引入，就像下面这样子：

   

<script src = "bower_components/react.min.js"></script>

Bower的使用规则与npm一致，但是在使用之前你需要安装（npm是nodejs默认就会去安装的，所以我们不用再单独安装）： npm install  bower -g  

安装完成以后就可以通过 

                                 bower -v （验证bower是否安装完毕）

                                 bower install  包名 （安装包）

  这里我们需要两个包  react  和  ES6的编译工具babel， 所以执行  bower  install  react  babel（要一次安装多个包就有空格把包名隔开）。可能对react有所了解的同学会问，不需要安装 react-dom （react用来渲染dom元素的脚本）？ 这里不需要，在你安装react时，bower会将react 和react-dom一起装下来。

关于Bower的内容有很多，这里只是最简单的使用介绍，在我的博客的工具篇会分享关于他的更加详细的介绍，有兴趣的同学可以去看一下，不足之处望指出。

然后就是在页面引入我们下载完成的包，他们的路径一般都是一下引入脚本的路径：

    <script src ='bower_components/babel/browser.js'></script>    <script src='bower_components/react/react.min.js'></script>    <script src='bower_components/react/react-dom.min.js'></script>

这三个脚本没有次序之分，建议在头部引用（也可以在别的位置引入，只要在你的react 代码前面引入即可），接下来就按照我们程序界的光荣传统 --- 》 书写 Hello World！

    <script type='text/babel'>        ReactDOM.render(                <h1>Hello, world!</h1>,                document.getElementById('app')            );    </script>

这里记清楚，script的type要设置为 ‘text/babel’,因为react是js本身的扩展（或者叫语法糖），写出来的代码需要经过react去编译以后js的解析器才能正常的去执行。

到这里，我们学会了怎么使用bower去安装包，以及包的使用，有兴趣的同学可以跟着教程走一遍，这样可以加深映像，为后面的学习打下基础。

如在学习本节中遇到问题，请留言，看到后会给与回复和讲解