diff --git a/docs/embedded-app-ios.html b/docs/embedded-app-ios.html index 4ed99fdaab4..8059ed216e0 100644 --- a/docs/embedded-app-ios.html +++ b/docs/embedded-app-ios.html @@ -1,4 +1,4 @@ -Integrating with Existing Apps (iOS) – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Integrating with Existing Apps (iOS)

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • io.js
    • Install nvm with its setup instructions here. Then run nvm install iojs-v2 && nvm alias default iojs-v2, which installs the latest compatible version of io.js and sets up your terminal so that typing node runs io.js. With nvm you can install multiple versions of Node and io.js and easily switch between them.

Install React Native Using CocoaPods #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.

pod 'React' +Integrating with Existing Apps (iOS) – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Integrating with Existing Apps (iOS)

Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. In fact, it integrates with other best practice community tools like CocoaPods.

Requirements #

  • CocoaPods – gem install cocoapods
  • Node.js
    • 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.

Install React Native Using CocoaPods #

CocoaPods is a package management tool for iOS/Mac development. We need to use it to download React Native. If you haven't installed CocoaPods yet, check out this tutorial.

When you are ready to work with CocoaPods, add the following line to Podfile. If you don't have one, then create it under the root directory of your project.

pod 'React' pod 'React/RCTText' # Add any subspecs you want to use in your project

Remember to install all subspecs you need. The <Text> element cannot be used without pod 'React/RCTText'.

Then install your pods:

$ pod install

Create Your React Native App #

There are two pieces you’ll need to set up:

  1. The root JavaScript file that will contain your actual React Native app and other components
  2. Wrapper Objective-C code that will load up your script and create a RCTRootView to display and manage your React Native components

First, create a directory for your app’s React code and create a simple index.ios.js file:

$ mkdir ReactComponent $ touch ReactComponent/index.ios.js

Copy & paste following starter code for index.ios.js – it’s a barebones React Native app:

'use strict'; diff --git a/docs/getting-started.html b/docs/getting-started.html index 81dc558f45b..091961f0f7f 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -Getting Started – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - Only OS X is currently supported
  2. Homebrew is the recommended way to install io.js, watchman, and flow.
  3. Install io.js 1.0 or newer. io.js is the modern version of Node.
    • Install nvm with its setup instructions here. Then run nvm install iojs-v2 && nvm alias default iojs-v2, which installs the latest compatible version of io.js and sets up your terminal so that typing node runs io.js. With nvm you can install multiple versions of Node and io.js and easily switch between them.
    • 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 6.3 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.

Quick start #

$ npm install -g react-native-cli +Getting Started – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - Only OS X is currently supported
  2. Homebrew is the recommended way to install nvm, watchman, and flow.
  3. Install Node.js 4.0 or newer.
    • Install nvm with Homebrew or 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.
    • 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 6.3 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.

Quick start #

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

To run the iOS app:

  • 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:

  • $ 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

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
Next →
© 2015 Facebook Inc.