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

Author

Kritim Yantra

Jul 02, 2025

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
  1. 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!

Ajay Yadav

Ajay Yadav

Senior Full-Stack Engineer

7 + Years Experience

Transforming Ideas Into Digital Solutions

I architect and build high-performance web applications with modern tech:

Laravel PHP 8+ Vue.js React.js Flask Python MySQL

Response time: under 24 hours • 100% confidential

Tags

Comments

No comments yet. Be the first to comment!

Please log in to post a comment:

Sign in with Google

Related Posts