Laravel 12 with React Integration Tutorial (Step-by-Step Guide 2026)

Laravel 12 with React Integration: In this tutorial, we will build a complete full stack CRUD application using Laravel 12 as backend and React as frontend.

This structure is widely used in modern applications where Laravel handles APIs and React handles UI.

📁 Project Structure

app/
resources/js/
routes/api.php
resources/views/welcome.blade.php

Step 1. Install Laravel 12

composer create-project laravel/laravel laravel-react
cd laravel-react

Step 2. Database Setup

DB_DATABASE=laravel_react
DB_USERNAME=root
DB_PASSWORD=

php artisan migrate

Step 3. Create Model & Migration

php artisan make:model Post -m

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description');
        $table->timestamps();
    });
}

php artisan migrate

Step 4. Create API Controller

php artisan make:controller Api/PostController --api

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        return response()->json(Post::latest()->get());
    }

    public function store(Request $request)
    {
        $data = $request->validate([
            'title' => 'required',
            'description' => 'required'
        ]);

        return response()->json(Post::create($data), 201);
    }

    public function show($id)
    {
        return Post::findOrFail($id);
    }

    public function update(Request $request, $id)
    {
        $post = Post::findOrFail($id);
        $post->update($request->all());
        return $post;
    }

    public function destroy($id)
    {
        Post::destroy($id);
        return response()->json(['message' => 'Deleted']);
    }
}

Step 5. Add Fillable

protected $fillable = ['title', 'description'];

Step 6. API Routes

use App\Http\Controllers\Api\PostController;

Route::apiResource('posts', PostController::class);

Step 7. Install React

npm install
npm install react react-dom axios

Step 8. Create React App

import React, { useEffect, useState } from "react";
import axios from "axios";

function App() {
  const [posts, setPosts] = useState([]);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");

  useEffect(() => {
    fetchPosts();
  }, []);

  const fetchPosts = () => {
    axios.get("/api/posts").then(res => {
      setPosts(res.data);
    });
  };

  const addPost = () => {
    axios.post("/api/posts", { title, description })
      .then(() => {
        setTitle("");
        setDescription("");
        fetchPosts();
      });
  };

  const deletePost = (id) => {
    axios.delete(`/api/posts/${id}`)
      .then(() => fetchPosts());
  };

  return (
    <div>
      <h2>Laravel + React CRUD</h2>

      <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Title" />
      <input value={description} onChange={e => setDescription(e.target.value)} placeholder="Description" />
      <button onClick={addPost}>Add</button>

      {posts.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.description}</p>
          <button onClick={() => deletePost(post.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

export default App;

Step 9. Mount React

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

ReactDOM.createRoot(document.getElementById('app')).render(<App />);

Step 10. Blade File

<div id="app"></div>
@vite('resources/js/app.js')

Step 11. Run Project

npm run dev
php artisan serve

🔥 Final Output

• Create Post
• View Posts
• Delete Post

✅ Best Practices

• Use validation always
• Use API resources for formatting
• Handle errors in React
• Use environment variables

🚀 Conclusion

You have successfully built a full stack Laravel 12 + React application with CRUD functionality. This is a real-world architecture used in modern development.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)