React Native在Mac下环境搭建

开始了React Native在Mac下环境搭建。

其中要学的东西不少，网上关于React Native的介绍很多，这里不多说。

开始了React Native环境搭建。

• Html+CSS+JavaScript

• Node.js。API文档：https://nodejs.org/dist/v4.2.2/docs/api/

• JSX: JavaScript语法的一个扩展，类似XML结构。https://facebook.github.io/react/docs/jsx-in-depth.html

• FLUX: Facebook公司的一个创建用户客户端web程序的框架。https://facebook.github.io/flux/docs/overview.html

React Native Mac环境的搭建

facebook官方的教程网站地址

http://facebook.github.io/react-native/docs/getting-started.html

1.安装Homebrew Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件

打开终端，执行命令

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

等待安装完成后

Homebrew.png

查看是否安装成功 brew -v

brew -v.png

2.安装Node.js （服务端的JavaScript运行环境）

(1)下载地址：https://nodejs.org/download/

安装成功后,npm也有了。

nodejs.png

(2)或者使用Homebrew安装Node.js

执行命令：brew install node

安装完node后建议设置npm镜像加速后面过程

npm config set registry https://registry.npm.taobao.org --global

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

3.安装React Native 命令行工具

React Native 命令行工具可以创建和初始化React Native的项目，还有其他打包等功能

终端命令 ：npm install -g react-native-cli

命令行.png

4. 安装WatchMan

Watchman是由Facebook提供的监视文件系统变更的工具。

终端命令：
brew install watchman

WatchMan.png

5. 安装Flow

Flow是一个静态的JS类型检查工具

终端命令：brew install flow

Flow.png

7.官方推荐IDE https://nuclide.io/

Atom 下载很慢啊。。。等待中。。

• 下载解压安装，

• 点击菜单栏：Atom->Preferences,或者快捷键”Command+,”

• 然后，在Install Packets的输入框中，输入nuclide，选择出现的第一个，点击install

• 最后重启Atom。

创建项目

1.新建项目

让我们来个“hello world”

react-native init HelloWorld

执行命令

helloworld.png

让我们来看下我们的helloworld工程

创建的项目包含Andriod和iOS两个版本

helloword_project.png

2.如果你直接用xcode打开.xcodeproj运行，你看到的将是这个

其间终端会运行，过程很慢啊。

React-Native服务在要一直开着

终端服务.png

如果不小心关闭，执行终端命令

npm start

运行完才能看到效果:

运行结果.png