Laravel 5 – Simple SPA CRUD Application Using ReactJS (Part 1)

This article is focused on how to make CRUD (Create, Read, Update Delete) application with ReactJs and Laravel. In this example you can learn how to create a setup for Laravel and Reactjs, I also used Axios post, get, put and delete requests.

Let’s start developing a simple CRUD application using Laravel, ReactJs.

Step 1: Install Laravel 5.5
We are going from scratch, So we will install fresh Laravel application using below command, So open your terminal OR command prompt and run below command:

Step 2: Database Configuration

Let’s open .env file and fill all details like as bellow:

Step 3: Create products Table and Model
We are going to create CRUD application for products table with ReactJs. So, we have to create a migration for products table using Laravel PHP artisan command, so first fire bellow command:

After this command, It will create a migration file in database/migrations path. In this migration, we going to add ‘title‘ and ‘body‘ columns.

After creating the table we have to create a model for “products” table so just run below command and create a new model at app/Product.php.

Step 4: Create Web Route and API Route
Add products resource route in routes/api.php

Step 5: Create ProductController
Now create Product resource controller using below command on terminal.

In this controller will write code for the following method:

1. index()
2. store()
3. edit()
4. update()
5. destroy()

So, let’s copy below code and put on app/Http/Controllers/ProductController.php file.

In the next article we will following steps:

Step 6: Install Configuration For ReactJS
Step 7: Create React Components Files
Step 8: Create Main Blade File
Step 9: Run Project

Laravel 5 – Simple SPA CRUD Application Using ReactJS (Part 2)

Leave a Reply

Your email address will not be published. Required fields are marked *