ReactJs Food Recipe Web App

Is React a Frontend or Backend library? Created and maintained by Facebook, React is a front-end library that runs on a browser. So We will make a ReactJs Food Recipe Web App

Learn more about ReactJS please visit its official website https://reactjs.org/

You can download the Project : Download Project

Now We will use an API for getting all the data from website (https://developer.edamam.com/) . To get API from this website you will have to set up an account on this site (https://developer.edamam.com/) .

So first install some packages for this project ( npm install axios and npm instal lweb-vitals).

First we will create a App.js file

App.js

import './App.css';
import React, {useState , useEffect} from 'react';
import Header from './components/Header';
import Recipes from './components/Recipes';
import Axios from 'axios';
function App() {
    const [search,setSearch] = useState("chicken");
    const [recpies,setRecipes] = useState([]);
 
    const APP_ID = "Your ID";     // Get API ID from here https://developer.edamam.com/
    const APP_KEY = "Your API Key";	 // Get API KEY from here https://developer.edamam.com/
    useEffect(() => { getRecipes();},[]);
         
    const getRecipes = async()=> {
      const result = await Axios.get(`https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=3&calories=591-722&health=alcohol-free`)
        setRecipes(result.data.hits);
    }
    const onInputChange = e => {
       console.log(e.target.value);
    }
  return (
    <div className="App">
       <Header mysearch={search} onInputChange = {onInputChange}/>
       <div className="container">
         <Recipes recipes={recpies}/>
       </div>  
    </div>
  );
}
export default App;

Now make a folder with name components ( src/components/Header.js )

Header.js

import React from "react";


const Header = props => {
    const {search, onInputChange}= props;

    return (
       <div classname="jumbotron py-5" style="{{backgroundColor:&quot;#969696;&quot;}}">  
          <h4 classname="display-4">
          <span classname="material-icons brand-icon">fastfood</span> Food Recipe</h4>
          
            <div class="input-group mb-3  w-50 mx-auto">
              <input type="text" class="form-control" placeholder="Search Recipie" value="{search}" onchange="{onInputChange}">
              <button class="btn btn-light">Search Recipe</button>
            </div>
        </div>
    );
};

export default Header;

Now we will create a file insode the components folder ( src/components/Recipes.js )

Recipes.js

import React from "react";
import RecipeItems from './RecipeItems'

 const Recipes = props =>{
     const { recipes }= props;
     return(
       <div class="row">
         {recipes.map(recipe =>
            <RecipeItems 
              name={recipe.recipe.label}
              image = {recipe.recipe.image}
              ingredientLines = {recipe.recipe.ingredientLines}
              />
          )}
       </div>    
     );
 };

export default Recipes;

Now we will create another file in same folder ( src/components/RecipeItems.js )

RecipeItems.js

import React from "react";

   const RecipeItems = props => {
       const { name, image, ingredientLines} = props;
       return(
          <div class="col-md-4">
                  <div class="card">
                    <img src={image} class="img-fluid"/>
                      <div class="card-body">    
                          <h4>{name}</h4>
                      </div>    
                      <ul class="list-group">
                       {ingredientLines.map(ingredient => (
                         <li class="list-group-item">
                             {ingredient}
                        </li>
                        ))}
                      </ul>
                  </div>    
                </div>      
       );};

export default RecipeItems;

Now you will try this project on browser .