In React we have used axios a promised-based HTTP client for JavaScript, sweetalert2, hook's such as useEffect, useState And routing module such as useNavigate to redirect to a specified URL, useParams to capture URL parameter.
* import React, { useEffect, useState } from "react";
* import { useNavigate, useParams } from 'react-router-dom';
* import axios from 'axios';
* import Swal from 'sweetalert2';
composer create-project laravel/laravel --prefer-dist laravel-react-app
For CORS authentication we also have to install fruitcake/laravel-cors package by below commend. CORS(Cross Origin Resource Sharing) is a type of HTTP request that allow UI to communicate the backend or any other API of different domain. Without fruitcake/laravel-cors package you can't communicate http://127.0.0.1:8000/ URL.
composer require fruitcake/laravel-cors
Create a controller by below commend.
php artisan make:controller your_cntrl_name
Make sure the installed controller is under a /api folder. In case of making API it is necessary to put that file inside api folder otherwise it can't communicate to routes/api.php file. You also have to specify the controller path in api.php such as:
use App\Http\Controllers\api\your_cntrl_name
And specify the parent controller path in your installed controller file by:-
use App\Http\Controllers\Controller;
I have use direct query builder not ORM.
use Illuminate\Support\Facades\DB;
So that you can execute stored procedure in side this DB facade.
$name=$request->enter_name;
$gender=$request->enter_gender;
$insert = DB::insert('CALL insert_react_laravel(?,?)',[$name,$gender]);
Check the api in postman by below routes.
http://127.0.0.1:8000/api/v1/data/insert-data
http://127.0.0.1:8000/api/v1/data/display
http://127.0.0.1:8000/api/v1/data/delete/${id}
http://127.0.0.1:8000/api/v1/data/edit/${id}
http://127.0.0.1:8000/api/v1/data/save/${id}
Finally integrate all to React and ready for a CRUD operation.