Making server request in React Components using Axios

Axios is Promise based HTTP client for the browser and node.js. This library can be used in react component to fetch data from RESTful APIs.

Installation
$ npm install axios --save
Example
import React, { Component } from 'react'  
var axios = require('axios');  
...
        axios.get('/api/family')
            .then(response => {
            console.log(response);
            console.log(response.data);
            this.setState({
              family: response.data
            });

            console.log("family :" + this.state.family);

            })
          .catch(function (error) {
            console.log(error);
          })
...
Use of arrow function

Arrow function does not attach ‘this’ to current object and hense old this is preserved. This is needed to update state and get it reflected on rendered object.

Sample project

Please refer to this Github repo for complete code
https://github.com/conquistadorjd/react-05-mysql-api

Live project.

Please refer to following heroku site for live demo
https://react-05-mysql-api.herokuapp.com/