diff --git a/docs/tutorial.html b/docs/tutorial.html index 7a212fe7b71..96b190528db 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -1,4 +1,4 @@ -Tutorial – 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 and Android 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 applications with React. If not, you can learn about it on the React website.

Setup #

React Native requires the basic setup explained at React Native Getting Started.

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-native as 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/iOS/AwesomeProject.xcodeproj and a gradle project in AwesomeProject/android/app.

Development #

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

For Android, run react-native run-android from AwesomeProject to install the generated app on your emulator or device, and start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press Reload JS.

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 generate an app with the name of your project, in this case AwesomeProject. This is a simple hello world app. For iOS, you can edit index.ios.js to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit index.android.js to make changes to the app and press Reload JS from the rage shake menu 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 or index.android.js :

var MOCKED_MOVIES_DATA = [ +Tutorial – 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 and Android 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 applications with React. If not, you can learn about it on the React website.

Setup #

React Native requires the basic setup explained at React Native Getting Started.

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-native as 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/iOS/AwesomeProject.xcodeproj and a gradle project in AwesomeProject/android/app.

Development #

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

For Android, run react-native run-android from AwesomeProject to install the generated app on your emulator or device, and start the Node server which enables live code reloading. To see your changes you have to open the rage-shake-menu (either shake the device or press the menu button on devices, press F2 or Page Up for emulator, ⌘+M for Genymotion), and then press Reload JS.

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 generate an app with the name of your project, in this case AwesomeProject. This is a simple hello world app. For iOS, you can edit index.ios.js to make changes to the app and then press ⌘+R in the simulator to see the changes. For Android, you can edit index.android.js to make changes to the app and press Reload JS from the rage shake menu 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 or index.android.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,