使用 React 构建食谱查找器网站

src/│├── components/│   └── navbar.js│├── pages/│   ├── home.js│   ├── about.js│   ├── trending.js│   ├── newrecipe.js│   ├── recipedetail.js│   ├── contact.js│   └── favorites.js│├── app.js├── index.js├── app.css└── index.css

   git clone https://github.com/abhishekgurjar-in/recipe-finder.git   cd recipe-finder

   npm install

   npm start

import react from "react";import navbar from "./components/navbar";import { route, routes } from "react-router-dom";import "./app.css";import home from "./pages/home";import about from "./pages/about";import trending from "./pages/trending";import newrecipe from "./pages/newrecipe";import recipedetail from "./pages/recipedetail";import contact from "./pages/contact";import favorites from "./pages/favorites";const app = () =&gt; {  return (          <navbar></navbar><routes><route path="/" element="{&lt;home"></route>} /&gt;        <route path="/trending" element="{&lt;trending"></route>} /&gt;        <route path="/new-recipe" element="{&lt;newrecipe"></route>} /&gt;        <route path="/new-recipe" element="{&lt;newrecipe"></route>} /&gt;        <route path="/recipe/:id" element="{&lt;recipedetail"></route>} /&gt;        <route path="/about" element="{&lt;about"></route>} /&gt;        <route path="/contact" element="{&lt;contact/">} /&gt;        <route path="/favorites" element="{&lt;favorites/">} /&gt;      </route></route></routes><div classname="footer">   <p>made with ❤️ by abhishek gurjar</p>   </div>    &gt;  );};export default app;

