ST0504 –

Mobile Application
Development
Lecture 13 –
React Native and Node JS

Official (Open) Non-Sensitive

React Native and Node JS
• Mobile application required external resources from external URL
• Use REST API to POST a request
• React Native client provide the Fetch API to Get data from external
resources.

Official (Open) Non-Sensitive

Hosting a back end resources storage – NodeJS
• In ST0503 – Back-End Web Development module you learn how to
host a back end services for send and received data.

// This responds with " Nothing" on the homepage

app.get('/', function (req, res) {
console.log("Got a GET request for the homepage");
res.send('Hello GET');
})

Official (Open) Non-Sensitive

NodeJS – POST request
// This responds a POST request for the homepage
app.get('/mydata', function (req, res) {
console.log("Got a POST request for the homepage");
res.send(data);
})

• data -> JSON data from the data storage

Official (Open) Non-Sensitive

NodeJS – Hosting Node JS
• To host the node js server
• Type - > node server.js

D:\reactnative\nodetest\expressexample>node server.js
Example app listening at http://:::8081

The node js application is host in localhost and port 8081

Official (Open) Non-Sensitive

React native – fetch data
• To fetch data from a hosted server use async() and await to fetch

const getMovies = async () => {

try { const response = await fetch('http://localhost:8081/mydata/');
const json = await response.json();
…..
• Data will be fetch and assigned to json variable.

Official (Open) Non-Sensitive

React native – fetch data
• Ge the fetch data from the variable json.

• The send data conform to the json structure.

• Use json.movies to get each sets of the movies data.

Official (Open) Non-Sensitive

React native – fetch data
• Since the node js isn’t host on https server.
• CORS error will be display.
• The react native application will not be able to receive the data from
remote data.

• CORS - Cross-Origin Resource Sharing

Official (Open) Non-Sensitive

CORS - Cross-Origin Resource Sharing
• CORS - Cross-Origin Resource Sharing

• For security reasons, browsers restrict cross-origin HTTP requests

initiated from scripts.
• For example, XMLHttpRequest and the Fetch API follow the same-
origin policy.
• This means that a web application using those APIs can only request
resources from the same origin the application was loaded from
unless the response from other origins includes the right CORS
headers.

Official (Open) Non-Sensitive

CORS - Cross-Origin Resource Sharing
• CORS - Cross-Origin Resource Sharing
• How to fetch data with CORS blocking your http request?

• Install the Moesif Origin & CORS Changer into your Chrome browser.

• Activate the Moesif Origin & CORS will allow the react to fetch the
back end data easily.

Official (Open) Non-Sensitive

Fetch data from remote server
• Practical 16 - React Native and Node JS
• https://reactnative.dev/docs/network

Official (Open) Non-Sensitive