diff --git a/docs/tutorial.html b/docs/tutorial.html index 64aaf972d07..5b53c8d064c 100644 --- a/docs/tutorial.html +++ b/docs/tutorial.html @@ -1,4 +1,4 @@ -React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Tutorial

Preface #

This is a tutorial that aims to get you up to speed with writing iOS apps using React Native. If you want to learn what React Native is and why Facebook built it, check out this blog post: [INSERT BLOG POST URL].

We assume you have experience writing websites with ReactJS. If not, you can learn about ReactJS here.

Setup #

React Native has a few requirements which you can find on the github page (specifically OSX, Xcode, Homebrew, node, npm, watchman, and (optionally) flow)

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 also an npm module so you can get it very easily. This will install react-native-cli so you can run it as a command in your terminal. You only need to do this once ever.

  2. react-native init AwesomeProject

    This command fetches the React Native source code, installs all of the other npm modules that it depends on, and 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 start a node server which enables live code reloading by packaging and serving the latest JS bundle to the simulator at runtime. From here out you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.

For this tutorial let’s build 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 your changes.

Mocking data #

Before we write the code to fetch actual Rotten Tomatoes data, let's mock some data so we can get started with rendering some views right away. 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:

var MOCKED_MOVIES_DATA = [ +React Native | Build Native Apps Using React
React Native

Quick Start

Guides

components

apis

Polyfills

Tutorial

Preface #

This is a tutorial that aims to get you up to speed with writing iOS apps using React Native. If you want to learn what React Native is and why Facebook built it, check out this blog post: [INSERT BLOG POST URL].

We assume you have experience writing websites with React. If not, you can learn about React here.

Setup #

React Native has a few requirements which you can find on the github page (specifically OSX, Xcode, Homebrew, node, npm, watchman, and (optionally) flow)

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 also an npm module so you can get it very easily. This will install react-native-cli so you can run it as a command in your terminal. You only need to do this once ever.

  2. react-native init AwesomeProject

    This command fetches the React Native source code, installs all of the other npm modules that it depends on, and 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 start a node server which enables live code reloading by packaging and serving the latest JS bundle to the simulator at runtime. From here out you can see your changes by pressing cmd+R in the simulator rather than recompiling in Xcode.

For this tutorial let’s build 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 your changes.

Mocking data #

Before we write the code to fetch actual Rotten Tomatoes data, let's mock some data so we can get started with rendering some views right away. 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:

var MOCKED_MOVIES_DATA = [ {title: 'Title', year: '2015', posters: {thumbnail: 'http://resizing.flixster.com/yDGJbDZ4tOk8Wsfl2Ljt1JYgHpk=/53x81/dkpu1ddg7pbsk.cloudfront.net/movie/11/18/90/11189059_ori.jpg'}}, ];

Render a movie #

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

var { AppRegistry,