React是一个由Facebook于2013年5月开源的库，采用MVC模式。而React它最初只是Facebook的一个内部项目使用的框架，由于它的设计思想独特，性能出众，代码逻辑简单，可以说优于市面上流行的基他JavaScript MVC框架，因此，越来越多的人开始关注并使用React,从而也使得React变成了时下最热门的前端框架。 由它衍生的React Native项目当前也变得火热起来，一时间使得从事Android与IOS开发的同学担心自己在不久的将来可能会丢了饭碗，因为React Native是一种用写Web App的方式去写Native App。那样同一组人就只需要写一次界面，就可以运行在Android,IOS,PC等各个端。
由于React是一个库，得先进行依赖，React的依赖有3种，
一种是直接下载解压使用：
你可以在官网 http://reactjs.cn/react/downloads.html 下载最新版。然后解压到指定目录下，并 在< script src=”“/>引用路径里面指定react.js,react-dom.js的路径。
一种是使用内容分发网络(CDN)：
<script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.min.js"></script>注： 上面使用的是.min文件，即压缩文件，这个是生产环境的，开发者看不到源码。 当然，便于调试，我们可以使用未经压缩的文件，比如：
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script> <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>上面的react.js与react-dom.js两者是必须要的。其中react.js是React的核心库，react-dom.js提供与DOM操作相关的功能。除此之外我们还会引入browser.js库：用于将JSX语法转化为JavaScript语法。
另一种就是用npm命令来安装React:
$ npm install react -g --save $ npm install react-dom -g --save全局安装React,–save是将包添加至package.json文件（*这个文件是调用npm init 命令自动生成的）
组件式开发的模型以及它的概念，这里不再赘述。在JavaScript中，对模块化或组件式开发，目前非常流行的一个库是require.js。它有以下优点：
可以实现js文件的异步加载，避免了网页因加载过多的js文件而失去响应；用于管理模块之间的依赖性，便于代码的编写和维护。如果想要依赖某个模块时，只需调用require()方法即可，返回这个组件的对象。如：
//注意，定义的这个ComponentName组件名首字母必须大写。 var ComponentName = require('../common/js/Test.js');组件式开发的核心思想是，一个组件为一个js文件。 在React里面，可以通过React.createClass({})方法来创建一个组件，这个方法里面{}实现一系列的接口，其中render:function(){};接口是必须实现的。当需要关注React的生命周期时，其与各生命周期相关的接口就得实现。比如：
//sate状态初始化 getInitialState:function(){ return { open:false, online:true }; }, //当state状态改变时调用 componentDidUpdate:function(){ //todo }, //组件挂载完毕时调用 componentDidMount:function(){ //todo }, //render是必须要实现的方法 //当调用React.render(<组件/>,document.getElementById('Root'))方法时，该方法就会被回调 render:function(){ return ( <div>测试渲染</div> ); }同时，在这个组件里面，自己也可以封装一些方法，在render里面来调用。
组件作为一个对象，也可以理解成一个DOM节点，因为它最终在渲染的时候也会加入到HTML文档中，但它又不是真正的DOM节点，而是一种数据结构，只有在组件被挂载到DOM以后，才会变成真正的DOM节点，因此，组件也被称为虚拟DOM。
同时组件作为一个对象，它有自己的生命周期，而其生命周期可以分成三个状态： - Mounting:已经插入了真实的DOM - Updating:正在被重新渲染 - Unmounting:已经移出真实的DOM
除了Unmounting状态只有一种处理函数外，其它每个状态都有两种处理函数，will函数在进入状态之前调用，did函数在进入状态后调用。比如： - componentWillMount():将要挂载组件； - componentDidMount(): 组件挂载成功；
此外，React还提供两种特殊的处理函数： - componentWillReceiveProps(object nextProps):已挂载成功的组件在收到新的参数时回调 - shouldComponentUpdate(object nextProps,object nextState):当组件需要重新渲染时回调。
组件即对象，因此，组件有相应的属性，我们可通过this.props来获取当前组件对象的指定属性。
var HelloClass = React.creatClass({ render:function(){ return ( //读取组件的属性，这个名字是随便取的。 <h1>随便取的属性名：<font color='red'>{this.props.sunny}</font></h1> ); } }); React.render(<HelloClass sunny="我是sunny"/>,document.body);如图：
像其它编程语言一样，有时我们需要指定变量的类型。而在React里面，由于组件的属性可以接受字符串、对象、函数等任意值。这时，为了对使用者进行约束，我们也可以指定属性的类型，这时就要用到PropTypes,eg:
var PropesTest = React.createClass({ //定义两个属性,在引用该组件时，如果用到这两个属性，则值的类型必须符合给定的类型， //否则会报错。 propTypes:{ name:React.PropTypes.string.isRequired, content:React.PropTypes.string.isRequired, }, render:function(){ return ( <h1>名字：{this.props.name}+"\n内容："+{this.props.content}</h1> ); } }); //情况一： React.render(<PropesTest name=1111 content="内容"/>,document.getElementById("example")); //情况二： React.render(<PropesTest name="我是**" content="哈哈"/>,document.getElementById("example"));结果如下：
情况一：
情况二：
