How to integrate the RESTfull api with the react app

channels.js

//add this to feather's src/channels.js around line 53
app.service(‘products’)
   .publish(‘created’, () => app.channel(‘anonymous’));

CreateProductForm.js

// src/CreateProductForm.js
import React, { Component } from 'react';
import { Form, Button} from 'semantic-ui-react';
import client from './feathers'
export default class CreateProductForm extends Component {
state = {
    product:{
            name:'',
            description:'',
            price:null
    }
};
onChange = (e, { name:value }) => 
                             this.setState((prevState)=>({
                             ...prevState.product,
                              [name]:value
                            }));
onSubmit =()=>{ //I am skipping validation
const{product}=this.state 
client.service('products').create(product)
}
render() {
const { product:{name,description,price} } = this.state;
   return (
   <Form onSubmit={this.onSubmit}>
     <Form.Input 
      name='name' 
      value={name} 
      placeholder='Enter Product  Name' 
      onChange={this.onChange}
     />
     <Form.Text
      name='description' 
      value={description}  
      placeholder='Enter Product Description' 
      onChange={this.onChange}
     />
     <Form.Input 
      name='price' 
      value={price}  
      placeholder='Enter Product Price' 
      onChange={this.onChange}
     />
    <Button type='submit'>Send</Button>   
   </Form>
 );
}
}

DisplayGrid.js

import React,{Component} from 'react'
import { Card } from 'semantic-ui-react';
import client from './feathers'
export default class DisplayGrid extends Component {
state = {
products;[]
};
componentDidMount(){
   this.fetchFromRemote()
}
fetchFromRemote =()=>client.service('products').find({
              query: {
                    $sort: {
                        price: -1 // sort them by price descending
                      }
                   }
              }).then(
                    res=>this.setState({products:res.data})
               )
render() {
const { products } = this.state;
   return (
   <Card.Group>
      {products.map(
product=> <Card>
                 <Card.Content>
                     <Card.Header>
                       {product.name}
                     </Card.Header>              
                     <Card.Description>
                       {product.description}
                     </Card.Description>
                     <Card.Meta>
                       {product.price}
                     </Card.Meta>
                  </Card.Content>
            </Card>
)}
   </Card.Group>
 );
}
}

DisplayGridEdited.js

// src/DisplayGrid.js
import { Card } from 'semantic-ui-react';
import client from './feathers'
export default class DisplayGrid extends Component {
state = {
products;[]
};
componentDidMount(){
  this.fetchFromRemote()
  client.service('products').on('created'()=>this.fetchFromRemote());
}
fetchFromRemote =()=>client.service('products').find({
              query: {
                    $sort: {
                        price: -1 // sort them by price descending
                      }
                   }
              }).then(
                    res=>this.setState({products:res.data})
               )
render() {
const { products } = this.state;
   return (
   <Card.Group>
      {products.map(
product=> <Card>
                 <Card.Content>
                     <Card.Header>
                       {product.name}
                     </Card.Header>              
                     <Card.Description>
                       {product.description}
                     </Card.Description>
                     <Card.Meta>
                       {product.price}
                     </Card.Meta>
                  </Card.Content>
            </Card>
)}
   </Card.Group>
 );
}
}

feathers.js

import io from 'socket.io-client'
import feathers from '@feathersjs/client'
// Socket.io is exposed as the `io` global.
const socket = io('http://localhost:3030')
// @feathersjs/client is exposed as the `feathers` global.
const client = feathers()
               .configure(feathers.socketio(socket))
               //incase we later have to do authentication
               .configure(
          feathers.authentication({storage: window.localStorage})
         )
export default client