React 与 React Native 之间的关系
简单来说前者用于WEB开发，后者用于移动端开发:
首先得先了解 ：React 可到菜鸟教程进行了解http://www.runoob.com/react/react-tutorial.html
- React的学习储备(HTML，CSS， JavaScript)，可以到http://www.w3school.com.cn/ 进行学习。
- 配置React 的开发环境。
- 新建一个小工程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="js/react.js"></script>//reacr.js是react的核心库
<script src="js/react-dom.min.js"></script>//react-dom.js 的作用是提供dom的相关功能
<script src="js/boowser.min.js"></script>// boowser.min.js的作用是将JSX语法转换成Javascipt语法
</head>
<body>
<div id="example"></div>
<script type="text/babel">
//有三个参数
//第一个：模版渲染内容（HTML形式）
//第二个：需要插入DOM的节点
//第三个： 渲染后的回调（一般不用）
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
- 创建组件的注意事项
- React中创建的组建类以大写字母开头，遵循驼峰命名法
- 在React中使用React.createClass方法创建一个组建类
- 核心代码：每个组件类必须实现自己的render方法 。输出定义好的组件模版。返回值：null、false、组件模板
- 注意：组件类只能包含一个顶层标签
var Demo = React.createlClass({
render:function{
return <h1>Hello Demo<h1>
}
});
React.render (
//插入<Demo />会自动生成一个实例
<Demo />,
document.getElementById("container")
);
- 组件样式
组件样式
内联样式
对象样式
选择器样式//选择使用他的时候一定要注意class要写成className,还有不能直接使用for,要使用HTMLFor
注意事项 在React和HTML5中设置样式时shi是有区别的
HTML5是以;结尾 而React以,结尾
HTML5中的KEY、value 都不加引号,React中属于JavaScript对象，key的名字不能出现“-”，需要使用驼峰命名法。如果value为字符串，需要加引号
HTML5中，value如果是数字的话，需要加单位，React不需要
复合组件：创建多个组件合成一个组件
props 组件
props 是组件自身的属性，一般用于嵌套的内外层组件中，负责传递信息（通常是由父层组件向子层组件传递）
注意：props对象中的属性与组件的属性是一一对应的。不要直接去修改props中属性的值this.props
props提供的语法糖，将父组件中的全部属性都复制给子组件this.props.children
children是一个例外，不是跟组件的属性对应的，表示组件的所有子节点
B1Y2S~(@C4E5CGY6_E~4EIX.png
Paste_Image.png
属性验证
propTypes
用于验证组件实例的属性是否符合要求
Paste_Image.png
- 事件绑定
Paste_Image.png
- state
也是与props是组件自身的属性
在一个对象中设置的属性，将会存储在state
- 组件的生命周期
Mounting:组件挂载，已插入真实 DOM
Paste_Image.png
Updating:组件更新，正在被重新渲染
Paste_Image.png
Unmounting:组件移出，已移出真实DOM
Paste_Image.png
Paste_Image.png
- 组件的生命周期fenwei4个阶段
创建、实例化、更新、销毁
- JSX语法的储备(JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。)。 网上有很多相关的知识了解。
- JSX 必须借助React环境运行
如：
React.render(
<div>
<div>
<div>content</div>
</div>
</div>,
document.getElementById('example')
);
- 在JSX中运行JavaScript代码
//使用｛｝括起来 ｛表达式｝
var demo = "这是一个demo"；
React.render (
<h1>{demo}</h1>
docunment.getElementById("container")
);
- ES6的知识储备
