Categories

Friday, March 29, 2024
#919814419350 therichposts@gmail.com
Laravl 5.7Reactjs

laravel 5.7 API call with ReactJs Axios Get Request

laravel 5.7 API call with ReactJs Axios Get Request - The Rich Post

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).

laravel 5.7 API call with ReactJs Axios Get Request

 

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.

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.