import react, { usestate, useref, useeffect } from "react";import { iosearch } from "react-icons/io5";import { link } from "react-router-dom";const home = () =&gt; {  const [query, setquery] = usestate("");  const [recipe, setrecipe] = usestate([]);  const recipesectionref = useref(null);  const api_id = "2cbb7807";  const api_key = "17222f5be3577d4980d6ee3bb57e9f00";  const getrecipe = async () =&gt; {    if (!query) return; // add a check to ensure the query is not empty    const response = await fetch(      `https://api.edamam.com/search?q=${query}&amp;app_id=${api_id}&amp;app_key=${api_key}`    );    const data = await response.json();    setrecipe(data.hits);    console.log(data.hits);  };  // use useeffect to detect changes in the recipe state and scroll to the recipe section  useeffect(() =&gt; {    if (recipe.length &gt; 0 &amp;&amp; recipesectionref.current) {      recipesectionref.current.scrollintoview({ behavior: "smooth" });    }  }, [recipe]);  // handle key down event to trigger getrecipe on enter key press  const handlekeydown = (e) =&gt; {    if (e.key === "enter") {      getrecipe();    }  };  return (    <div classname="home">      <div classname="home-main">        <div classname="home-text">          <h1>find your favourite recipe</h1>        </div>        <div classname="input-box">          <span>            <input type="text" placeholder="enter recipe" onchange="{(e)"> setquery(e.target.value)}              onkeydown={handlekeydown} // add the onkeydown event handler            /&gt;          </span>          <iosearch classname="search-btn" onclick="{getrecipe}"></iosearch></div>      </div>      <div ref="{recipesectionref}" classname="recipes">        {recipe.map((item, index) =&gt; (          <div key="{index}" classname="recipe">            @@##@@            <h2 classname="label">{item.recipe.label}</h2>            <link to='{`/recipe/${item.recipe.uri.split("_")[1]}`}'><button classname="button">view recipe</button>                      </div>        ))}      </div>    </div>  );};export default home;

import react, { usestate, useeffect } from "react";import { link } from "react-router-dom";const trending = () =&gt; {  const [trendingrecipes, settrendingrecipes] = usestate([]);  const [loading, setloading] = usestate(true);  const [error, seterror] = usestate(null);  const api_id = "2cbb7807";  const api_key = "17222f5be3577d4980d6ee3bb57e9f00";  useeffect(() =&gt; {    const fetchtrendingrecipes = async () =&gt; {      try {        const response = await fetch(          `https://api.edamam.com/api/recipes/v2?type=public&amp;q=trending&amp;app_id=${api_id}&amp;app_key=${api_key}`        );        if (!response.ok) {          throw new error("network response was not ok");        }        const data = await response.json();        settrendingrecipes(data.hits);        setloading(false);      } catch (error) {        seterror("failed to fetch trending recipes");        setloading(false);      }    };    fetchtrendingrecipes();  }, []);  if (loading)    return (      <div classname="loader-section">        <div classname="loader"></div>      </div>    );  if (error) return <div>{error}</div>;  return (    <div classname="trending-recipe">      <div classname="trending-recipe-main">        <div classname="trending-recipe-text">          <h1>trending recipes</h1>        </div>      </div>      <div classname="recipes">        {trendingrecipes.map((item, index) =&gt; (          <div key="{index}" classname="recipe">            @@##@@            <h2 classname="label">{item.recipe.label}</h2>            <link to='{`/recipe/${item.recipe.uri.split("_")[1]}`}'><button classname="button">view recipe</button>                      </div>        ))}      </div>    </div>  );};export default trending;

import react, { usestate, useeffect } from "react";import { link } from "react-router-dom";const newrecipe = () =&gt; {  const [newrecipes, setnewrecipes] = usestate([]);  const [loading, setloading] = usestate(true);  const [error, seterror] = usestate(null);  const api_id = "2cbb7807";  const api_key = "17222f5be3577d4980d6ee3bb57e9f00";  useeffect(() =&gt; {    const fetchnewrecipes = async () =&gt; {      try {        const response = await fetch(          `https://api.edamam.com/api/recipes/v2?type=public&amp;q=new&amp;app_id=${api_id}&amp;app_key=${api_key}`        );        if (!response.ok) {          throw new error("network response was not ok");        }        const data = await response.json();        setnewrecipes(data.hits);        setloading(false);      } catch (error) {        seterror("failed to fetch new recipes");        setloading(false);      }    };    fetchnewrecipes();  }, []);  if (loading)    return (      <div classname="loader-section">        <div classname="loader"></div>      </div>    );  if (error) return <div>{error}</div>;  return (    <div classname="new-recipe">      <div classname="new-recipe-main">        <div classname="new-recipe-text">          <h1>new recipes</h1>        </div>      </div>      <div classname="recipes">        {newrecipes.map((item, index) =&gt; (          <div key="{index}" classname="recipe">            @@##@@            <h2 classname="label">{item.recipe.label}</h2>            <link to='{`/recipe/${item.recipe.uri.split("_")[1]}`}'><button classname="button">view recipe</button>                      </div>        ))}      </div>    </div>  );};export default newrecipe;

import react, { usestate, useref, useeffect } from "react";import { iosearch } from "react-icons/io5";import { link } from "react-router-dom";const home = () =&gt; {  const [query, setquery] = usestate("");  const [recipe, setrecipe] = usestate([]);  const recipesectionref = useref(null);  const api_id = "2cbb7807";  const api_key = "17222f5be3577d4980d6ee3bb57e9f00";  const getrecipe = async () =&gt; {    if (!query) return; // add a check to ensure the query is not empty    const response = await fetch(      `https://api.edamam.com/search?q=${query}&amp;app_id=${api_id}&amp;app_key=${api_key}`    );    const data = await response.json();    setrecipe(data.hits);    console.log(data.hits);  };  // use useeffect to detect changes in the recipe state and scroll to the recipe section  useeffect(() =&gt; {    if (recipe.length &gt; 0 &amp;&amp; recipesectionref.current) {      recipesectionref.current.scrollintoview({ behavior: "smooth" });    }  }, [recipe]);  // handle key down event to trigger getrecipe on enter key press  const handlekeydown = (e) =&gt; {    if (e.key === "enter") {      getrecipe();    }  };  return (    <div classname="home">      <div classname="home-main">        <div classname="home-text">          <h1>find your favourite recipe</h1>        </div>        <div classname="input-box">          <span>            <input type="text" placeholder="enter recipe" onchange="{(e)"> setquery(e.target.value)}              onkeydown={handlekeydown} // add the onkeydown event handler            /&gt;          </span>          <iosearch classname="search-btn" onclick="{getrecipe}"></iosearch></div>      </div>      <div ref="{recipesectionref}" classname="recipes">        {recipe.map((item, index) =&gt; (          <div key="{index}" classname="recipe">            @@##@@            <h2 classname="label">{item.recipe.label}</h2>            <link to='{`/recipe/${item.recipe.uri.split("_")[1]}`}'><button classname="button">view recipe</button>                      </div>        ))}      </div>    </div>  );};export default home;

import react, { usestate, useeffect } from "react";import { link } from "react-router-dom";const favorites = () =&gt; {  const [favorites, setfavorites] = usestate([]);  useeffect(() =&gt; {    const savedfavorites = json.parse(localstorage.getitem("favorites")) || [];    setfavorites(savedfavorites);  }, []);  if (favorites.length === 0) {    return <div>no favorite recipes found.</div>;  }  return (    <div classname="favorites-page ">      <div classname="favorite-recipes-text">        <h1>favorite recipes</h1>      </div>      <ul classname="recipes">        {favorites.map((recipe) =&gt; (          <div classname="recipe">            @@##@@            <h2 classname="label">{recipe.label}</h2>            <link to='{`/recipe/${recipe.uri.split("_")[1]}`}'><button classname="button">view recipe</button>                      </div>        ))}      </ul></div>  );};export default favorites;

import react, { usestate, useeffect } from "react";import { useparams } from "react-router-dom";const recipedetail = () =&gt; {  const { id } = useparams(); // use react router to get the recipe id from the url  const [recipe, setrecipe] = usestate(null);  const [loading, setloading] = usestate(true);  const [error, seterror] = usestate(null);  const [favorites, setfavorites] = usestate([]);  const api_id = "2cbb7807";  const api_key = "17222f5be3577d4980d6ee3bb57e9f00";  useeffect(() =&gt; {    const fetchrecipedetail = async () =&gt; {      try {        const response = await fetch(          `https://api.edamam.com/api/recipes/v2/${id}?type=public&amp;app_id=${api_id}&amp;app_key=${api_key}`        );        if (!response.ok) {          throw new error("network response was not ok");        }        const data = await response.json();        setrecipe(data.recipe);        setloading(false);      } catch (error) {        seterror("failed to fetch recipe details");        setloading(false);      }    };    fetchrecipedetail();  }, [id]);  useeffect(() =&gt; {    const savedfavorites = json.parse(localstorage.getitem("favorites")) || [];    setfavorites(savedfavorites);  }, []);  const addtofavorites = () =&gt; {    const updatedfavorites = [...favorites, recipe];    setfavorites(updatedfavorites);    localstorage.setitem("favorites", json.stringify(updatedfavorites));  };  const removefromfavorites = () =&gt; {    const updatedfavorites = favorites.filter(      (fav) =&gt; fav.uri !== recipe.uri    );    setfavorites(updatedfavorites);    localstorage.setitem("favorites", json.stringify(updatedfavorites));  };  const isfavorite = favorites.some((fav) =&gt; fav.uri === recipe?.uri);  if (loading)    return (      <div classname="loader-section">        <div classname="loader"></div>      </div>    );  if (error) return <div>{error}</div>;  return (    <div classname="recipe-detail">      {recipe &amp;&amp; (                <div classname="recipe-details-text">          <h1>{recipe.label}</h1>          <h2>ingredients:</h2>          <ul>            {recipe.ingredientlines.map((ingredient, index) =&gt; (              <li key="{index}">{ingredient}</li>            ))}          </ul><h2>instructions:</h2>          {/* note: edamam api doesn't provide instructions directly. you might need to link to the original recipe url */}          <p>            for detailed instructions, please visit the{" "}             <a href="%7Brecipe.url%7D" target="_blank" rel="noopener noreferrer">              recipe instruction            </a>          </p>          {isfavorite ? (            <button classname="fav-btn" onclick="{removefromfavorites}">remove from favorites</button>          ) : (            <button classname="fav-btn" onclick="{addtofavorites}">add to favorites</button>          )}        </div>        <div classname="recipe-details-img">        @@##@@        </div>        &gt;      )}    </div>  );};export default recipedetail;

import react, { usestate } from 'react';const contact = () =&gt; {  const [name, setname] = usestate('');  const [email, setemail] = usestate('');  const [message, setmessage] = usestate('');  const [showpopup, setshowpopup] = usestate(false);  const handlesubmit = (e) =&gt; {    e.preventdefault();    // prepare the contact details object    const contactdetails = { name, email, message };    // save contact details to local storage    const savedcontacts = json.parse(localstorage.getitem('contacts')) || [];    savedcontacts.push(contactdetails);    localstorage.setitem('contacts', json.stringify(savedcontacts));    // log the form data    console.log('form submitted:', contactdetails);    // clear form fields    setname('');    setemail('');    setmessage('');    // show popup    setshowpopup(true);  };  const closepopup = () =&gt; {    setshowpopup(false);  };  return (    <div classname="contact">      <h1>contact us</h1>      <form onsubmit="{handlesubmit}" classname="contact-form">        <div classname="form-group">          <label htmlfor="name">name:</label>          <input type="text" id="name" value="{name}" onchange="{(e)"> setname(e.target.value)}            required          /&gt;        </div>        <div classname="form-group">          <label htmlfor="email">email:</label>          <input type="email" id="email" value="{email}" onchange="{(e)"> setemail(e.target.value)}            required          /&gt;        </div>        <div classname="form-group">          <label htmlfor="message">message:</label>          <textarea id="message" value="{message}" onchange="{(e)"> setmessage(e.target.value)}            required          &gt;</textarea></div>        <button type="submit">submit</button>      </form>      {showpopup &amp;&amp; (        <div classname="popup">          <div classname="popup-inner">            <h2>thank you!</h2>            <p>your message has been submitted successfully.</p>            <button onclick="{closepopup}">close</button>          </div>        </div>      )}    </div>  );};export default contact;

import React from 'react';const About = () =&gt; {  return (    <div classname="about">      <div classname="about-main">        <h1>About Us</h1>        <p>          Welcome to Recipe Finder, your go-to place for discovering delicious recipes from around the world!        </p>        <p>          Our platform allows you to search for recipes based on your ingredients or dietary preferences. Whether you're looking for a quick meal, a healthy option, or a dish to impress your friends, we have something for everyone.        </p>        <p>          We use the Edamam API to provide you with a vast database of recipes. You can easily find new recipes, view detailed instructions, and explore new culinary ideas.        </p>        <p>          <strong>Features:</strong>          </p><ul><li>Search for recipes by ingredient, cuisine, or dietary restriction.</li>            <li>Browse new and trending recipes.</li>            <li>View detailed recipe instructions and ingredient lists.</li>            <li>Save your favorite recipes for quick access.</li>          </ul><p>          Our mission is to make cooking enjoyable and accessible. We believe that everyone should have the tools to cook great meals at home.        </p>      </div>    </div>  );};export default About;