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

Views

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.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

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

Positive SSL