A mobile application usually needs to communicate with a server to store, retrieve, update, and delete data. In a React Native application, this communication is commonly performed through a REST API.
The React Native application acts as the client, while the server processes requests, communicates with the database, and sends a response back to the mobile application.
A mobile application and a server are usually separate parts of an application system.
Mobile Application
↓
Server
↓
Database
The mobile application requests data from the server, and the server returns the required response.
A mobile application often needs a server for data that should be shared, stored centrally, or protected from direct client access.
For example, a student application may need to store:
The mobile application is commonly called the client. The computer or service that processes requests is called the server.
Client
↓
Request
↓
Server
↓
Response
↓
Client
In our mobile application projects, the React Native application will act as the client.
React Native App
↓
Request
↓
API
The client sends requests whenever it needs information or wants to perform an operation on the server.
The server contains the backend logic of the application.
In our course, PHP will be used to create the backend REST API.
React Native
↓
PHP API
↓
MySQL
The database stores application data.
We will use MySQL for storing data in our REST API projects.
React Native
↓
PHP
↓
MySQL
The mobile application normally communicates with the database through the API rather than connecting directly to MySQL.
The basic communication process can be represented as follows:
React Native
↓
HTTP Request
↓
REST API
↓
PHP Backend
↓
MySQL
↓
PHP Backend
↓
JSON Response
↓
React Native
An HTTP request is a message sent by the client to the server.
For example, a mobile application may request a list of students.
GET /api/students
The server receives this request and processes it.
An HTTP response is the message returned by the server after processing a request.
For example:
{
"id": 1,
"name": "Rahul",
"course": "React Native"
}
The mobile application can use this response to display information.
Communication between the mobile application and server follows a request-response cycle.
1. User performs an action
2. Mobile app creates request
3. Request is sent to API
4. Server processes request
5. Server communicates with database
6. Server creates response
7. Mobile app receives response
8. Mobile app updates the screen
Communication often starts when the user performs an action in the mobile application.
For example, the user may press:
The application can send an API request based on the action.
Suppose a user enters an email and password and presses the Login button.
React Native
↓
POST /api/login
↓
PHP API
↓
MySQL
↓
PHP API
↓
Login Response
↓
React Native
The mobile application can send login information to the server in the request body.
{
"email": "rahul@example.com",
"password": "123456"
}
The PHP API can receive and validate the submitted information.
After receiving the request, the server performs the required processing.
For a login request, the server may:
The PHP backend can communicate with MySQL to read or modify application data.
PHP REST API
↓
MySQL Query
↓
Database
↓
Query Result
↓
PHP REST API
After processing the request, the server can create a JSON response.
{
"success": true,
"message": "Login successful"
}
The React Native application can read this response and update its interface.
Suppose the mobile application requests student records.
GET /api/students
The API may return:
[
{
"id": 1,
"name": "Rahul"
},
{
"id": 2,
"name": "Amit"
}
]
React Native can display these records in a list.
A mobile application can also send new data to the server.
For example:
POST /api/students
Request body:
{
"name": "Amit",
"email": "amit@example.com"
}
The PHP API can validate this data and insert it into MySQL.
The mobile application can request an update for an existing record.
PUT /api/students/10
The API can update the corresponding record in MySQL and return a result to the mobile application.
A mobile application can also request deletion of a record.
DELETE /api/students/10
The PHP API can process the request and delete the appropriate record from the database.
React Native applications can use the JavaScript Fetch API to communicate with a REST API.
fetch("https://example.com/api/students")
.then(response => response.json())
.then(data => {
console.log(data);
});
We will study Fetch API in detail later.
Another popular option for API communication is Axios.
axios.get("https://example.com/api/students")
.then(response => {
console.log(response.data);
});
Axios will be covered in a later section of this course.
The mobile application needs network connectivity when communicating with a remote server over the internet.
Mobile App
↓
Internet
↓
API Server
↓
Database
If the network is unavailable, the application should handle the error appropriately.
API requests can take some time to complete.
A mobile application should show an appropriate loading state while waiting for the server response.
Loading...
Please wait
React Native can use state to control loading indicators.
API communication can fail for different reasons.
The mobile application should handle these situations and show a useful message to the user.
After login, an API may provide an authentication token to the mobile application.
The mobile application can send the token with later requests to access protected resources.
Authorization: Bearer TOKEN
JWT and token-based authentication will be covered later.
Suppose a student mobile application needs to display students.
1. User opens Student List
2. React Native sends GET request
3. PHP API receives request
4. PHP queries MySQL
5. MySQL returns records
6. PHP creates JSON
7. React Native receives JSON
8. Student list is displayed
A typical architecture for our projects will look like this:
┌──────────────────────────────┐
│ React Native + TypeScript │
│ Mobile Application │
└──────────────┬───────────────┘
│
│ HTTP
↓
┌──────────────────────────────┐
│ REST API │
│ PHP Backend │
└──────────────┬───────────────┘
│
│ SQL
↓
┌──────────────────────────────┐
│ MySQL Database │
└──────────────────────────────┘
Keeping these responsibilities separate makes the application easier to manage.
The complete mobile application communication flow can be summarized as follows:
User
↓
React Native App
↓
Fetch / Axios
↓
HTTP Request
↓
PHP REST API
↓
MySQL Database
↓
PHP REST API
↓
JSON Response
↓
React Native
↓
Updated UI
Understanding this flow is essential before learning how to create the actual PHP REST API endpoints.
Question: In our REST API architecture, which component normally communicates directly with the MySQL database?