Laravel 5 - Simple CRUD Application Using ReactJS - Part 1

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.

Preview:

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:

.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

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.

<?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');
    }
}

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:

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

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.

routes/web.php

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

routes/api.php

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:

1)index()

2)store()

3)edit()

4)update()

5)destroy()

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

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.');
    }
}

Next we have following rest of step :

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

You can see above left step on next link, so click bellow next button.