DCIT 202- MOBILE APPLICATION

DEVELOPMENT
Session 1 – Introduction to React Native

Lecturer: Mr. Paul Nii Tackie Ammah, DCS

Contact Information: pammah@ug.edu.gh

Department of Computer Science

School of Physical and Mathematical Sciences
 Session Overview
• Goals and Objectives
– Learn about essential React Native concepts and related terms, such as JSX,
components, props, state, and lifecycle.
– Build a very simple React Native app that demonstrates the above concepts.

Slide 2
 Session Outline
• Prerequisites
• Goals
• What is React Native?
• Setup & Installation
• JSX
• Components
• Props & State
• Building and Deployment
• Debugging
Slide 3
 Prerequisites
• There are a few things you should know in advance before you start
playing with React
• Here are what I consider to be React Native prerequisites.
– Basic familiarity with HTML & CSS.
– Basic knowledge of JavaScript programming.
– Familiarity with ES6 syntax and features.
– Node.js and npm installed globally.

Slide 4
 What is React Native?
• React Native is an application development framework.
• Developed by Facebook.
• Uses standard web technologies (or, in some cases, something similar to
standard web technologies) to build applications.
• React Native allows you to create mobile applications that look, feel,
and perform much more like native apps
• use most of the same web development skills to achieve cross-platform
mobile development.

Slide 5
 Pros
• The look and feel of React Native apps are typically closer to those of
pure native apps than other hybrid technologies (Cordova, Ionic etc).
• Based on React, most of its concepts transfer to React Native.
• Simultaneous development for multiple platforms with most of the code
being 100%
• An excellent set of development tools makes working with React Native
smoother and faster

Slide 6
 Cons
• Depending on your needs, you may still have to do some native coding
anyway.
• Another new thing to learn: JSX (JavaScript XML).
• Support for new version of Android, iOS, or any other platform usually
takes some time. (it is not rendering into a webview)

Slide 7
 Setup & Installation
• React Native requires you to have Node.js (Node)
– JavaScript runtime built on Chrome's V8 JavaScript engine
• Expo CLI or React Native CLI

Slide 8
Node Installation

Slide 9
 Expo CLI
• Expo CLI is a command line app
• Used for variety of tasks including
– Creating new projects
– Developing your app: running the project server, viewing logs, opening your app
in a simulator
– Publishing your app JavaScript and other assets and managing releasing them
over the air
– Building binaries (apk and ipa files) to be uploaded to the App Store and Play
Store
– Managing Apple Credentials and Google Keystores

Slide 10
 Expo CLI Installation
• npm install -g expo-cli

• To create a new application use

– expo init <applicationName>
– Eg. expo init MyApp

Slide 11
 Running React Native App with Expo
• Install the Expo client app on your iOS or Android phone from their
respective app stores.
• Connect to same wireless network as computer
• With Expo you can run the app on browser, Expo client, android
simulator, iOS simulator (if android and/or iOS emulators are installed)
• Using the expo app scan the QR code that is displayed after running the
following command
– yarn start

Slide 12
Expo QR Code

Slide 13
 React Native CLI
• Installing dependencies
– You will need Node, the React Native command line interface, a JDK, and Android
Studio (for iOS you need Xcode and CocoaPods).
• React Native has a built-in command line interface which ships with Node.js
– npx react-native <command>
– Create an app with: npx react-native init <AppName>
• To run app
– Start Metro, the JavaScript bundler that ships with React Native.
• npx react-native start
– Start App
• npx react-native run-android OR npx react-native run-ios
Slide 14
 Modifying React Native App
• Open App.js in your text editor of choice and edit some lines.
• The application should reload automatically once you save your
changes.

Slide 15
App.js

Slide 16
ES6 Arrow Notation

Slide 17
 Understanding App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native’;

• The above are import statements

• The above simply imports various Modules (in this case React Native
Components) into App.js

Slide 18
 Understanding App.js cont.
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>
);
}

• This is the main App function.

• The entry to our mobile App.

Slide 19
 Understanding App.js cont.
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff’,
alignItems: 'center’,
justifyContent: 'center’,
},
});
• Styling for our App

Slide 20
App on Browser

Slide 21
 JSX
• The App function in the App.js looks a bit confusing
• Has HTML (XML to be precise) kind of syntax mix up in JavaScript code
• JSX is JavaScript + XML, JSX stands for JavaScript XML
• It is combination of all three of the things : JavaScript, HTML (XML, to be
more specific), and CSS.
• This JSX code gets processed by React Native and transformed into plain
old JavaScript, to be executed at runtime.

Slide 22
 Pure JS vs JSX
Pure JS JSX

JSX tends to be less verbose and clearer to read

Slide 23
 Components
• Everything you do in the world of React Native will be within the context
of components
• React components are self-contained chunks of code that encapsulate
the visual description of a visual element -
– its current state
– its attributes
– and the operations it can perform

Slide 24
 Function Components and Class Components
• With React, you can make components using either classes or functions.
• Originally, class components were the only components that could have
state.
• But since the introduction of React's Hooks API, you can add state and
more to function components.

Slide 25
Function Component

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

Slide 26
 Class Component

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

Slide 27
 Props and State
• Props and state represent data contained within a component
• Props is short for “properties”
• Props are generally regarded as being static
• State is expected to change
• props define an attribute of a component, and a state more directly
represents data inside a component

Slide 28
 Props
• Props let you customize React
components.
• For example, here you pass each
<Cat> a different name for Cat to
render:

Slide 29
 State
• State is like a component’s
personal data storage
• State is useful for handling data
that changes over time or that
comes from user interaction

Slide 30
 State
• In a class Component state is stored in a state object:

• In a function component, import the useState from react and use it within the function:
– import React, { useState } from 'react’;

[<getter>, <setter>] = useState(<initialValue>) :

– creates a “state variable” with an initial value,
– creates a function to set that state variable’s value Slide 31
 Debugging
• From browser: Use the developer tools
• You can use the standalone version of React Developer Tools to debug the React
component hierarchy.
• To use it, install the react-devtools package globally:
– npm install -g react-devtools
• Native Debugging (Only native code): You can display the console logs for an iOS
or Android app by using the following commands in a terminal while the app is
running:
– npx react-native log-ios
– npx react-native log-android
– Etc (use native app tools to debug e.g Android studio or XCode)

Slide 32
• Assignment
– Find assignments in Sakai

Slide 33