Open In App

How to create a food recipe app using ReactJS ?

Last Updated : 31 Aug, 2021
Like Article

We are going to make a food recipe app using React.js.


Approach: Here in this app we should have a component where we are going to show our food recipes. And we need to fetch all the required food recipes using a food recipe API. We will fetch the API data, store those data in a component structure using react hooks (useEffect, useState ).

Getting food recipe API KEY: First of all we will get all the food recipes by fetching the data from API.  For this, we will use the  platform called EDAMAM.  ( )

  • First we need to signup and  then go to the APIs section in the navbar.
  • Click start now in the Developer section.
  • Then go the Dashboard section(top right)>click Application>in the left side
  • There’s a Recipe Search API option > click view on that section
  • From there copy your Application ID and Application Keys and store it somewhere.

Creating the react app and installing all the required packages:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

Step 3: Now inside src/App.js file, provide tour own app id and app key in the place of <YOUR_APP_ID> and <YOUR_APP_KEY> which you have got from EDAMAM.


import React, { useEffect, useState } from 'react'
import './App.css';
import Recipe from './Recipe';
const App = () => {
  const APP_ID = <YOUR_APP_ID>;
  const APP_KEY = <YOUR_APP_KEY>;
  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("chicken");
  useEffect(() => {
  }, [query])
  const getRecipes = async () => {
    const response = await fetch
    const data = await response.json();
    // console.log(data);
  const updateSearch = e => {
  const getSearch = e => {
  return (
    <div className="App">
      <form className="search-form" onSubmit={getSearch}  >
        <input className="search-bar" type="text" value={search}
             onChange={updateSearch} />
        <button className="search-button" type="submit" >
      <div className="recipes">
        { => (
export default App;

Step 4: Make a component file in the src folder named “Recipe.js”(You can name it with whatever you wish to) which is imported in App.js. Edit src/Recipe.js file. This file contains the whole structure for recipe cards.


import React from "react";
import style from './recipe.module.css';
const Recipe = ({title,calories,image,ingredients}) =>{
        <div className={style.recipe}>
<p>Calories : {calories}</p>
            <img className={style.image} src={image} alt=""/>
export default Recipe;

Step 5: Now add styling inside src/App.css.


  min-height: 100vh;
 background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 5px 10px #979b91;
  background: #4da1ab;
  border: 5px solid white;
  border-radius: 8px;
  padding: 10px 20px;
  color: white;
  font-size: larger;
  margin: 0 0 0 10px;
.search-button:hover {
  background-color:#fa709a ;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

Step 6: Create a new file called “recipe.module.css” in src folder. This file is for adding style to  src/Recipe.js file.


    border-radius: 10px;
    box-shadow: 0px 5px 20px rgb(63, 60, 60);
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-image: linear-gradient(to right, 
        #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, 
        #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);
    align-items: center;
    min-width: 40%;
    font-family: 'Lobster', cursive;   
    border-radius: 10px;
    margin:0px 0px 20px 0px;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:


Like Article
Suggest improvement
Share your thoughts in the comments