REST API architecture describes how a client, server, API layer, and database communicate with each other. Understanding this architecture is important before creating REST APIs for React Native applications.
In our course, React Native will be the client, PHP will provide the REST API, and MySQL will store application data.
REST API architecture defines how different parts of an application communicate through HTTP requests and responses.
React Native
↓
REST API
↓
PHP Backend
↓
MySQL
Each layer has its own responsibility.
Our REST API architecture contains these main components:
Client → API → Backend → Database
The client is the application used by the end user.
In our course, the client will be a React Native + TypeScript mobile application.
The client displays screens, collects user input, sends API requests, and displays API responses.
The API layer receives requests from the client and returns responses.
React Native
↓
HTTP Request
↓
REST API
↓
HTTP Response
↓
React Native
This layer provides the communication interface between the client and backend.
The backend contains the server-side logic of the application.
In our projects, PHP will handle backend operations such as:
The database layer stores application information.
We will use MySQL for storing data such as users, students, courses, and other application records.
PHP Backend
↓
MySQL
┌─────────────────────────────┐
│ React Native + TypeScript │
│ Client App │
└──────────────┬──────────────┘
│
│ HTTP
↓
┌─────────────────────────────┐
│ REST API │
│ PHP Backend │
└──────────────┬──────────────┘
│
│ SQL
↓
┌─────────────────────────────┐
│ MySQL Database │
└─────────────────────────────┘
A request normally travels from the client toward the backend.
User Action
↓
React Native
↓
HTTP Request
↓
REST API
↓
PHP Processing
↓
MySQL Query
After processing the request, the response travels back to the client.
MySQL
↓
PHP Backend
↓
REST API
↓
JSON Response
↓
React Native
↓
Updated Screen
REST APIs commonly use HTTP or HTTPS to communicate between the client and server.
For example:
GET https://example.com/api/students
The client sends the request to the API endpoint.
An API endpoint is a URL through which the client accesses a resource or performs an operation.
Examples:
/api/students
/api/users
/api/courses
A specific record can be identified using an ID.
/api/students/10
REST APIs generally organize data as resources.
Examples:
/api/users
/api/students
/api/courses
HTTP methods describe the operation that the client wants to perform.
| Method | Common Operation |
|---|---|
| GET | Read data |
| POST | Create data |
| PUT | Update data |
| PATCH | Partially update data |
| DELETE | Delete data |
Suppose the mobile application wants to display all students.
React Native
↓
GET /api/students
↓
PHP REST API
↓
SELECT students
↓
MySQL
↓
JSON Response
↓
React Native
Suppose the mobile application wants to add a student.
React Native
↓
POST /api/students
↓
PHP REST API
↓
Validate Data
↓
INSERT INTO students
↓
MySQL
↓
JSON Response
↓
React Native
PUT can be used to update an existing resource.
React Native
↓
PUT /api/students/10
↓
PHP REST API
↓
Validate Data
↓
UPDATE students
↓
MySQL
↓
JSON Response
DELETE can be used to remove a resource.
React Native
↓
DELETE /api/students/10
↓
PHP REST API
↓
DELETE FROM students
↓
MySQL
↓
JSON Response
↓
React Native
JSON is commonly used to exchange structured information between the client and API.
Example response:
{
"success": true,
"data": {
"id": 10,
"name": "Rahul",
"course": "React Native"
}
}
A request body can contain information that the client wants to send to the server.
For example, when creating a student:
{
"name": "Amit",
"email": "amit@example.com",
"course": "React Native"
}
The PHP API can read and validate this information.
A REST API can use a consistent response structure.
{
"success": true,
"message": "Student found",
"data": {
"id": 1,
"name": "Rahul"
}
}
A consistent response structure makes API consumption easier for the mobile application.
The API should also provide useful responses when an operation fails.
{
"success": false,
"message": "Student not found"
}
The React Native application can use the response to display an appropriate message.
Authentication can be added to the REST API architecture to protect private resources.
React Native
↓
Login API
↓
PHP
↓
MySQL
↓
Authentication Token
↓
React Native
Later we will study token authentication and JWT.
After authentication, a mobile application can send a token with requests to protected endpoints.
GET /api/profile
Authorization: Bearer TOKEN
The PHP backend can verify the token before returning protected information.
The backend should validate data received from the client.
For example, while creating a student, the API can check whether:
Validation should be performed on the server even if the mobile app also validates the data.
Business logic contains the rules that determine how an application should behave.
For example, a student management API may check whether a student already exists before creating a new record.
Request
↓
Validation
↓
Business Rules
↓
Database
Security is an important part of API architecture.
Our course will later cover:
The React Native application can organize its API communication through service functions.
Screen
↓
API Service
↓
REST API
↓
PHP Backend
↓
MySQL
This keeps API communication separate from the user interface code.
┌──────────────────────────────┐
│ React Native │
│ │
│ Login Screen │
│ Student List │
│ Student Form │
└──────────────┬───────────────┘
│
│ Fetch / Axios
↓
┌──────────────────────────────┐
│ PHP REST API │
│ │
│ Authentication │
│ Validation │
│ Business Logic │
│ JSON Responses │
└──────────────┬───────────────┘
│
│ PDO / SQL
↓
┌──────────────────────────────┐
│ MySQL │
│ │
│ users │
│ students │
│ courses │
└──────────────────────────────┘
The complete architecture we will use throughout this course is:
USER
↓
React Native + TypeScript
↓
Fetch / Axios
↓
HTTP Request
↓
┌──────────────┐
│ REST API │
│ PHP Backend │
└──────┬───────┘
↓
Validation
↓
Business Logic
↓
MySQL
↓
Database Result
↓
JSON Response
↓
React Native Application
↓
Updated UI
This architecture forms the foundation for the REST API and React Native projects that we will build in the upcoming lessons.
Question: Which component acts as the communication layer between the React Native application and the database?