RN学习（一）——创建第一个RN项目

    最近在研究RN+codePush。顺便记录一下，分享给想学习RN的小伙伴，让我们一起从入门到放弃~~~

安装RN到本地===在根目录下操作。

1. 先安装Homebrew（若已安装，可跳过）

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

image

2. 安装node和webpack

brew install node
brew install webpack

测试node和webpack是否安装成功，可用如下图所示来测。若本地安装，则会显示对应版本号。

image

3. 设置国内镜像（常年开VPN的小伙伴可忽略）

npm config set disturl https://npm.taobao.org/dist --global

image

这里出错了，按提示走就可以，复制sudo那一行更改目录权限，再设置国内镜像。

4. 安装RN：直接输入npm install -g react-native-cli。会因为权限不够而报错：npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules。所以我们直接输入下面两句话

sudo chown -R $(whoami) /usr/local/*
npm install -g yarn react-native-cli

测试安装成功否，react-native -v。

OK，RN现在就安装完毕了，目前应该都挺顺利的吧。咱们开始下一步。

创建RN项目到本地===可进入到桌面，cd ~/Desktop创建，或其它任一文件夹下

1. 创建RN项目

react-native init RNTest

RNTest为项目的名字，可替换。创建成功后，可看到如下图所示的文件目录。

image

2. 跑项目，看成果了~~先进RNTest（RN项目）里面，然后运行，如下。

cd RNTest
react-native run-ios

但是报错了，如下图所示，没运行起来。

image

若报错，去Xcode设置一下就行了（如下图，在Command Line Tools点一下，选择），或者直接从Xcode里面打开项目。

image

运行起来后，可在App.js里面修改，保存后，在模拟器直接Cmd+R就可以看到效果，这比iOS编译等半天简直好太多了（当然，iOS也可以用InjectionIII神器来实现reload）。如下。

image

好啦，第一个RN项就搭建完了，很简单，有木有。下一篇把集成codePuh的过程整理一下，分享出来。