标签：
一、引入Reactjs
方法一：直接下载相关js文件引入网页，其中react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
<script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script>
方法二:通过前端架构工具，比如 browserify 或 webpack。使用 react和 react-dom npm 包.
var React = require(‘react‘); var ReactDOM = require(‘react-dom‘);
二、基本原理
1、创建组件
var Component=React.createClass({ render:function(){ return ( <div className="box"> <h2>我是一个标题</h2> <contentInfo />//子组件 </div> ) } })
2、渲染组件（组件名称，要插入的节点）
ReactDOM.render(<Component />, document.getElementById(‘app‘));
3、组件的状态，状态改变组件将重新渲染
getInitialState: function() { return {liked: false}; }
4、组件的数据交互
用this.props获取组件传递过来的数据
var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="John" />, document.getElementById(‘example‘) );
设置ref值，方便后续使用React.findDOMNode方法获取虚拟dom
var MyComponent = React.createClass({ handleClick: function() { var TextInput=React.findDOMNode(this.refs.myTextInput); TextInput.value="clicked"; }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render(<MyComponent />,document.getElementById(‘example‘));
5、组件的生命周期三个状态五个函数
Mounting：已插入真实 DOM；Updating：正在被重新渲染；Unmounting：已移出真实 DOM
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
标签：
原文地址：http://www.cnblogs.com/gulei/p/5977722.html
