Getting Started: Laravel 12 with ReactJS & MySQL – A Complete Project Setup Guide

Are you ready to build powerful, full-stack web applications using Laravel 12, ReactJS, and MySQL? Whether you're a backend developer trying to dip into frontend or a React enthusiast looking to integrate with Laravel, this guide will walk you through setting up the perfect development stack – even if you're a complete beginner!

🌟 Why Laravel + React + MySQL?

Before we dive in, let’s understand why this combination is so popular:

• Laravel 12 – A robust PHP framework known for elegant syntax, built-in tools, and developer happiness.
• ReactJS – A powerful frontend library from Facebook that builds dynamic, interactive UIs.
• MySQL – A reliable and efficient open-source relational database.

Combining these gives you a fast, scalable, and maintainable full-stack web application.

🔧 Prerequisites

Make sure you have the following installed:

• PHP >= 8.2

• Composer

• Node.js & npm

• MySQL

• Laravel CLI:

  composer global require laravel/installer
  

• Basic knowledge of PHP, React, and MySQL helps – but not required!

🛠 Step 1: Create a New Laravel 12 Project

Open your terminal and run:

laravel new laravel-react-app
cd laravel-react-app

This creates a fresh Laravel 12 project.

✅ Test it:

php artisan serve

Visit http://127.0.0.1:8000 – You should see the Laravel welcome page!

🌐 Step 2: Set Up MySQL Database

1. Create a new MySQL database:

   • Use a GUI like phpMyAdmin or run:

     CREATE DATABASE laravel_react_db;
     

2. Update your .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_react_db
DB_USERNAME=root
DB_PASSWORD=your_password

3. Run migrations:

php artisan migrate

✅ You now have a Laravel + MySQL backend ready!

⚛️ Step 3: Install React in Laravel

Run the following to add React to your Laravel app:

composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev

This installs Laravel Breeze with React scaffolding and configures Vite for fast frontend builds.

📁 Step 4: Understand the Folder Structure

Here’s what gets added:

• resources/js – Main React app code
• resources/views/app.blade.php – The root Blade template
• routes/web.php – Laravel routes
• app/Http/Controllers – API or page controllers

React components are rendered inside Blade using Inertia.js (optional with Breeze).

🔄 Step 5: Create a Simple API + React Page

🧠 Create a Controller:

php artisan make:controller TaskController

// app/Http/Controllers/TaskController.php

use Illuminate\Http\Request;
use App\Models\Task;

class TaskController extends Controller
{
    public function index()
    {
        return response()->json(Task::all());
    }
}

📦 Create a Route:

// routes/api.php

use App\Http\Controllers\TaskController;

Route::get('/tasks', [TaskController::class, 'index']);

⚛️ Fetch in React:

// resources/js/Pages/Home.jsx

import { useEffect, useState } from 'react';

export default function Home() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch('/api/tasks')
      .then(res => res.json())
      .then(data => setTasks(data));
  }, []);

  return (
    <div>
      <h1>📋 Task List</h1>
      <ul>
        {tasks.map(task => <li key={task.id}>{task.title}</li>)}
      </ul>
    </div>
  );
}

⚙️ Step 6: Running Everything

To run the full stack:

# Run Laravel server
php artisan serve

# In a new terminal, run Vite for React
npm run dev

Visit http://localhost:8000 – your React + Laravel app is now live! 🎉

✅ Final Thoughts & Takeaways

• Laravel 12 makes backend development clean and expressive.
• ReactJS gives your frontend the interactivity users expect.
• MySQL keeps your data structured and fast.
• Laravel Breeze + React offers a simple way to get started with full-stack development.

🧠 Key Takeaways:

• Use Laravel Breeze to quickly scaffold React + Vite.
• APIs are best handled through routes/api.php and controllers.
• Use React hooks like useEffect to fetch backend data.
• Keep Laravel’s Blade for basic layout, let React handle interactivity.

💬 What's Next?

Try expanding this setup by:

• Adding authentication with Laravel Breeze or Jetstream.
• Building CRUD operations.
• Deploying to services like Vercel + Laravel Forge.

💡 Did You Find This Helpful?

If yes, drop a comment below 👇 or share this with your dev circle!