Getting Started with React Native (Part 1)

This is the summary of what I have learned on getting started with React Native.

Basic

Here I am using Mac as a development OS.

Requirements to Setup React Native Environment (Mac)

Xcode (can be easily installed via AppStore), node.js, React Native Command Line Interface, Watchman

brew install node 
brew install watchman
npm install -g react-native-cli

Note: how to install Homebrew

Creating the First “HelloWorld” React Native App

react-native init HelloWorld 
cd HelloWorld 
react-native run-ios

To open the app in Xcode:

cd ios
open HelloWorld.xcodeproj
click on the run button

If everything goes well, you should see the emulator screen as below:

React Native App Directory Structure

List of files and folders in the App root folder

• index.ios.js: app entry file for iOS
• index.android.js: app entry file for Android
• ios: boilerplate code folder for iOS native app
• android: boilerplate code folder for Android native app
• node_modules: contains installed dependencies/libraries
• package.json: app meta-data file also contains list of dependencies

index.ios.js

Import: imports all necessary components/libraries/UI elements from different packages.

Class: contains render() function to render the output.

Style: defines CSS styles for UI components.

AppRegistry: defines the root component/entry point for the app.

Building a Simple App

This section will guide you step by step on how to build a simple React Native app which consists of some basic UI components and functions. In short, components are the building blocks for a React Native application.

Before We Start

Before starting to build a mobile app, it is important to understand the design guidelines for different mobile platforms such as iOS and Android. You can read those guidelines via the following links:

iOS Human Interface Guidelines

Design | Android Developers

IDEs

There are a couple of popular free and open source IDEs for React Native at the moment: Atom with Nuclide and Deco. Each has its own great features so you may try to use both of them and choose the one that is suitable for you.

Since I’m more familiar with Atom+Nuclide, I will be using this IDE in this tutorial. Please refer to the setup instruction of Nuclide for Mac here.

Once you have done with the installation, you should be able to open your React Native project with Atom either via GUI or simply using the command line (e.g. atom HelloWorld).

Screenshot of HelloWorld project opened with Atom

You may also want to install some additional Atom packages for React Native such as react-native-snippets and atom-react-native-autocomplete just to help you easily get started with writing the code.

Getting Started with React Native (Part 2)