随着web应用的发展，前端的比重占得越来越多，编写代码从而也越来越复杂。而通常我们需要将不同功能或者不同模块的代码分开写，最后在html中一起加载，这样做是可以的，但是当你需要进行维护或者是二次开发的时候，你会觉得十分费劲，因为你不知道文件之间复杂的关系，所以我们需要利用一些插件来配合进行模块化的开发。
所谓模块化的开发，写过nodejs的人都知道，文件之间的依赖可以用require()实现，但是浏览器端是不支持这样的依赖形式的，而browserify却可以解决这个问题，再加上gulp这个强大的构建工具，使得前端的模块化开发变得简单了。
接下来就利用gulp和browserify两个工具，将ReactJs编写的一个小Demo进行展示:
先来看下我们最终的目录结构，以便读者的后续操作:
React是Facebook于2013年开源的一套框架，它从刚开始的UI框架逐渐演变成了新的Web解决方案。它的主要特点有三个:
---Just the UI
---Virtual DOM
---data flow
一个语言的框架，重要的不是记住它的接口，而是要掌握它的思想，要理解并掌握React，需要从这三个特性入手。
Just the UI
没错，React在UI上有非常有优势的地方，这个优势主要来源于React可以将一个网页，甚至是一个项目工程的静态页面切割成不同的块，也就是组件。
组件化的开发可以避免模板(如ejs)开发复杂的逻辑，同时它不影响其他框架库类合并使用，更有利于团队开发。可见React使开发有了更便捷，使维护更简单。
Virtual DOM
熟悉前端的人都知道，传统的DOM渲染及操作是很耗时的，特别是在DOM操作比较频繁的情况下，DOM是性能出现瓶颈的主要因素。
而React采用虚拟DOM，利用diff算法来进行DOM管理，这里的虚拟DOM其实是保存在内存中，所以速度是非常快的。而且虚拟DOM可以在服务器端渲染，在性能方面这是很有创新的。可见React使网站性能更好。
data flow
React中的数据流与Angular是不同的，或许你认为Angular的双向数据流对于数据交互非常轻松，但是React基于属性Props和状态State的单向数据流会给你带来条理非常清晰的逻辑，当然你还可以引入其他框架或者库类来进行与后台的数据交换，这一切的数据都是由组件(React中组件就是一个个状态机)的属性和状态决定。可见React使任务逻辑更清晰。
React是很创新的，对现代工业化前端的开发，维护以及使用的性能都是非常好的提升。还有关于React一些细节就不在这里细说了。
接下来我们开始编写我们的React Demo。这是一个类似问卷的一个小Demo,包含了3个判断题的组件的一个页面，我们最后需要将用户填写的结果上传到服务器，例子很简单，大家主要要体验下这个开发过程。
首先在创建一个工程项目:
1.创建一个项目文件夹，并且在sublime text中打开
2.使用cmd进入这个文件夹，然后npm init创建package.json文件，这个文件展示工程的相关信息，包括插件的信息。（前提是要先安装npm）
3.编写子组件Child.jsx(判断题组件)，从现在开始我们直接采用模块化的语法来编写JSX文件，写过Node的小伙伴会觉得很熟悉，它其实和服务器端的CommonJs规范是差不多的。有关React的语法可以通过React的官方文档进行了解。
facebook.github.io/react/index.html >>Learn React Now !
1 var React = require("react/addons"); 2 3 // 判断题可以看作对和错只能选一个的题目，因此是一个单选框 4 var Child = React.createClass({ 5 // 状态对象包含判断题的当前选项的值 6 // @param : value 7 // @key : true,false 8 getInitialState : function(){ 9 return{ 10 value : "true" 11 }; 12 }, 13 handleChange : function(event){ 14 //通过事件委托连接子组件和父组件，将子组件中的value状态传入到父组件中 15 if(this.props.onChange){ 16 this.props.onChange(event); 17 } 18 //更改子组件的状态，重新渲染UI上。 19 this.setState({ 20 value : event.target.value 21 }); 22 }, 23 render : function(){ 24 return( 25 <div> 26 <label>{this.props.label}</label> 27 <input type="radio" name={this.props.name} checked={this.state.value == "true"} value="true" onChange={this.handleChange} /> 28 "true" 29 <input type="radio" name={this.props.name} checked={this.state.value == "false"} value="false" onChange={this.handleChange} /> 30 "false" 31 </div> 32 ) 33 } 34 }); 35 36 module.exports = Child;