Hello Devs,


In this tutorial, we are going to learn how to create crud(Create Read Update Delete) application with react js in PHP Laravel framework.

Follow this step by step guide given below:




Step 1 : Install Laravel 5.5

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



Step 2: Database Configuration .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
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

php artisan make:migration create_products_table


Run this code:

<?php


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) {
            $table->increments('id');
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }


    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}


Run this command:

php artisan make:model Product

app/Product.php

<?php


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

routes/web.php

Route::get('/', function () {
    return view('welcome');
});

routes/api.php

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



Step 5 : Create ProductController

Run this command:

php artisan make:controller ProductController -resource

app/Http/Controllers/ProductController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use App\Product;


class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::all();
        return response()->json($products);
    }


    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $product = new Product([
          'title' => $request->get('title'),
          'body' => $request->get('body')
        ]);
        $product->save();


        return response()->json('Product Added Successfully.');
    }


    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $product = Product::find($id);
        return response()->json($product);
    }


    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $product = Product::find($id);
        $product->title = $request->get('title');
        $product->body = $request->get('body');
        $product->save();


        return response()->json('Product Updated Successfully.');
    }


    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
      $product = Product::find($id);
      $product->delete();


      return response()->json('Product Deleted Successfully.');
    }
}

After this do the following steps:

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


Check Laravel 5 - Simple CRUD Application Using ReactJS - Part 2&3 on Rathorji.in


I hope this example helps you.