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.

🌟 What You’ll Learn

🧰 Prerequisites

🛠 Step 1: Create a New Laravel 12 Project

🎨 Step 2: Add Bootstrap 5

✅ Install Bootstrap via npm:

✅ Import Bootstrap styles and JS:

✅ Compile assets:

⚛ Step 3: Add React.js to Laravel

✅ Install React and Vite plugin:

✅ Update `vite.config.js`:

✅ Create React entry file:

🗃 Step 4: Build the Task Manager (CRUD)

✅ Create Model + Migration:

✅ Create Controller:

🧩 Step 5: Add React Frontend for Tasks

✅ Create Blade Template:

✅ Create React Component:

✅ Final Result

🚀 What’s Next?

🎁 Bonus Tip

💬 Final Thoughts

Laravel Mastery
Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

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

🌟 What You’ll Learn

🧰 Prerequisites

🛠 Step 1: Create a New Laravel 12 Project

🎨 Step 2: Add Bootstrap 5

✅ Install Bootstrap via npm:

✅ Import Bootstrap styles and JS:

✅ Compile assets:

⚛ Step 3: Add React.js to Laravel

✅ Install React and Vite plugin:

✅ Update vite.config.js:

✅ Create React entry file:

🗃 Step 4: Build the Task Manager (CRUD)

✅ Create Model + Migration:

✅ Create Controller:

🧩 Step 5: Add React Frontend for Tasks

✅ Create Blade Template:

✅ Create React Component:

✅ Final Result

🚀 What’s Next?

🎁 Bonus Tip

💬 Final Thoughts

Laravel Mastery Coaching Class Program

Daily Sessions

Real Projects

Best Practices

Career Support

Enrollment Closes In

Join the Program

Application Submitted!

What happens next?

Tags

Comments

Related Posts

✅ Update `vite.config.js`:

Laravel Mastery
Coaching Class Program