Laravel React Js Pagination Example From Scratch

Hello artisan in this tutorial i am going to discuss about laravel react js pagination example tutorial. In this laravel react pagination tutorial, i will explain how you can create simple pagination in react js application. To create this react js pagination i will use react-js-pagination package.

From this tutorial you will learn how to create a simple and customizable react laravel pagination. I will use User model and users table to fetch data. First in this example i will create a react component and i will show you user list. Then i will create a react pagination with those users in Laravel application.

If you don't know how to create react js pagination with Laravel then this example tutorial is for you. Hope you will learn how to create react pagination in Laravel. I will show you from scratch so that you can understand better.

Preview:

Step 1: Download Laravel

I am going to start from scratch so download a fresh laravel project by this following command.

composer create-project laravel/laravel react-js

Step 2: Install React

In this step we need to install Laravel ui for installing react in Laravel. Because we are going to create laravel react js pagination. So install it by the following command.

composer require laravel/ui

After running the above command, run below command to install react

php artisan ui react

//then run

npm install

//then


npm run watch

Step 3: Add Route

Now in this third step we need to see our view file where we will render our react component to create laravel react pagination. So create route like below. Here we need to route, one for see view and another for fetch our users json data with pagination.

routes/web.php

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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


Route::get('/users', function (Request $request) {
    $users = User::paginate(10);
    return $users;
});

Step 4: Install React Pagination

To install react-js-pagination with npm: run the following command

npm install react-js-pagination

Step 5: Create React Component

Now in this fifthe step we have fecth our users data with pagination and i am going to use javascript fetch api. I will use async and await to call our fetch function. See the below code to understand. 

resources/js/components/Example.js

Step 6: Create Blade File

All are set to go devs, now in the final we need a blade file to render our react component and see how to works react pagination. So let's create our welcome blade file.

resources/views/welcome.blade.php

Now visit the following url afer running the command php artisan serve

Recommended : Laravel 8 React Js Fetch Api Get Data Example

Hope it can help you.