Getting Started

Introduction

In a simple language, ReactNative allows us to build mobile applications that look, feel, and perform much more like native apps. It uses the same fundamental UI building blocks as used by regular iOS and Android apps. We just put those building blocks together using JavaScript and React. The best thing is that we use the similar concepts that we use while developing web applications.

We write the 'hello world' program whenever we learn any new programming language. Similarly, the first app that you will develop while learning React Native is the 'Hello World' App.

Pre-requisites: Setting Up the Development Environment

To dive deeply into the ReactNative's ecosystem, we need to install a few things first to get started. Let us go through each of them one by one.

Node JS

React Native uses NodeJs, a JavaScript runtime, to build our Javascript code. If you don't have Nodejs installed already, you can get it from its official website.

Link: https://nodejs.org/

Node Package Manager

npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command-line client, also called npm, with which developers can download all npm software packages that contain in the npm software registry. When we download Node.js, we automatically get npm installed on our computer.

CLI

There are two ways to develop your first mobile app in ReactNative. You can do it with the help of either:

  1. The Expo CLI
  2. ReactNative CLI.

The primary use of both the CLI is to scaffold a starter project containing everything we need to build and run a ReactNative App. We will install one of the CLI with the help of the Node Package Manager. The Package Manager will install this CLI tool as a global module.

  • The first way to develop a starter ReactNative App is with the help of Expo CLI. Expo is a set of tools built around React Native. If you are new to mobile development, I would highly recommend you to use it as it can get you started within minutes.

  • The second is through ReactNative CLI. It is best to install ReactNative CLI when we want to use native code in our app. It does not require the expo library. However, it makes things a little complex for code Newbies.

For simplicity, I will use Expo CLI in this tutorial as it is easy and as simple as writing the hello world program.

Start a React Native Project

Download expo cli using node package manager:

npm install -g expo-cli

To create a new app, we will use the expo init command that will set up a new ReactNative app called HelloWorld.

expo init HelloWorld

Select the blank template, as clean as an empty canvas template as shown in the image below-

Expo Blank Template

cd HelloWorld

Let's look at the file structure and understand each file and folder one by one.

File Structure

Alt text

App.js

The first file in any react native app that is the entry point of the app development process. Whatever you write inside this file, it will get displayed on mobile devices.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Link to private gist

package.json

The first file in any react native app that is the entry point of the app development process. Whatever you write inside this file, it will get displayed on mobile devices.

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"@babel/core": "~7.9.0"
},
"private": true
}
Link to private gist

gitignore

gitignore file is a file that can be any file or a folder that contains all the files that we want to ignore. The developers ignore files that are not necessary to execute the project.

node_modules/**/*
.expo/*
npm-debug.*
*.jks
*.p8
*.p12
*.key
*.mobileprovision
*.orig.*
web-build/
# macOS
.DS_Store
Link to private gist

node_modules/

It is a folder that contains all the dependencies/ packages used to develop and run our mobile application.

ios/

It is for containing an Xcode project and the code required to bootstrap the app for ios devices\n\nSince we are using expo-cli, the folder may not be seen explicitly in our starter project.

android/

It is for containing the android related code to bootstrap the app for android devices.\n\nSince we are using expo, the folder may not be seen explicitly in our starter project.

App Registory

AppRegistory is the Js entry point to run a React Native Application. App Component or any other root component in the app should register by using App Registry.registerComponent such that the native system can load the bundle of the app and run the app by starting the AppRegistory.runApplication method.

Run The App

Run the below command in the terminal-

npm start

The command will start the development server at- link: exp://127.0.0.1

Clicking on the link, Metro Bundler will open in the browser.

We will also need to install the Expo app on the ios and Android phone to test our mobile app. After installing from AppStore and Google Play store, connect it with the same wireless network.

Open the app and Scan the QR Code that appears in the Metro Bundler to test the app.

Screenshot

Alt text

Simply, change the text in the app.js file to HelloWorld to get the desired result.

Edit this page