Laravel 8 React Js Fetch Api Get Data Example

Hello artisan in this laravel react js fetch data example tutorial i am going to show you how we can show our data from database and print them in our react component. To complete this react fetch api data example we need a table. For the example purpose i will use users table.

From this react laravel fetch api call example you will learn from scratch that how to call laravel api in react js. I will guide you how you can learn react js easily and completly with best practices. In this example i wll use useEffect hook and useState react hook to fecth our users table data. You can use axios but in this tutorial i will use fetch api.

So from this example you will also learn how we can fetch data in react js by using useState and useEffect hook. I will use User model and users table to show this example laravel api with react js tutorial.

Preview:

Let's start our example tutorial of react js laravel get request api example from scratch.

Step 1: Download Laravel

First, in this step to create laravel react axios get request example we need to open Terminal and run the following command to create a fresh Laravel project:

composer create-project laravel/laravel react-js

Step 2: Install Laravel UI

In this step we need to install Laravel ui. Because of we have to install react js in our Laravel app, for that we have to install Laravel ui package to get react support.

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: Create Route

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

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: Create React Component

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

resources/js/components/Example.js

Step 5: Create Blade File

All are set to devs, now in the final we need a blade file to render our react component. 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

Read also: Create Your First React Component In Laravel from Scratch

Hope it can help you.