My Document

React Native

Beginner User Guide

Created by

Morinne Kearns

Exploreum Enterprises

Beginner User Guide

2021.1

July 2021

Adapted from the React Native online documentation

Morinne Kearns

Exploreum Enterprises

First printing July 2021

React and React Native are registered trademarks of Facebook, Inc. JavaScript is a

registered trademark of Oracle Corporation.

No part of this publication may be reproduced, transmitted, transcribed, stored in a

retrieval system, or translated into any language or computer language, in any form or by

any means, electronic mechanical, magnetic, optical, chemical, manual, or otherwise,

without the prior written permission of Exploreum Enterprises.

ii React Native Beginner User Guide

Table of Contents

Chapter 1 - Overview 1

1.1 What is React Native? 1

1.2 What do you need to know to use React Native? 1

1.3 Who is this user guide for? 1

1.4 What is covered in this user guide? 2

Chapter 2 - Installing the Development Environment 3

2.1 Computer Installation 3

2.1.1 Install Node.js 3

2.1.2 Install Expo CLI 8

2.2 Phone Installation (either iOS or Android) 10

2.2.1 Install Expo Go Client app 10

2.2.2 Connect to the same wireless network as your computer 11

Chapter 3 - Create Your First App 13

3.1 Upload your first app 13

3.2 View your app on your phone 18

Chapter 4 - Modify Your App 23

4.1 Find and Open your App.js file 23

4.1 Modify your App.js file 26

Appendix A: Useful Links A

React Native Documentation A

Mozilla JavaScript Tutorials A

React JavaScript Library A

Node.js A

Expo A

Command Prompt: What It Is and How to Use It A

Appendix B: Troubleshooting C

React Native Setup Troubleshooting Guide C

Glossary E

Index G

iii

iv React Native Beginner User Guide

Chapter 1 - Overview

1.1 What is React Native?

React Native is an open-source framework for writing mobile apps using JavaScript. It

combines React, a JavaScript library for building user interfaces, with the native cap-

abilities of Android or iOS app platforms. It eliminates the need to know Kotlin or Java for

Android development or Swift or Objective-C for iOS. React Native allows you to create

the same user view as the native language without needing to know the native language.

1.2 What do you need to know to use React Native?

To be able to create apps using React Native, you need to be familiar with

React - A JavaScript library for building user interfaces. When you are ready to start

developing your own apps, you should be familiar with the following React concepts:

Concept Description

Components

Independent, reusable bits of code that

return HTML elements

JSX

JavaScript XML that allows you to write

HTML in React

Props

Properties that let you customize React

components

State

An object that stores property values for

components that will change over time

JavaScript - A scripting language that allows you to create dynamic content

How to install various programs onto your computer

1.3 Who is this user guide for?

This user guide is designed for someone new to React Native and mobile app devel-

opment. A basic understanding of JavaScript and React is helpful but not required. (See

"Useful Links" on page A to learn more.) If you have already done some app development

and have a development environment set up, you can find directions for working with

React Native at https://reactnative.dev/docs/environment-setup.

Knowledge of React concepts and JavaScript is not required to follow this user guide.

Chapter 1 - Overview 1

1.4 What is covered in this user guide?

This user guide will help you install a development environment for React Native and build

and modify a basic "Hello World" app that you can view on your phone.

2 React Native Beginner User Guide

Chapter 2 - Installing the Development

Environment

2.1 Computer Installation

You will need to install two programs on your computer

and one app on your phone in

order to build and test your app. On your computer, you will install Node.js, an open-

source server environment that allows you to run and test JavaScript programs outside of

a web browser, and Expo CLI, a command line app that allows you to create new projects,

run the project server, view logs, and open your app in a simulator.

If you run into any difficulties installing these programs, a link to troubleshooting help can

be found in "Troubleshooting" on page C.

2.1.1 Install Node.js

1. Visit https://nodejs.org/en/download/. Choose the appropriate version for your oper-

ating system (Windows, macOS, or Linux/32- or 64-bit).

All images in this tutorial are for Windows installation. The process for other operating

systems will be similar but will look different.

Links to detailed information about each program can be found in "Useful Links" on

page A

Chapter 2 - Installing the Development Environment 3

2. Once it has finished downloading onto your computer, open the file. The Node.js

Setup Wizard will begin. Click “Next.”

3. Read through the End-User License Agreement, check “I accept the terms in the

License Agreement,” and click “Next.”

4 React Native Beginner User Guide

