React Native入门笔记

react native最近很火啊，所以学习了一下下，搭建开发环境就不在这里一一描述了，http://reactnative.cn/docs/0.46/getting-started.html#content这里都有，按要求一步一步来就可以搭建好开发环境了，搭建好环境以后就可以测试了,这里使用webstorm作为开发工具，以下都是我自己的见解，如有不足之处请多多指教。

1.创建一个react native项目，进入命令行执行：

react-native init  你的项目名，等其执行完，一个react native项目就创建完成了，不过这里面的坑还是挺多的，后面使用 npm install去添加依赖库时，会删除原来的node-modules里面的东西，导致项目无法运行起来，因此，

我采用，使用react-native init 创建项目后，进入根目录，手动删除node-modules文件夹，执行 npm install重新安装node-modules，这时就可以添加依赖了。

2.一个Component就是一个组件

代码中import、from、class、extends、以及() =>箭头函数等新语法都是ES2015中的特性。可以去这里了解学习 http://es6.ruanyifeng.com/,示例中的这一行<Text>Hello world!</Text>恐怕很多人看起来也觉得陌生。这叫做JSX——是一种在JavaScript中嵌入XML结构的语法。很多传统的应用框架会设计自有的模板语法，让你在结构标记中嵌入代码。React反其道而行之，设计的JSX语法却是让你在代码中嵌入结构标记。初看起来，这种写法很像web上的HTML，只不过使用的并不是web上常见的标签如<div>或是<span>等，这里我们使用的是React Native的组件。上面的示例代码中，使用的是内置的<Text>组件，它专门用来显示文本。

import React, { Component } from 'react';import { AppRegistry, Text } from 'react-native';class HelloWorldApp extends Component {  render() {    return (      <Text>Hello world!</Text>    );  }}// 注意，这里用引号括起来的'HelloWorldApp'必须和你init创建的项目名一致//AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。 AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);3.介绍一下react native项目结构，使用webstorm打开项目，目录结构如下，A.里面有IOS和Android两个目录，分别对应Ios项目和Android项目，
B.node-modules
里面包含了支持react native运行的jsServer和，
react native所依赖的运行库，可以通过npm installt
添加自己写的库或者网上的开源框架;
C.package.json,这是配置文件，里面是你在创建项目时的基本信息，如react native的版本，
scripts脚本信息，dependencies，devDependencies是依赖的开发库和框架，相当于Android的manifest文件。D.android.index.js和ios.index.js,是两个平台的入口文件，执行react-native run-android/ios时，各个平台会先加载这两个文件展示到前台界面
{
    "name": "BihuReactNative",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "navbar-native": "^1.6.1",
        "react": "16.0.0-alpha.12",
        "react-native": "0.46.3",
        "react-navigation": "^1.0.0-beta.11"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.12"
    },
    "jest": {
        "preset": "react-native"
    }
}