laravel 5.7 API call with ReactJs Axios Get Request

Hello to all, welcome to therichpost.com. In this post, I will tell you, laravel 5.7 API call with ReactJs Axios Get Request. 

Laravel 5.7 has been just released now and no need any introduction. ReactJs is also very famous for SPA(Single Page Application).

In this post, I am getting the data from Laravel Api call and show that data in Reactjs Application With Axios get request.

Here are the following steps for laravel 5.7 API call with ReactJs Axios Get Request, you need to follow:

1. First, you need to install fresh Reactjs and here is the link:

https://therichpost.com/install-reactjs-easy-simple

2. Second, after successfully Installing Reactjs, you need to install axios into your react helloreact folder  (which you can see in Points 1 Link)  and below is the command you need to run into your terminal:

Axios is Http client based service.

npm install axios

3. Here is code for Reactjs src/App.js file:

In this file, I have added the full code for axios get request and show the data.

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
constructor(props) {
    super(props);

    this.state = {
    posts: []
    };
}

//Lifecycle hook
componentDidMount() {
    // Get request for laravel api call
    axios.get('http://localhost/laravel57/public/api/sample-restful-apis')
      .then(response => { const posts = response.data; 
        this.setState({ posts : response.data });
      });


  }
  render() {
     
    return (
      <div className="App">
      <ul>
       {this.state.posts.name}
       {this.state.posts.domain}
      </ul>
      </div>
    );
  }
}

export default App;

 componentDidMount() is Lifecycle hook, In it, we will fetch the data

Axios get(url) gives us response object. After it, we get response data with response.data and assign this to posts variable.

4. Laravel API code and you need to add routes/api.php:

I have just added test API code in it.

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::get('sample-restful-apis', function()
{
return response()->json([
'name' => 'therichpost',
'domain' => 'therichpost.com'
]);
});

 Now, you are done with the Laravel and Reactjs api working and If you have any query related to this, then please comment below or ask questions.