diff --git a/docs/embedded-app.html b/docs/embedded-app.html index 7caa2c92164..93ab2eb9b55 100644 --- a/docs/embedded-app.html +++ b/docs/embedded-app.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Integration with Existing App

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 #

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 install CocoaPods yet, checkout 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' +React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Integration with Existing App

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 – brew install iojs && brew link iojs --force or from nvm
    • You may have to run brew unlink node if you have previously installed Node

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 install CocoaPods yet, checkout 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 9f177682f2a..9e783218464 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -1,4 +1,4 @@ -React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - This repo only contains the iOS (7+) implementation right now, and Xcode only runs on Mac.
  2. Xcode 6.3 or higher is recommended.
  3. Homebrew is the recommended way to install node, watchman, and flow.
  4. brew install node. New to node or npm?
  5. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  6. brew install flow. If you want to use flow.

Quick start #

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

In the newly created folder AwesomeProject/

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

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

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

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Getting Started

Requirements #

  1. OS X - This repo only contains the iOS (7+) implementation right now, and Xcode only runs on Mac.
  2. Xcode 6.3 or higher is recommended.
  3. Homebrew is the recommended way to install node, watchman, and flow.
  4. brew install iojs && brew link iojs --force. You may need to run brew unlink node if you have previously installed Node. New to io.js or npm?
  5. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
  6. brew install flow. If you want to use flow.

Quick start #

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

In the newly created folder AwesomeProject/

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

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

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

Next →
© 2015 Facebook Inc.
React Native

Quick Start

Guides

components

apis

Polyfills

Tutorial

Preface #

This tutorial aims to get you up to speed with writing iOS apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.

We assume you have experience writing websites with React. If not, you can learn about it on the React website.

Setup #

React Native requires OSX, Xcode, Homebrew, node (we recommend installing this via Homebrew), npm (installed automatically with node), and watchman. Flow is optional.

After installing these dependencies there are two simple commands to get a React Native project all set up for development.

  1. npm install -g react-native-cli

    react-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install react-nativeas a command in your terminal. You only ever need to do this once.

  2. react-native init AwesomeProject

    This command fetches the React Native source code and dependencies and then creates a new Xcode project in AwesomeProject/AwesomeProject.xcodeproj.

Development #

You can now open this new project (AwesomeProject/AwesomeProject.xcodeproj) in Xcode and simply build and run it with cmd+R. Doing so will also start a node server which enables live code reloading. With this you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.

For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

Hello World #

react-native init will copy Examples/SampleProject to whatever you named your project, in this case AwesomeProject. This is a simple hello world app. You can edit index.ios.js to make changes to the app and then press cmd+R in the simulator to see the changes.

Mocking data #

Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like. In index.ios.js:

var MOCKED_MOVIES_DATA = [ +React Native | A framework for building native apps using React
React Native

Quick Start

Guides

components

apis

Polyfills

Tutorial

Preface #

This tutorial aims to get you up to speed with writing iOS apps using React Native. If you're wondering what React Native is and why Facebook built it, this blog post explains that.

We assume you have experience writing websites with React. If not, you can learn about it on the React website.

Setup #

React Native requires OSX, Xcode, Homebrew, io.js (we recommend installing this via nvm or Homebrew), npm (installed automatically with io.js), and watchman. Flow is optional.

After installing these dependencies there are two simple commands to get a React Native project all set up for development.

  1. npm install -g react-native-cli

    react-native-cli is a command line interface that does the rest of the set up. It’s installable via npm. This will install react-nativeas a command in your terminal. You only ever need to do this once.

  2. react-native init AwesomeProject

    This command fetches the React Native source code and dependencies and then creates a new Xcode project in AwesomeProject/AwesomeProject.xcodeproj.

Development #

You can now open this new project (AwesomeProject/AwesomeProject.xcodeproj) in Xcode and simply build and run it with cmd+R. Doing so will also start a Node server which enables live code reloading. With this you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.

For this tutorial we'll be building a simple version of the Movies app that fetches 25 movies that are in theaters and displays them in a ListView.

Hello World #

react-native init will copy Examples/SampleProject to whatever you named your project, in this case AwesomeProject. This is a simple hello world app. You can edit index.ios.js to make changes to the app and then press cmd+R in the simulator to see the changes.

Mocking data #

Before we write the code to fetch actual Rotten Tomatoes data let's mock some data so we can get our hands dirty with React Native. At Facebook we typically declare constants at the top of JS files, just below the requires, but feel free to add the following constant wherever you like. In index.ios.js:

var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, ];

Render a movie #

We're going to render the title, year, and thumbnail for the movie. Since thumbnail is an Image component in React Native, add Image to the list of React requires below.

var { AppRegistry,