Hello World

To initiate a new React Native project you need to run: react-native init <ProjectName>. react-native init generates the following:

• index.ios.js

• index.android.js

• iOS (Xcode) project

• Android projects

For this workshop, we have already done react-native-init for you and setup a skeleton project. To get started:

$ git clone https://github.com/rangle/react-native-workshop.git
$ cd react-native-workshop
$ npm install
$ git checkout 1-hello-world

Each section of the workshop is available in a separate git branch, so 1-hello-world is the first one. Let's open the project in a text editor to go through the generated code.

Bootstrapping

In order to bootstrap a React Native app we use AppRegistry instead of ReactDOM, for example:

import { AppRegistry, View, Text } from 'react-native';
import React, { Component } from 'react';

class Root extends Component {
  ...
}

AppRegistry.registerComponent('ApplicationName', () => Root);

Run the App

• iOS

  $ react-native run-ios

  or Open `/Users/<userName>/reactNativeWorkshop/ios/reactNativeWorkshop.xcodeproj in Xcode

• Android

  $ react-native run-android

You should see something like this:

hello world