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.
#laravel #laravel-8x #react-js #pagination