4. Choose the location to store the file. Click “next” to install.

5. Select the features you would like to install. Since we will only be using core features

for this tutorial, simply click “Next” to install the core version.

Chapter 2 - Installing the Development Environment 5

6. The next screen will allow tools to compile from C/C++. This is not necessary for this

tutorial, so simply click “Next.” Alternatively, if you know you will need this in the

future, you can click the option button then click next.

7. Click “Install” to complete installation. Depending on your system setup, you may

need to approve the installation on a separate pop-up screen.

6 React Native Beginner User Guide

8. The installation status screen will appear.

9. When Node.js the Node.js Setup Wizard is complete, you will see this screen. Click

“Finish” to complete the installation.

Chapter 2 - Installing the Development Environment 7

2.1.2 Install Expo CLI

1. To install Expo CLI, you need to open a Command Prompt

. On Windows, press the

Windows (ÿ) + R buttons together to open the "Run" box:

2. Type "cmd" and hit "Enter" or click "OK" to open the Command Prompt.

3. The following window will open:

Those new to using command prompts can find a basic introduction in Appendix A, "Com-

mand Prompt: What It Is and How to Use It" on page A

8 React Native Beginner User Guide

4. To install Expo CLI, type "npm install -g expo-cli" on the command line and

press "Enter."

(npm stands for node package manager. This is how you use Node.js!)

5. Your computer will begin installing Expo CLI:

6. When it is complete, you will see the following:

CONGRATULATIONS! You're now ready to start your first app! But first you need to

set up your phone so you can see your app in action.

Chapter 2 - Installing the Development Environment 9

2.2 Phone Installation (either iOS or Android)

2.2.1 Install Expo Go Client app

1. Go to the app store on your phone to download the Expo Go app. On iPhones, the

app is called Expo Go and is found in the App Store:

OnAndroid phones, it is called Expo and is found in the Google Play Store:

10 React Native Beginner User Guide

2.2.2 Connect to the same wireless network as your computer

In order for Node.js to be able to link to Expo Go, you need to be sure the computer run-

ning Node.js and the phone running Expo Go are both using the same wireless network.

If you don't know how to check your Wi-Fi network, see the following websites:

iPhone

Android phones

Computer with Windows Operating System

Mac Computer

Chapter 2 - Installing the Development Environment 11

12 React Native Beginner User Guide

Chapter 3 - Create Your First App

3.1 Upload your first app

Your first app is a simple one-line display that says, "Open up App.js to start working on

your app!" It is the standard JavaScript file that is created when you create a project with

Expo CLI. We will learn how to find and modify it in the next chapter. First, you need to cre-

ate your project files.

1. Go back to your computer and the Command Prompt Window. If you had previously

closed this window, reopen it following steps 1 and 2 from Chapter 2, Section "2.1.2

Install Expo CLI" on page 8.

2. To initialize your new project, type "expo init HelloWorld" and hit "Enter." Note where

you are creating this project. In this example, my project will be saved in a folder

called "HelloWorld" on the C: drive inside other folders that can be found following

the path Users > mojok. Make sure you know where your project is being created

because you'll need to find and open it later.

3. You will see the following, where you are given a few options for templates. For this

project, we will use the blank template at the top, so simply hit "Enter." (You can

have fun exploring the other options in the future.)

Chapter 3 - Create Your First App 13

4. Your computer will run through many bleeps and bloops as it creates your project.

When it is done, you will see the following:

5. To start our project using Expo and see it on our phone, we need to go into the dir-

ectory for the HelloWorld project. To do that type: cd HelloWorld

14 React Native Beginner User Guide

6. Your command line directory should now end with "/HelloWorld"

7. Now it's time to start expo by typing in "npm start" and hitting Enter.

Chapter 3 - Create Your First App 15

8. Two things will happen after you hit enter:

The Command Prompt window will start Expo, open developer tools in your

browser, and create a QR code that you will need to open the project on your phone.

It will also give you a menu of options.

Notice the QR code below? You'll use that to view the app on your phone in the next

section.

16 React Native Beginner User Guide

Next, a window will open on your browser with developer tools for Expo Go. Your

app QR code is also displayed here (bottom left corner).

Your app is now ready to be viewed on your phone!

Chapter 3 - Create Your First App 17

3.2 View your app on your phone

1. Opening your app on your phone is as easy as taking a picture!

On iPhones open your camera app and line up the QR code in the center of your

screen, as if you're going to take a picture of it. (But don't take a picture!) On Android

