React NativeGetting StartedRunning On Device

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Getting Started

Requirements 

1. OS X - This guide assumes OS X which is needed for iOS development.
2. Homebrew is the recommended way to install Watchman and Flow.
3. Install Node.js 4.0 or newer.
   • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
   • If you are using Node 5.0 or newer, we recommend installing npm 2, which is much faster than npm 3. After installing Node, run npm install -g npm@2.
   • New to npm?
4. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
5. brew install flow, if you want to use flow.

We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.

iOS Setup 

Xcode 7.0 or higher is required. It can be installed from the App Store.

Android Setup 

To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.

NOTE: There is experimental Windows and Linux support for Android development.

Quick start 

$ npm install -g react-native-cli $ react-native init AwesomeProject

To run the iOS app:

• $ cd AwesomeProject
• Open ios/AwesomeProject.xcodeproj and hit run in Xcode.
• Open index.ios.js in your text editor of choice and edit some lines.
• Hit ⌘-R in your iOS simulator to reload the app and see your change!

To run the Android app:

• $ cd AwesomeProject
• $ react-native run-android
• Open index.android.js in your text editor of choice and edit some lines.
• Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
• Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logs

Note: If you are using a device, see the Running on Device page.

Congratulations! You've successfully run and modified your first React Native app.

If you run into any issues getting started, see the troubleshooting page.

Adding Android to an existing React Native project 

If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:

1. Update the react-native dependency in your package.json file to the latest version
2. $ npm install
3. $ react-native android

Running On Device

Note that running on device requires Apple Developer account and provisioning your iPhone. This guide covers only React Native specific topic.

Accessing development server from device 

You can iterate quickly on device using development server. To do that, your laptop and your phone have to be on the same wifi network.

1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
2. Change the IP in the URL from localhost to your laptop's IP. On Mac, you can find the IP address in System Preferences / Network.
3. In Xcode select your phone as build target and press "Build and run"

Hint

Shake the device to open development menu (reload, debug, etc.)

Using offline bundle 

You can also pack all the JavaScript code within the app itself. This way you can test it without development server running and submit the app to the AppStore.

1. Open AwesomeApp/ios/AwesomeApp/AppDelegate.m
2. Follow the instructions for "OPTION 2":
   • Uncomment jsCodeLocation = [[NSBundle mainBundle] ...
   • Run the react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output iOS/main.jsbundle command in terminal from the root directory of your app

The bundle script supports a couple of flags:

• --dev - a boolean with a default value of true. With the --dev true flag, the bundled JavaScript code turns on useful development warnings and limits performance optimizations. For production it is recommended to pass --dev false. Also for production, be sure to have your native build configuration set to Release (e.g., Xcode's Release configuration for iOS and gradle's assembleRelease task for Android) in order to disable things like the shake-to-show developer menu.
• --minify - pipe the JS code through UglifyJS.

Note that on 0.14 we'll change the API of react-native bundle. The major changes are: 

• API is now entry-file <path> based instead of url based.
• Need to specify which platform you're bundling for --platform <ios|android>.
• Option --out has been renamed for --bundle-output.
• Source maps are no longer automatically generated. Need to specify --sourcemap-output <path>

Disabling in-app developer menu 

When building your app for production, your app's scheme should be set to Release as detailed in the debugging documentation in order to disable the in-app developer menu.

Troubleshooting 

If curl command fails make sure the packager is running. Also try adding --ipv4 flag to the end of it.

If you started your project a while ago, main.jsbundle might not be included into Xcode project. To add it, right click on your project directory and click "Add Files to ..." - choose the main.jsbundle file that you generated.

 

Ref:http://facebook.github.io/react-native/

Ref:React Native Tutorial: Building Apps with JavaScript

Ref:深入浅出 React Native：使用 JavaScript 构建原生应用

Ref:http://ryanclark.me/going-native-with-react

Ref:http://ryanclark.me/getting-started-with-react

Ref:http://facebook.github.io/flux/

Ref:What is the Flux Application Architecture?

Ref:Flux 架构入门教程

Ref:Flux应用架构

Ref:谈一谈我对 React Flux 架构的理解

Ref:http://redux.js.org

Ref:Redux 介绍

Ref:https://github.com/xgrommx/awesome-redux

Ref:InfoQ-Search-React