We will use MVC pattern with following structure.

src
 --js
   --models
     Search.js
   --views
     searchView.js
   index.js    





We will make simple api call to food2fork.com to get some recipes and we are using webpack (see previous posts). We need to install axios from npm (npm install axios --save) - this is handling http requests better than fetch function, which doesnt work correctly in some older browsers. Also we are using proxy here, because otherwise it will not work for use from our local server because of CORS.
models/Search.js

import axios from 'axios';

export default class Search {
  constructor(query) {
    this.query = query;
  }

  async getResults() {
    const proxy = 'https://cors-anywhere.herokuapp.com/';
    const key = '.......'   //register to food2fork to get api key
    try {
      const res = await axios('${proxy}http://food2fork.com/api/search?key=${key}&q=${this.query}');
      this.result = res.data.recipes;
      console.log(this.result);
    } catch (error) {
      alert(error);
    }
  }
}



index.js

import Search from './models/Search';

const search = new Search('pizza');
search.getResults();