How to use ReactJS in Laravel

have a page as a root for react and do not forget to add every react page in web.php
Route::view('/courselist', 'app');
all your folders inside src should be copied into resources/js/react. then implement this in webpack.mix.js:
.js('resources/js/react', 'public/js/reactJs').react()
https://stackoverflow.com/a/66545875/13266927

To can use React Js with Laravel By creating Api's in laravel and later on integrating those APIs in react js project using Axios() or fetch() in react js. Steps to do it as follows:

1. Create Database in MySQL Database let's say using the name as "employees"
2. Install laravel, Create a new project in laravel and create a controller using the command php artisan make:controller EmployeeController
3. Create Route in routes folder and inside it in api.php import controller using use App\Http\Controllers\EmployeeController; and then Create a route using: Route::post('/employee',[EmployeeController::class,'employee']);
4. Create a function in EmployeeController named employee and controller will be look like this as below:

Controller

namespace App\Http\Controllers;

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

class EmployeeController extends Controller
{
    function employee(Request $req){
        $employee = new Employee;
        $employee -> TName=$req->input("TName");
        $employee -> TID=$req->input("TID");
        $employee -> Cnic=$req->input("Cnic");
        $employee -> Email=$req->input("Email");
        $employee -> Designation=$req->input("Designation");
        $employee -> DId=$req->input("DId");
        $employee -> Gender=$req->input("Gender");
        $employee -> Address=$req->input("Address");
        $employee -> PhNumber=$req->input("PhNumber");
        $employee -> Skill=$req->input("Skill");
        $employee->save();
        return $employee;
    }
}

Model

namespace App\Models;

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

class Employee extends Model
{
    use HasFactory;
    public $timestamps=false;
}

5. After this test API http://127.0.0.1:8000/api/employee which was declared in api.php /employee in postman tool then later us this in react js project as below:

// import { useNavigate } from "react-router-dom";
// import { useState, useEffect } from "react";
import { useState } from "react";
import "./assignsubjectteacher.css";
// import Header from "./Header.js";

function Assignsubjectteacher() {
  const [TName, setTName] = useState("");
  const [TID, setTID] = useState("");
  const [Cnic, setCnic] = useState("");
  const [Email, setEmail] = useState("");
  const [Designation, setDesignation] = useState("");
  const [DId, setDId] = useState("");
  const [Gender, setGender] = useState("");
  const [Address, setAddress] = useState("");
  const [PhNumber, setPhNumber] = useState("");
  // const [IsHOD, setIsHOD] = useState("");
  const [Skill, setSkill] = useState("");

  async function assignsubjectteacher() {
    // console.warn(name, department);

    let item = {
      TName,
      TID,
      Cnic,
      Email,
      Designation,
      DId,
      Gender,
      Address,
      PhNumber,
      // IsHOD,
      Skill,
    };
    // console.log(item);
    let result = await fetch("http://127.0.0.1:8000/api/employee", {
      method: "POST",
      body: JSON.stringify(item),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });
    result = await result.json();
    localStorage.setItem("user-info", JSON.stringify(result));
    console.warn(result);
  }
  return (
    <>
      <div className="col-sm-8 offset-sm-3">
        <div className="mt-10 col-sm-9 center">
          <br />
          <br />
          <h2>Add Faculty</h2>
          <input
            type="text"
            placeholder="Teacher's Name"
            className="col-sm-12 form-control"
            onChange={(e) => setTName(e.target.value)}
          />
          <br />
          <br />
          <input
            type="text"
            placeholder="Teacher's ID"
            className="col-sm-4 form-control"
            onChange={(e) => setTID(e.target.value)}
          />

          <input
            type="text"
            placeholder="Enter CNIC"
            className="col-sm-4 form-control"
            onChange={(e) => setCnic(e.target.value)}
          />
          <input
            type="email"
            placeholder="Enter Email"
            className="col-sm-4 form-control"
            onChange={(e) => setEmail(e.target.value)}
          />
          <br />
          <br />
          <input
            type="text"
            placeholder="Enter Designation"
            className="col-sm-4 form-control"
            onChange={(e) => setDesignation(e.target.value)}
          />

          <input
            type="text"
            placeholder="Enter DId"
            className="col-sm-4 form-control"
            onChange={(e) => setDId(e.target.value)}
          />

          <select
            placeholder="Select Gender"
            className="col-sm-4 form-control"
            onChange={(e) => setGender(e.target.value)}
          >
            <option>Select Gender</option>
            <option>Male</option>
            <option>Female</option>
          </select>
          <br />

          <input
            type="text"
            placeholder="Address"
            className="form-control"
            onChange={(e) => setAddress(e.target.value)}
          />
          <br />
          <br />
          <input
            type="tel"
            placeholder="Phone"
            className="col-sm-6 form-control"
            onChange={(e) => setPhNumber(e.target.value)}
            pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"
          />
          <input
            type="text"
            placeholder="Enter Skill"
            className="col-sm-6 form-control"
            onChange={(e) => setSkill(e.target.value)}
          />
          <br />
          <br />
          {/* <label for="IsHOD">IsHOD</label> */}
          {/* <input
            id="IsHOD"
            type="checkbox"
            onChange={(e) => setIsHOD(e.target.value)}
          /> */}
          <br />
          <br />
          <button onClick={assignsubjectteacher} className="btn btn-danger">
            Add
          </button>
        </div>
      </div>
    </>
  );
}
export default Assignsubjectteacher;