Laravel + React with Herd: A Complete Guide to Building Dynamic Web Apps

• Website Development
  Website Development

  I build websites for growth. Tailored design. Solid development. Built to help you move forward.

  Learn More View Articles

Summary

This guide shares my personal approach to building a Laravel and React application using the Laravel Authentication Starter Kit. You will see how I set up Laravel with Herd on macOS, design and handle form fields, create models and databases, send data to React views, configure routes, and use Laravel to pass fields into React components.

I will draw on my own experience, including building a Pokémon app with the PokéAPI and several kanban-style task managers that can handle nested data. I will also show how I use AI tools to save time when creating large sets of database fields.

By the end, you will understand how Laravel and React can work together to create fast, dynamic, and secure web applications, with a workflow that makes sense for both hobby and professional projects.

Why Laravel and React Work Well Together

I have worked with both the MERN stack and Laravel-only applications. MERN taught me how to keep the backend and frontend separate, while Laravel showed me the benefits of a clean, opinionated backend framework.

React has always been a favourite for building dynamic user interfaces. Laravel provides a robust backend that can handle data, authentication, and routing with ease. When I combine the two, I feel I have the best of both worlds. The Laravel ecosystem already includes authentication scaffolding for React, which means I can get started without having to write every feature from scratch.

Setting Up Laravel with Herd

I use macOS, but I also run KDE on Linux as my main daily driver. For local Laravel development on my Mac, I now use Herd. It is fast, easy to install, and detects Laravel projects automatically.

After installing Herd, I created a new Laravel application with React authentication like this:

composer global require laravel/installer
laravel new my-laravel-react-app
cd my-laravel-react-app
composer require laravel/breeze --dev
php artisan breeze:install react
npm install
npm run dev

Herd immediately gave me a .test domain for the project. No extra configuration was needed. The speed and simplicity make it fantastic for starting projects quickly.

Creating Form Fields in Laravel and React

Forms are a big part of most of my applications. In my Pokémon app, forms allowed users to search and filter data from the PokéAPI. In my kanban apps, forms were used for adding tasks, lists, and subtasks.

In Laravel, I handle form validation with Form Requests. For example:

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class StoreProjectRequest extends FormRequest
{
    public function rules()
    {
        return [
            'title' => 'required|string|max:255',
            'description' => 'nullable|string',
        ];
    }
}

On the React side, I use controlled components to handle inputs:

import { useState } from 'react';

export default function ProjectForm({ onSubmit }) {
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit({ title, description });
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                placeholder="Project Title"
            />
            <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Project Description"
            />
            <button type="submit">Save</button>
        </form>
    );
}

This combination keeps the validation secure on the backend, while React provides a smooth and interactive experience for the user.

Creating Models and Databases

One of the best time-saving techniques I use is AI-assisted migration creation. If I have a long list of fields for a table, I describe them in plain English and let AI generate the Laravel migration code.

For example, if I want a projects table:

Schema::create('projects', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('description')->nullable();
    $table->date('deadline')->nullable();
    $table->string('status')->default('pending');
    $table->integer('priority')->default(0);
    $table->timestamps();
});

It saves me time and reduces typing errors. I can then focus on building the actual features rather than repetitive syntax.

Sending Data from Laravel to React

With the Laravel Breeze React stack, I use Inertia.js to pass data directly to React without creating a separate API.

Example controller:

use App\Models\Project;
use Inertia\Inertia;

class ProjectController extends Controller
{
    public function index()
    {
        $projects = Project::all();
        return Inertia::render('Projects/Index', [
            'projects' => $projects
        ]);
    }
}

React view:

export default function Index({ projects }) {
    return (
        <div>
            <h1>My Projects</h1>
            <ul>
                {projects.map(project => (
                    <li key={project.id}>{project.title}</li>
                ))}
            </ul>
        </div>
    );
}

This approach avoids CORS issues and keeps the app in one unified codebase.

Routes

Laravel routes are defined in routes/web.php. For example:

Route::get('/projects', [ProjectController::class, 'index'])->name('projects.index');

In React, I use Inertia’s <Link> component:

import { Link } from '@inertiajs/react';

<Link href={route('projects.index')}>View Projects</Link>

This method keeps navigation fast and reactive, without losing the benefits of Laravel’s backend routing.

Adding New Fields from Laravel to React

When I need to add a new field, I simply update the migration and model in Laravel, pass the data to the React component, and add the input in the form.

For example, in my kanban app, I added a due_date field:

1. Added due_date to the migration
2. Updated the $fillable property in the model
3. Passed due_date to the React view
4. Added a date picker in the React form

This made it easy to keep both backend and frontend in sync.

Using AI for Database Field Creation

AI is now part of my workflow. I use it to:

1. Generate migrations
2. Create Eloquent relationships
3. Write seeders with realistic data
4. Suggest validation rules

In my nested kanban project, I generated migrations for boards, lists, cards, and subtasks in minutes. This left me with more time to improve the user interface and performance.

My Advice for Developers

1. Track important events and data from the start
2. Use Laravel starter kits to save setup time
3. Let AI handle repetitive coding tasks, but keep creative decisions human
4. Work on both fun and practical projects to keep improving skills

Conclusion

Using Laravel with React and the Authentication Starter Kit is one of the fastest ways to build a secure, scalable, and dynamic application. With Herd handling the local setup, Laravel managing the backend, React powering the interface, and AI taking care of repetitive coding, you can focus on creating features that make your application truly unique.

The real purpose of combining Laravel and React is to merge backend power with a smooth, interactive frontend. This combination allows ideas to move from concept to reality quickly, while keeping the development process enjoyable. I am excited to see more developers using this stack to create fantastic projects that push the web forward.