1，学习 React Native 的前期准备

React 与 React Native 之间的关系
简单来说前者用于WEB开发，后者用于移动端开发:

首先得先了解 ：React 可到菜鸟教程进行了解http://www.runoob.com/react/react-tutorial.html

1. React的学习储备(HTML，CSS， JavaScript)，可以到http://www.w3school.com.cn/ 进行学习。

• 配置React 的开发环境。
• 新建一个小工程

  
  
  //reacr.js是react的核心库
  //react-dom.js 的作用是提供dom的相关功能
  // boowser.min.js的作用是将JSX语法转换成Javascipt语法


  

  

• 创建组件的注意事项
• React中创建的组建类以大写字母开头，遵循驼峰命名法
• 在React中使用React.createClass方法创建一个组建类
• 核心代码：每个组件类必须实现自己的render方法 。输出定义好的组件模版。返回值：null、false、组件模板
• 注意：组件类只能包含一个顶层标签

var Demo = React.createlClass({
render:function{
return 
Hello Demo

}
});
React.render (
//插入会自动生成一个实例
,
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个阶段
  创建、实例化、更新、销毁

2. JSX语法的储备(JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。)。 网上有很多相关的知识了解。

• JSX 必须借助React环境运行
  如：

React.render(
    

        

            
content
        
    
,
    document.getElementById('example')
);

• 在JSX中运行JavaScript代码

//使用｛｝括起来   ｛表达式｝
var demo = "这是一个demo"；
React.render (
{demo}
docunment.getElementById("container")
);

3. ES6的知识储备