RN入门教程

项目

React Native是基于React发展而来的，一种新的跨平台方案。最开始

入门网站：
React Native中文网
React Native官网

环境搭建

• 安装nodejs
  
  • nvm 安装向导——https://github.com/creationix/nvm#installation
  • npm 文档：https://docs.npmjs.com
• watchman：一个观察程序，当代码发生变化，这个程序会完成一些相关的重建的工作
• react-native-cli：执行npm install -g react-native-cli

推荐开发工具：Sublime text

1 入门基础

React的JSX语法、组件创建、flex布局规则、react生命周期。
新手指导入门教程
新手引导

1.1 JSX语法

JSX是JS的超集，对JS进行扩充，一个看起来很像 XML 的 JS 语法扩展。能够定义简洁且我们熟知的包含属性的树状结构语法。XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。

1.2 组件创建

组件状态、属性

1.3 flex布局规则

flex布局教程

1.4 react组件的详细说明和生命周期

• 组件的详细说明
  
  • render：必须，React方法，渲染界面。
  • getInitialState：在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。
  • getDefaultProps
  • propTypes：对象允许验证传入到组件的 props。
  • mixins：数组允许使用混合来在多个组件之间共享行为。
  • statics： 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。
• 生命周期方法
  
  • componentWillMount：服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。
  • componentDidMount：在初始化渲染执行之后立刻调用一次。
  • componentWillReceiveProps：在组件接收到新的 props 的时候调用。
  • shouldComponentUpdate：在接收到新的 props 或者 state，将要渲染之前调用。
  • componentWillUpdate：在接收到新的 props 或者 state 之前立刻调用。
  • componentDidUpdate：在组件的更新已经同步到 DOM 中之后立刻被调用。
  • componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。

DOM树：界面元素组成的树

2 Redux框架使用入门

Redux的作用，分离业务逻辑代码和界面代码，保证数据的单向流动，同时便于控制、使用、测试。

简单例子

// 首先定义一个改变数据的函数，成为reducer
function count (state, action) {
    var defaultState = {
        year: 2015,
      };
    state = state || defaultState;
    switch (action.type) {
        case 'add':
            return {
                year: state.year + 1
            };
        case 'sub':
            return {
                year: state.year - 1
            }
        default :
            return state;
    }
}
// store的创建
var createStore = require('redux').createStore;
var store = createStore(count);
// store里面的数据发生改变时，触发的回调函数
store.subscribe(function () {
      console.log('the year is: ', store.getState().year);
});
// action: 触发state改变的唯一方法(按照redux的设计思路)
var action1 = { type: 'add' };
var action2 = { type: 'add' };
var action3 = { type: 'sub' };
// 改变store里面的方法
store.dispatch(action1); // 'the year is: 2016
store.dispatch(action2); // 'the year is: 2017
store.dispatch(action3); // 'the year is: 2016

参考：
redux 和 react 的关系
参考二

3