phones, open the Expo app for the QR scanner.

18 React Native Beginner User Guide

2. Once the image is picked up by your camera or Expo app, a notification will pop up

asking if you want to open Expo Go. Tap that notification.

Chapter 3 - Create Your First App 19

3. A pop-up will ask if you want to open the Expo Go app. Tap "Open."

20 React Native Beginner User Guide

4. Expo Go will open and run your app. (Give it a minute or two to load.) The basic app

that is included when you set up the project, named App.js, will display the following:

Congratulations! You just ran your first app! It is a very basic template. Next, we'll

open up and modify that JavaScript file.

Chapter 3 - Create Your First App 21

22 React Native Beginner User Guide

Chapter 4 - Modify Your App

As is the ancient custom of our programming ancestors, we will start with the "Hello,

world!" program by modifying the template JavaScript app file. First, you need to locate

the file on your computer.

4.1 Find and Open your App.js file

1. Now it's time to open and modify your App.js file. You can use any text editor of your

choice, such as Notepad on Windows or TextEdit on Mac. Open your text editor,

then open your App.js file in the text editing software.

Hopefully, you noted the location where you created your HelloWorld project. Here

is my project path in the Command Prompt window:

Chapter 4 - Modify Your App 23

To open the file in Notepad, you will need to navigate to the HelloWorld folder:

If you get to the correct folder and don't see the App.js file, be sure to display All

Files and not just Text Documents (*.txt):

24 React Native Beginner User Guide

2. Select the "App.js" file and click "Open" or double click "App.js."

The following file will appear:

Chapter 4 - Modify Your App 25

4.1 Modify your App.js file

1. Find the <Text> line with the phrase "Open App.js to start working on your app!" This

is what you are seeing on your phone if you have Expo Go running. (And you should

have Expo Go running so you can see the changes as you save them!)

2. Change the words between the <Text></Text> tags to "Hello, world!" and click

File>Save.

26 React Native Beginner User Guide

3. Watch your phone, wait a little bit, and TA DA, there's the change!

You can change the text to say whatever you want. Make the changes, save them,

and watch the magic.

Chapter 4 - Modify Your App 27

4. Let's play with the style settings. Go back into your file and change the background

color by going to the line that says "backgroundColor: '#fff',":

5. Let's change it to React Native blue by changing #fff to #61dafb:

28 React Native Beginner User Guide

6. Then check your phone. Pretty!

Congratulations! You modified your first app! You're on your way to creating your

own app!

Now you're ready to start learning React Native. Visit https://reactnative.dev/docs/getting-

started to get started with the basics.

Chapter 4 - Modify Your App 29

30 React Native Beginner User Guide

Appendix A: Useful Links

React Native Documentation

https://reactnative.dev/docs/getting-started

The React Native website has a variety of useful information about getting started includ-

ing React fundamentals, testing your app, using libraries, changing styles, and much

more.

Mozilla JavaScript Tutorials

https://developer.mozilla.org/en-US/docs/Web/JavaScript

You need an understanding of JavaScript fundamentals to work with React Native. Moz-

illa provides a thorough set of tutorials.

React JavaScript Library

https://reactjs.org/

The React JavaScript library is used in React Native to build your app. The React website

has "Getting Started" information, as well as tutorials to learn more.

Node.js

https://nodejs.org/en/

The Node.js website has download links and documentation about the program.

Expo

https://docs.expo.io/

The Expo website houses excellent guides on a variety of topics related to Expo, including

getting started, fundamentals, and distributing your app.

Command Prompt: What It Is and How to Use It

https://www.lifewire.com/command-prompt-2625840

If you've never used the Windows Command Prompt before, this short guide is a useful

introduction.

Appendix A: Useful Links A

B React Native Beginner User Guide

Appendix B: Troubleshooting

React Native Setup Troubleshooting Guide

https://reactnative.dev/docs/troubleshooting

React Native has put together a list of commonly encountered issues that you may come

across while setting up React Native, including port errors, NPM locking errors, missing lib-

raries, and shell command problems.

Appendix B: Troubleshooting C

D React Native Beginner User Guide

Glossary

app

An application, usually down-

loaded by a user on a mobile

device.

Command Prompt

A command line interface that

allows users to execute com-

mands in Windows operating

systems.

Components

Independent, reusable bits of

code used in React Native that

return HTML elements

Development Environment

A software application that

provides comprehensive util-

ities for programmers to

develop software.