Lavavel 9 React CRUD Example with Inertia Js

Hello Artisan,

This article will provide an example of Laravel 9 react js crud example with vite and tailwind CSS. You will see step by step explanation of react js crud example with Laravel 9 using api. We will look at an example of laravel 9 react js crud with vite. Here, I will create a basic example of laravel 9 react js crud tutorial for beginners.

In this tutorial, I will use Laravel breeze, inertia js, vite, and tailwind CSS to create a complete react crud in laravel app. To create this react laravel 9 crud, I will create a posts table with title and body columns. then i will create insert update and delete tasks using react js with laravel api.

From this example, you will see how to install vite in react js, install tailwind css with vite and react in Laravel 9 application. Let's see the complete crud example of Laravel 9 with react js.

Step 1: Install Laravel

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Auth

Now, in this step, we have to use composer command to install breeze for Laravel default authentication, so let's run bellow command and install bellow library.

composer require laravel/breeze --dev

Now install react by the below command:

php artisan breeze:install react

Now, let's node js package:

npm install

//

npm run dev

Now, we need to run migration command to create database table for users table for authentication:

php artisan migrate

Read also: React Js useState Hook with Object Example

Step 3: Create Migration

Here, I need create database migration for posts table and also we will create model for posts table.

php artisan make:model Post -m

Update table for posts

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

Now update Post model like:

App/Models/Post.php

namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 4: Create Route

In third step, we will create routes for react js crud app. so create resource route here.

routes/web.php

use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::resource('posts', PostController::class);
   
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});
    
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
   
require __DIR__.'/auth.php';

Step 5: Create Controller

In this step, we will create a PostController file and add the following code to it.

app/Http/Controllers/PostController.php

namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
   
class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $posts = Post::all();
        return Inertia::render('Posts/Index', ['posts' => $posts]);
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create()
    {
        return Inertia::render('Posts/Create');
    }
    
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();
   
        Post::create($request->all());
    
        return redirect()->route('posts.index');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function edit(Post $post)
    {
        return Inertia::render('Posts/Edit', [
            'post' => $post
        ]);
    }
    
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function update($id, Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();
    
        Post::find($id)->update($request->all());
        return redirect()->route('posts.index');
    }
    
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function destroy($id)
    {
        Post::find($id)->delete();
        return redirect()->route('posts.index');
    }
}

Step 6: Create React Pages

Here, in this step, we will create react js file for Index.jsx, Create.jsx and Edit.jsx. so, let's create it and add the bellow code below it.

resources/js/Pages/Posts/Index.jsx

resources/js/Pages/Posts/Create.jsx

resources/js/Pages/Posts/Edit.jsx

Now we can add the posts module link on the header navbar. you have to update and add the following line on Authenticated.jsx file.

resources/js/Pages/Posts/Edit.jsx

All are set to go. Run the below command to compile all javascript files:

npm run watch

then start the development server:

php artisan serve

Now visit:

Read also: React Form Validation and Submit Example with Formik

Hope it can help you.