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

by
Morinne Kearns
Exploreum Enterprises
Copyright © 2021 Exploreum Enterprises. All rights reserved.

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
i
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 with1:

l 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

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

l 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.

1Knowledge 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 computer1 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.2

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).

1All images in this tutorial are for Windows installation. The process for other operating
systems will be similar but will look different.
2Links 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 Prompt1. 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:

1Those 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:

l iPhone
l Android phones
l Computer with Windows Operating System
l 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
 the project server, view logs,
Glossary and open your app in a sim-
ulator

A J
app JavaScript
An application, usually down- A programming language that
loaded by a user on a mobile allows you to make web pages
device. interactive. It is the world's most
popular programming lan-
C guage.

Command Prompt JSX

A command line interface that An XML/HTML-like syntax to
allows users to execute com- JavaScript that allows you to
mands in Windows operating write HTML in React
systems.
K
Components
Independent, reusable bits of Kotlin
code used in React Native that An open-source programming
return HTML elements language used for cross-plat-
form app creation that works
D with Java.

Development Environment
N
A software application that
provides comprehensive util- Node.js
ities for programmers to An open-source, cross-platform
develop software. JavaScript runtime environment
that executes Javascript code
Directory outside a web browser.
A collection of files typically cre-
ated for organizational pur-
poses. Also known as a folder. O

Objective-C
E A general-purpose pro-
gramming language that can be
Expo CLI used to program apps for Apple
A command line app that allows
products.
you to create new projects, run

Glossary E
 open-source S
Software for which the original
source code is made freely State
available and may be redis- An object in React that stores
tributed and modified. property values for components
that will change over time
P Swift
A programming language for
Pop-up
Apple app development.
A window that appears on a
computer or phone screen.
W
Props
Properties that let you cus- Wi-Fi Network
tomize React components Wireless Fidelity Network. See
Wireless Network.
Q Wireless Network
A computer network that uses
QR code
electromagnetic waves to con-
A machine-readable code made
nect stations or devices.
up of an array of black and
white squares, typically used for
storing web addresses or other
information for reading by the
camera on a smartphone.

React
A free and open-source
JavaScript library for building
user interfaces. It is maintained
by Facebook and a community
of individual developers and
companies.

React Native
An open-source, cross-platform
framework for writing mobile
apps using JavaScript.

Glossary F
Index
A
App
Creating 13-14, 16-17
Modifying 26-29
Viewing 18-21
E
Expo CLI 8-9
Expo Go 10

I
Installation
Computer 3
Development Environment 3
Expo CLI 8
Expo Go 10
Phone 10
J
JavaScript 1
N
Node.js 3-7
R
React 1
React Native 1
W
Wireless Network, connecting to 11

Index G
Index H