A modern mobile application usually works with three important parts: the Client, the Server, and the Database.
In a React Native application, the mobile app acts as the client. The server provides backend functionality through a REST API, and the database stores application data.
A typical mobile application system contains three major parts:
Client
↓
Server
↓
Database
A client is an application that sends requests to a server.
In our mobile application projects, the React Native application acts as the client.
React Native App
↓
Request
↓
Server
A server is a system that receives requests from clients and processes them.
The server can perform business logic, validate information, communicate with the database, and return a response.
Client
↓
Server
↓
Response
A database is used to store and manage application data.
We will use MySQL as the database in our REST API projects.
For example, a student application may store student records in a MySQL database.
The basic architecture looks like this:
React Native
↓
PHP REST API
↓
MySQL
The React Native application does not normally communicate directly with MySQL.
When the mobile application needs data, it sends a request to the server.
For example:
GET /api/students
This request asks the server for student information.
The server receives the HTTP request and determines what operation needs to be performed.
React Native
↓
GET /api/students
↓
PHP REST API
The PHP backend can then process the request.
If the request requires stored data, the server can communicate with the database.
PHP REST API
↓
MySQL
↓
Student Records
The server retrieves the required records from MySQL.
After processing a database query, MySQL returns the requested information to the PHP backend.
MySQL
↓
Query Result
↓
PHP REST API
The PHP API can then prepare the data for the client.
After processing the database result, the server sends a response to the mobile application.
A common response format is JSON.
{
"success": true,
"data": [
{
"id": 1,
"name": "Rahul"
}
]
}
The complete flow can be represented as:
React Native
↓
HTTP Request
↓
PHP REST API
↓
MySQL
↓
PHP REST API
↓
JSON Response
↓
React Native
Suppose the user opens the Student List screen.
React Native sends:
GET /api/students
The PHP API retrieves student records from MySQL and sends them back as a response.
Suppose the user wants to add a new student.
React Native can send:
POST /api/students
The request body may contain:
{
"name": "Amit",
"email": "amit@example.com"
}
The PHP API can validate the information and insert it into MySQL.
An existing student can be updated through an API request.
PUT /api/students/10
The PHP API can update the corresponding record in MySQL.
A student record can also be deleted through the API.
DELETE /api/students/10
The server processes the request and removes the corresponding record from the database.
The mobile application should normally communicate with the backend API rather than connecting directly to the MySQL database.
Recommended:
React Native
↓
REST API
↓
MySQL
The backend provides a controlled layer between the mobile application and the database.
The API layer connects the client and the database through backend logic.
The API can handle:
The client is responsible for the mobile user interface and communicating with the API.
React Native can handle:
The server is responsible for processing requests and implementing backend functionality.
The PHP API can handle:
The database is responsible for storing and retrieving structured application data.
For example, a student database can contain:
students
----------------
id
name
email
mobile
course
created_at
Keeping the client, server, and database separate makes the application architecture easier to organize.
| Component | Main Responsibility |
|---|---|
| React Native | User interface and client-side logic |
| PHP API | Backend processing and communication |
| MySQL | Data storage |
Authentication is another important communication between the client and server.
React Native
↓
POST /api/login
↓
PHP API
↓
MySQL
↓
PHP API
↓
Token / Response
↓
React Native
Later in the course, we will implement token-based authentication and JWT.
Some API endpoints should only be accessible to authenticated users.
The mobile application can send an authentication token with the request.
GET /api/profile
Authorization: Bearer TOKEN
The PHP API can verify the token before returning protected data.
The server should also communicate errors to the client.
For example:
{
"success": false,
"message": "Student not found"
}
The React Native application can display an appropriate message to the user.
When a mobile application sends a request, the response may take some time.
The client can manage states such as:
Loading
↓
API Request
↓
Success / Error
Consider a student list screen.
User opens screen
↓
React Native
↓
GET /api/students
↓
PHP REST API
↓
SELECT * FROM students
↓
MySQL
↓
Student records
↓
PHP creates JSON
↓
React Native
↓
FlatList displays students
┌──────────────────────────────┐
│ React Native + TypeScript │
│ │
│ Screens / Components │
└──────────────┬───────────────┘
│
│ HTTP
↓
┌──────────────────────────────┐
│ PHP REST API │
│ │
│ Validation / Auth / Logic │
└──────────────┬───────────────┘
│
│ SQL
↓
┌──────────────────────────────┐
│ MySQL Database │
│ │
│ Users / Students / Courses │
└──────────────────────────────┘
The same backend API can potentially serve multiple client applications.
PHP REST API
/ | \
/ | \
↓ ↓ ↓
React Native Web Other Client
This allows the backend services to be shared across different applications.
The most important architecture to remember is:
CLIENT
React Native App
↓
HTTP Request
↓
SERVER
PHP REST API
↓
Database Query
↓
DATABASE
MySQL
↓
Query Result
↓
SERVER
PHP REST API
↓
JSON Response
↓
CLIENT
React Native App
The client handles the mobile interface, the server handles backend processing, and the database stores application information.
Question: In our REST API architecture, which component is responsible for storing application data?