🌐 The Architecture of a Decoupled Application

Connecting a React Frontend to a Laravel Backend

When you connect a React frontend to a Laravel backend, they act as two separate applications. Laravel serves as the API (Application Programming Interface) server, handling business logic, database operations, and data processing. React serves as the presentation layer, requesting and displaying data from the Laravel API.

Step-by-Step Integration Guide

Step 1: Prepare the Laravel Backend (API Server)

1. Create an API Route

Open routes/api.php and define an API endpoint:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProjectController;

Route::get('/projects', [ProjectController::class, 'index']);

2. Create the Controller

Generate a controller:

php artisan make:controller ProjectController

Open app/Http/Controllers/ProjectController.php and add:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\JsonResponse;

class ProjectController extends Controller
{
    public function index(): JsonResponse
    {
        $projects = [
            'Web App',
            'Mobile E-Commerce',
            'Portfolio'
        ];

        return response()->json($projects);
    }
}

3. Configure CORS

Open config/cors.php and ensure your React application's URL is allowed:

'allowed_origins' => [
    'http://localhost:3000',
],

If using Vite React:

'allowed_origins' => [
    'http://localhost:5173',
],

Start the Laravel server:

php artisan serve

Laravel API endpoint:

http://127.0.0.1:8000/api/projects

---

Step 2: Connect the React Frontend

1. Install Axios

Navigate to your React project directory and run:

npm install axios

2. Create a Component

Create ProjectList.jsx:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ProjectList() {
    const [projects, setProjects] = useState([]);

    useEffect(() => {
        axios
            .get('http://127.0.0.1:8000/api/projects')
            .then((response) => {
                setProjects(response.data);
            })
            .catch((error) => {
                console.error('Error fetching projects:', error);
            });
    }, []);

    return (
        <div>
            <h2>Projects List</h2>

            <ul>
                {projects.map((project, index) => (
                    <li key={index}>{project}</li>
                ))}
            </ul>
        </div>
    );
}

export default ProjectList;

3. Use the Component

Open App.jsx:

import React from 'react';
import ProjectList from './ProjectList';

function App() {
    return (
        <div>
            <h1>Laravel + React Integration Example</h1>
            <ProjectList />
        </div>
    );
}

export default App;

4. Start the React Application

npm run dev

or

npm start

depending on your React setup.

---

Data Flow

React Frontend
       │
       │ HTTP GET Request
       ▼
Laravel API
       │
       │ Fetch Data
       ▼
Database / Data Source
       │
       │ JSON Response
       ▼
React Frontend
       │
       ▼
Display Data

Expected Output

Laravel + React Integration Example

Projects List

• Web App
• Mobile E-Commerce
• Portfolio

This architecture keeps the frontend (React) and backend (Laravel) independent, making the application easier to maintain, scale, and develop.