# 基础知识

# React 能做的事

在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。

# 语法

createElement(type,[props],[children...]) - 在虚拟DOM上创建指定的React元素
参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。
参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。我们在示例中简单的设置为null。
从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树：
render(element,container,[callback]) - 将虚拟DOM上的对象渲染到真实DOM上
参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法的执行改变。
callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。

# 选择 Dom

element = document.querySelector(selectors);
例子：var el = document.querySelector(".myclass");

# React组件

组件就是一个实现预定义接口的JavaScript类在meta中，至少需要实现一个render()方法，而这个方法，必须而且只能返回一个有效的React元素。

你的React组件名称的首字母应当大写
div元素的样式类是用 className而不是class声明的，这是因为class 是JavaScript的保留字

# JSX

JSX是对JavaScript语法的扩展，它让我们可以在JavaScript代码中以类似HTML 的方式创建React元素。

<!--定义容器-->
	<div id="content"></div>

	<!--声明脚本类型为JSX-->
	<script type="text/jsx">

		//定义React组件
		var EzLedComp = React.createClass({
			//每个React组件都应该事先render()方法
			render : function(){
				var e =

					//JSX-->
					<div>
						<div className="ez-led">Hello, React!</div>
						<div className="ez-led">2015-04-15</div>
					</div>;
					//<--JSX

				return e;
			}
		});
		//渲染
		React.render(
			<EzLedComp/> , //JSX
			document.querySelector("#content"));

	</script>

获得事件参数需要，需要在事件后添加e:

handleClck: function(e){

}

JSX 中插入变量

inputChangeHandler : function (event) {
    this.setState({ [event.target.id]: event.target.value });
}

展开属性内容

<SubComp {...this.props} />

← 从零开始 props →