Laravel React JS CRUD using Vite Example

Hi Dev,

This article will provide example of laravel 9 react js crud example. step by step explain react js crud example with laravel 9 api. We will look at example of laravel 9 react js crud with vite. We will look at example of laravel 9 react js vite example. Here, Creating a basic example of laravel 9 react js crud tutorial for beginners.

In this tutorial, we will use laravel breeze, inertia js, vite and tailwind css to create react crud in laravel app. we will create “posts” table with title and body columns. then we will create insert update and delete tasks using react js with laravel api.

So, let’s follow the below step to do react js crud with laravel vite. you can see below a preview screenshot of the example as well.

Create View:

Update View:

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:

Step 2: Create Auth with Breeze

Now, in this step, we need to use composer command to install breeze, so let’s run bellow command and install bellow library.

now, we need to create authentication using bellow command. you can create basic login, register and email verification using react js. if you want to create team management then you have to pass addition parameter. you can see bellow commands:

Now, let’s node js package:

let’s run vite, you have to keep start this command:

now, we need to run migration command to create database table:

Step 3: Create Migration and Model

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

now we will create Post.php model by using following command:

App/Models/Post.php

Step 4: Create Route

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

routes/web.php

Step 5: Create Controller

In this step, we will create PostController file and add following code on it.

app/Http/Controllers/PostController.php

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 bellow code on it.

resources/js/Pages/Posts/Index.jsx

resources/js/Pages/Posts/Create.jsx

resources/js/Pages/Posts/Edit.jsx

Next, we will add posts module link on header navbar. you have to update add following line on Authenticated.jsx file.

resources/js/Pages/Posts/Edit.jsx

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

Also keep run following command for vite:

If you want to build then you can run following command:

Now, Go to your web browser, type the given URL and view the app output:

now it works…

You can download full example from Github: Download

I hope it can help you…

Originally published at https://www.itsolutionstuff.com on July 9, 2022.