Kritim Yantra
Jul 02, 2025
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!
Before we dive in, let’s understand why this combination is so popular:
Combining these gives you a fast, scalable, and maintainable full-stack web application.
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!
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!
Create a new MySQL database:
Use a GUI like phpMyAdmin or run:
CREATE DATABASE laravel_react_db;
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
php artisan migrate
✅ You now have a Laravel + MySQL backend ready!
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.
Here’s what gets added:
resources/js
– Main React app coderesources/views/app.blade.php
– The root Blade templateroutes/web.php
– Laravel routesapp/Http/Controllers
– API or page controllersReact components are rendered inside Blade using Inertia.js (optional with Breeze).
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());
}
}
// routes/api.php
use App\Http\Controllers\TaskController;
Route::get('/tasks', [TaskController::class, 'index']);
// 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>
);
}
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! 🎉
routes/api.php
and controllers.useEffect
to fetch backend data.Try expanding this setup by:
If yes, drop a comment below 👇 or share this with your dev circle!
No comments yet. Be the first to comment!
Please log in to post a comment:
Sign in with Google