Laravel 5 - Simple CRUD Application Using ReactJS - Part 1

Admin   PHP   1006  2020-08-11 18:40:33

In this post, i want to share with you how to create crud(Create Read Update Delete) application with react js in PHP Laravel framework. In this example you can learn how to built setup for laravel reactjs application, I also used axios post request, get request, put request and delete request for insert update delete application.

we always would like to prefer make setup for any javascript framework like vuejs, angularjs, reactjs etc. here i share with you basic setup for react and laravel with crud application. You have to just follow following 9 step as listed bellow:

1) Step 1 : Install Laravel 5.5

2) Step 2 : Database Configuration

3) Step 3 : Create products Table and Model

4) Step 4 : Create Web Route and API Route

5) Step 5 : Create ProductController

6) Step 6 : Install Configuration For ReactJS

7) Step 7 : Create React Components Files

8) Step 8 : Create Main Blade File

9) Step 9 : Run Project

After successfully all step you will get crud application like as bellow screen shot i attached.


Step 1 : Install Laravel 5.5

we are going from scratch, So we require to get fresh Laravel 5.5 version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Database Configuration

In second step, we should make database configuration for example database name, username, password etc for our crud application of laravel 5.5. So let's open .env file and fill all details like as bellow:





DB_DATABASE=here your database name(blog)

DB_USERNAME=here database username(root)

DB_PASSWORD=here database password(root)

Step 3: Create products Table and Model

we are going to create crud application for products table with react js. so we have to create migration for products table using Laravel 5.5 php artisan command, so first fire bellow command:

php artisan make:migration create_products_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create products table.


use Illuminate\Support\Facades\Schema;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Database\Migrations\Migration;

class CreateProductsTable extends Migration



* Run the migrations.


* @return void


public function up()


Schema::create('products', function (Blueprint $table) {








* Reverse the migrations.


* @return void


public function down()





After creating table we have to create model for "products" table so just run bellow command and create new model:

php artisan make:model Product

Ok, so after run bellow command you will find app/Product.php and put bellow content in Product.php file:



namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model



* The attributes that are mass assignable.


* @var array


protected $fillable = [

'title', 'body'



Step 4: Create Web Route and API Route

In this is step we need to add web route and also api route for products. so open your routes/web.php file and add following route.


Route::get('/', function () {

return view('welcome');



Route::resource('products', 'ProductController');

Step 5 : Create ProductController

In this step, we need create new controller as ProductController. So run bellow command and create new controller. bellow controller for create resource controller.

php artisan make:controller ProductController -resource

After bellow command you will find new file in this path app/Http/Controllers/ProductController.php.

In this controller will write code for following method:






So, let's copy bellow code and put on ProductController.php file.