F8App-ReactNative项目源码分析1-初体验

近期开始研究Facebook f8app项目，目标是理解Facebook官方React Native f8app的整体技术架构，给公司目前几个的React Native项目开发提供官方经验借鉴，并对原生开发和React Native开发进行框架层面的融合。
我目前的技术情况是熟悉Android，Swift iOS，Node.js，MongoDB和JavaScript移动端开发，了解Objective C,React.js和React Native,但缺少实际开发经验，对Parse，GraphQL只是听说过。所以只能一步一步折腾了。本文将介绍f8app的实际上手经验，如何把f8app在Mac上run起来。

首先是阅读秋百万的构建 F8 App / React Native 开发指南 对项目有个整体了解。
然后到git上clone代码按说明运行起来，这一步遇到了坑，原因是官方的安装过程有错误，少了react-native start这个命令。

iOS启动后会报错，运行 react-native start就可以了

2016-05-17 11:34:12.357 [fatal][tid:main] Cannot find entry file index.ios.js in any of the roots: ["/Users/zhangxitao/work/github/f8app"]


项目依赖 Requirements

1. React Native (follow iOS and Android guides)
   
   • Xcode 7.3 +
2. CocoaPods (only for iOS)
   
   • Version 1.0+ recommended (gem install cocoapods --pre)
3. MongoDB (needed to run Parse Server locally)

修改后的安装过程

1. Clone the repo

   $ git clone https://github.com/fbsamples/f8app.git
   $ cd f8app

2. Install dependencies (npm v3+):

   $ npm install
   $ (cd ios; pod install)        # only for iOS version

3. Make sure MongoDB is running:
   先下载mongodb或直接通过brew install mongodb 命令安装。Mongodb不熟悉的需要先学习下mongodb的常用命令，和mysql有些类似。

   $ lsof -iTCP:27017 -sTCP:LISTEN
   $  mongod   --dbpath  YOURDATAPATH/mongodata/ &  #启动mongodb

   NOTE: if installed with Homebrew run brew info mongo and
   check out the Caveats section.

   If you prefer to use an external MongoDB server, set DATABASE_URI:

   $ export DATABASE_URI=mongodb://example-mongo-hosting.com:1337/my-awesome-database

4. Start Parse/GraphQL servers:

   $ npm start
   $ react-native start
   

5. Import sample data (the local Parse Server should be running): 并验证一下数据是否导入正确。

   $ npm run import-data
   $ mongo
   MongoDB shell version: 2.6.5
   connecting to: test
   >
   > show databases
   admin  (empty)
   dev    0.078GB
   local  0.078GB
   > use dev
   switched to db dev
   > show collections
   Agenda
   FAQ
   Maps
   Notification
   Page
   Speakers
   Survey
   _Installation
   _SCHEMA
   system.indexes
   > db.FAQ.find()
   
   #会查到很多数据
   

   Make sure everything works by visiting:

   • Parse Dashboard: http://localhost:8080/dashboard
   • Graph*i*QL: http://localhost:8080/graphql

6. Running on Android:

   $ react-native run-android
   $ adb reverse tcp:8081 tcp:8081   # required to ensure the Android app can
   $ adb reverse tcp:8080 tcp:8080   # access the Packager and GraphQL server

7. Running on iOS:

   $ react-native run-ios

实际运行效果

这样安卓和iOS模拟器应该都跑起来了。实际效果如下：

下篇文章开始分析f8app的服务器端结构。

本文独立博客地址