Example of API with React in JaskaranSingh4704/laravel-react

import React, { useLayoutEffect } from "react"
import PropTypes from "prop-types"

import Header from "./components/Header"
import Articles from "../../../../common/articles/listing"

import { articleListRequest } from '../../../article/service'

export default function Page({ dispatch }) {
  useLayoutEffect(() => {
    dispatch(articleListRequest({ url: 'api/v1/articles/published' }))
  }, [])

  return <div>
    <Header/>
    <Articles/>
  </div>
}

Page.displayName = 'HomePage'
Page.propTypes = {
  dispatch: PropTypes.func.isRequired,
}

use Illuminate\Support\Facades\Route;

Route::get('published', 'ArticleController@publishedArticles')->name('articles.published.index');
//

use App\Models\Article;
use App\Http\Controllers\Controller;

class ArticleController extends Controller
{
    //
    public function publishedArticles()
    {
        return Article::loadAllPublished();
    }
    //
}

use Illuminate\Database\Eloquent\Model;
use Illuminate\Contracts\Pagination\Paginator;

class Article extends Model
{
    //
    public static function loadAllPublished(): Paginator
    {
        return static::with([
            'user' => function (BelongsTo $query) {
                $query->select('id', 'name');
            },
        ])
            ->latest()
            ->published()
            ->paginate();
    }
    //
}