laravel and reactjs crud tutorial 2022 Step by step

Hi Devs so today we are going to create Employee management Crud using "React and Laravel".

For this you can follow the video guide. mainly we are going to set up react application in laravel project so below given commands are important.

Creating laravel project

Follow this link

or you can create project using these commands

composer create-project laravel/laravel example-app

cd example-app

php artisan serve

Enabling React js in Laravel app

// Used to do using before Laravel 7

php artisan preset react

// After laravel 7

composer require laravel/ui

php artisan ui react

In Guide files look like this

web.php

<?php


use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmployeesController;





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


Auth::routes();


Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');


Route::get('/get/employee/list', 
        [EmployeesController::class, 'getEmployeeList'])->name('employee.list');


Route::post('/get/individual/employee/details',
        [EmployeesController::class, 'getEmployeeDetails'])->name('employee.details');


Route::post('/update/employee/data',        
    [EmployeesController::class, 'updateEmployeeData']);



Route::delete('/delete/employee/data/{employee}',
    [EmployeesController::class, 'destroy']);


Route::post('/store/employee/data',
    [EmployeesController::class, 'store']);

EmployeeController code is here

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use Log;
use Exception;
use App\Models\Employee;


class EmployeesController extends Controller
{
    // Get Employee List from database.


    public function getEmployeeList()
    {
        try
        {
            $employees = Employee::orderBy('id', 'DESC')->get();
            return response()->json($employees);
        }
        catch(Exception $e)
        {
            Log::error($e);
        }
    }


    /**
     * Get individual employee details.
     */
    public function getEmployeeDetails(Request $request)
    {
        try
        {
            $employeeData = Employee::findOrFail($request->get('employeeId'));
            return response()->json($employeeData);
        }
        catch(Exception $e)
        {
            Log::error($e);
        }
    }



    /**
     * Updating employee data.
     */
    public function updateEmployeeData(Request $request)
    {
        try
        {
            $employeeId     = $request->get('employeeId');
            $employeeName   = $request->get('employeeName');
            $employeeSalary = $request->get('employeeSalary');


            Employee::where('id', $employeeId)->update([
                'employee_name'   =>  $employeeName,
                'salary' =>  $employeeSalary
            ]);


            return response()->json([
                'employee_name'   =>  $employeeName,
                'salary' =>  $employeeSalary
            ]);
        
        }
        catch(Exception $e)
        {
            Log::error($e);
        }
    }



    // Deleting Employee.


    public function destroy(Employee $employee)
    {
        try
        {
            $employee->delete(); 
        }
        catch(Exception $e)
        {
            Log::error($e);
        }
    }



    // Storing new employee.


    public function store(Request $request)
    {
        try
        {
            $employeeName = $request->get('employeeName');
            $employeeSalary = $request->get('employeeSalary');


            Employee::create([
                'employee_name'   =>  $employeeName,
                'salary'          =>  $employeeSalary
            ]);


            return response()->json([
                'employee_name'   =>  $employeeName,
                'salary' =>  $employeeSalary
            ]);
        }
        catch(Exception $e)
        {
            Log::error($e);
        }
    }
}

Employee Model

<?php


namespace App\Models;


use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;


class Employee extends Model
{
    use HasFactory;


    protected $fillable = [
        'employee_name',
        'salary',
    ];
}

For react js setup requires following files

"employeeApp\resources\js\app.js"

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */


require('./bootstrap');


/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */


require('./index');

"employeeApp\resources\js\index.js"

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';






if (document.getElementById('employeeeApp')) {
    ReactDOM.render(<App />, document.getElementById('employeeeApp'));
}

You can download complete app code.