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

You can download the Project : Download Project

Now We will use an API for getting all the data from website ( . To get API from this website you will have to set up an account on this site ( .

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

First we will create a App.js file


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
    const APP_KEY = "Your API Key";	 // Get API KEY from here
    useEffect(() => { getRecipes();},[]);
    const getRecipes = async()=> {
      const result = await Axios.get(`${APP_ID}&app_key=${APP_KEY}&from=0&to=3&calories=591-722&health=alcohol-free`)
    const onInputChange = e => {
  return (
    <div className="App">
       <Header mysearch={search} onInputChange = {onInputChange}/>
       <div className="container">
         <Recipes recipes={recpies}/>
export default App;

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


import React from "react";

const Header = props =&gt; {
    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>

export default Header;

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


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

 const Recipes = props =>{
     const { recipes }= props;
       <div class="row">
         { =>
              image = {recipe.recipe.image}
              ingredientLines = {recipe.recipe.ingredientLines}

export default Recipes;

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


import React from "react";

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

export default RecipeItems;

Now you will try this project on browser .

Leave a Reply

Your email address will not be published. Required fields are marked *