Laravel 12 + React.js + Bootstrap 5: Beginner’s Guide to Building Modern Web Apps

Laravel 12 is here — powerful, clean, and ready for the future. If you're a beginner looking to combine Laravel's backend strength with React.js and Bootstrap 5, this tutorial is for you.

We’ll walk you through building a simple Task Manager App using these tools — no advanced experience needed.

🌟 What You’ll Learn

• How to set up Laravel 12
• How to install React.js with Vite
• How to add Bootstrap 5 for styling
• How to build a simple Task Manager CRUD app

🧰 Prerequisites

Before starting, make sure you have:

✅ PHP 8.2 or higher
✅ Composer (PHP package manager)
✅ Node.js + npm installed
✅ A text editor like VS Code
✅ Basic terminal knowledge

🛠 Step 1: Create a New Laravel 12 Project

Let’s start by creating a new Laravel project.

composer global require laravel/installer
laravel new laravel-react-bootstrap
cd laravel-react-bootstrap

You now have a fresh Laravel 12 setup! Check the version:

php artisan --version

You should see something like:

Laravel Framework 12.x.x

🎨 Step 2: Add Bootstrap 5

Bootstrap makes your app look clean and responsive.

✅ Install Bootstrap via npm:

npm install bootstrap@5 @popperjs/core

✅ Import Bootstrap styles and JS:

Open resources/js/app.js and add:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';

✅ Compile assets:

npm run dev

You now have Bootstrap working with Laravel + Vite!

⚛ Step 3: Add React.js to Laravel

Now let’s add React to our Laravel project using Vite.

✅ Install React and Vite plugin:

npm install react react-dom @vitejs/plugin-react

✅ Update vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.jsx'],
      refresh: true,
    }),
    react(),
  ],
});

✅ Create React entry file:

Create a new file: resources/js/app.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import TaskApp from './components/TaskApp';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TaskApp />);

🗃 Step 4: Build the Task Manager (CRUD)

Let’s create a basic Task model and controller to manage tasks.

✅ Create Model + Migration:

php artisan make:model Task -m

In the migration file, update like this:

$table->string('title');
$table->timestamps();

Run migration:

php artisan migrate

✅ Create Controller:

php artisan make:controller TaskController

In routes/web.php, add:

use App\Http\Controllers\TaskController;

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

Inside TaskController.php:

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

public function index() {
    $tasks = Task::all();
    return view('tasks', compact('tasks'));
}

public function store(Request $request) {
    $request->validate(['title' => 'required']);
    Task::create($request->only('title'));
    return redirect('/');
}

🧩 Step 5: Add React Frontend for Tasks

✅ Create Blade Template:

In resources/views/tasks.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Task Manager</title>
    @vite('resources/js/app.jsx')
</head>
<body class="container py-5">
    <div id="root" data-tasks='@json($tasks)'></div>
</body>
</html>

✅ Create React Component:

Create a new file: resources/js/components/TaskApp.jsx

import { useState } from 'react';
import axios from 'axios';

export default function TaskApp() {
    const initialTasks = JSON.parse(document.getElementById('root').dataset.tasks);
    const [tasks, setTasks] = useState(initialTasks);
    const [newTask, setNewTask] = useState('');

    const addTask = async (e) => {
        e.preventDefault();
        await axios.post('/tasks', { title: newTask });
        setNewTask('');
        window.location.reload(); // quick reload for demo
    };

    return (
        <div>
            <form onSubmit={addTask} className="mb-3">
                <div className="input-group">
                    <input
                        value={newTask}
                        onChange={e => setNewTask(e.target.value)}
                        className="form-control"
                        placeholder="New Task"
                        required
                    />
                    <button className="btn btn-primary">Add</button>
                </div>
            </form>
            <ul className="list-group">
                {tasks.map(task => (
                    <li key={task.id} className="list-group-item">
                        {task.title}
                    </li>
                ))}
            </ul>
        </div>
    );
}

✅ Final Result

You now have a beautiful, working Laravel 12 application using:

✔ Laravel for backend
✔ React.js for frontend interactivity
✔ Bootstrap for styling

🚀 What’s Next?

Here’s what you can do to expand this project:

• Add Edit/Delete functionality
• Store tasks using AJAX instead of page reloads
• Add Authentication with Laravel Breeze (React stack)
• Move to an API-first architecture using api.php routes
• Add state management (like Redux or Context API)

🎁 Bonus Tip

For production builds, run:

npm run build
php artisan config:cache

This will optimize your Laravel + React app for deployment!

💬 Final Thoughts

You’ve just built your first Laravel 12 + React + Bootstrap app — congratulations! 🎉

With this stack, you can create powerful, real-time applications using the best tools in modern web development. Keep learning, keep building.