如何使用 ReactJS 创建食物食谱应用程序？

我们将使用 React.js 制作一个食物食谱应用程序。

先决条件：

• 反应钩子
• 反应组件
• JavaScript ES6
• API
• CSS

方法：在这个应用程序中，我们应该有一个组件，我们将在其中展示我们的食物食谱。我们需要使用食物食谱 API 获取所有必需的食物食谱。我们将获取 API 数据，使用反应挂钩（useEffect、useState）将这些数据存储在组件结构中。

获取菜谱 API KEY：首先，我们将通过从API中获取数据来获取所有菜谱。为此，我们将使用名为EDAMAM的平台。 ( https://developer.edamam.com/ )

• 首先，我们需要注册，然后转到导航栏中的 API 部分。
• 单击开发人员部分中的立即开始。
• 然后转到仪表板部分（右上角）>单击左侧的应用程序>
• 有一个食谱搜索 API选项>单击该部分的视图
• 从那里复制您的应用程序 ID和应用程序密钥并将其存储在某处。

创建反应应用程序并安装所有必需的包：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

第 3 步：现在在 src/App.js 文件中，在您从EDAMAM获得的 和 的位置提供游览自己的应用程序 ID 和应用程序密钥。

App.js

import React, { useEffect, useState } from 'react'
import './App.css';
import Recipe from './Recipe';
  
const App = () => {
  const APP_ID = ;
  const APP_KEY = ;
  const [recipes, setRecipes] = useState([]);
  const [search, setSearch] = useState("");
  const [query, setQuery] = useState("chicken");
  useEffect(() => {
    getRecipes();
  }, [query])
  const getRecipes = async () => {
    const response = await fetch
          (`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`);
    const data = await response.json();
    setRecipes(data.hits);
    // console.log(data);
  
  };
  const updateSearch = e => {
    setSearch(e.target.value);
  };
  const getSearch = e => {
    e.preventDefault();
    setQuery(search);
    setSearch("");
  }
  
  return (
    

      

        
        
             Search
        
      
      

        {recipes.map(recipe => (
          
  
        ))}
      
  
    
  );
}
  
export default App;

第四步：在 src 文件夹中创建一个名为“Recipe.js”的组件文件（你可以随意命名），将其导入 App.js 中。编辑 src/Recipe.js 文件。该文件包含配方卡的整个结构。

食谱.js

import React from "react";
import style from './recipe.module.css';
  
const Recipe = ({title,calories,image,ingredients}) =>{
    return(
        

            
{title}
            

                {ingredients.map(ingredient=>(
                    
{ingredient.text}
                ))}
            
              
Calories : {calories}
  
            
  
        
    );
  
}
export default Recipe;

第 5 步：现在在 src/App.css 中添加样式。

CSS

.App{
  min-height: 100vh;
 background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
.search-form{
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-bar{
  width: 50%;
  border:none;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 5px 10px #979b91;
}
.search-button{
  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 ;
}
.recipes{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

第 6 步：在 src 文件夹中创建一个名为“recipe.module.css”的新文件。该文件用于向 src/Recipe.js 文件添加样式。

配方.module.css

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
.recipe{
    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;   
}
  
.image{
    border-radius: 10px;
    margin:0px 0px 20px 0px;
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

食物食谱应用程序