Hackforge Academy

Category: React • Beginner

Published on 17 Mar 2026

Explanation

Front-end and backend are connected using APIs (Application Programming Interfaces). The front-end sends HTTP requests to the backend, and the backend processes the request and returns a response.

Code Example

Explanation

The front-end usually communicates with the backend using HTTP methods such as GET, POST, PUT, and DELETE to retrieve, create, update, or delete data.

Code Example

Explanation

Data is commonly exchanged between the front-end and backend in JSON format because it is lightweight and easy for both JavaScript and backend languages to process.

Code Example

Explanation

Front-end applications use tools like fetch(), Axios, or AJAX to call backend APIs and display the returned data in the user interface.

Code Example

Explanation

The backend exposes REST APIs or GraphQL APIs that the front-end can call through URLs, allowing both parts of the application to communicate over the internet.

Code Example

Explanation

The front-end can connect to the backend using HTTP requests. In this example, JavaScript fetch() is used to call a backend API and retrieve data.

Code Example

fetch('http://localhost:8080/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

Explanation

Axios is a popular JavaScript library used in front-end applications to send HTTP requests to backend APIs and receive responses.

Code Example

axios.get('http://localhost:8080/api/users')
  .then(response => 
console.log(response.data));

Explanation

The backend exposes API endpoints using frameworks like Spring Boot. The front-end calls these endpoints to retrieve or send data.

Code Example

@RestController
public class UserController {
  @GetMapping("/api/users")
  public List<User> getUsers() {
    return List.of(new User(1, "John"));
  }
}

Explanation

Backend frameworks like Express.js create API routes that the front-end can call to access server data.

Code Example

app.get('/api/users', (req, res) => {
  res.json([{ id: 1, name: 'John' }]);
});

Explanation

Front-end applications send data to the backend using HTTP requests (like POST) in JSON format, allowing the backend to process the data.

Code Example

POST /api/login
{
  "username": "user",
  "password": "1234"
}