【React入門】レシピ検索アプリの作り方を完全解説｜ルーティング対応＆API連携も習得

「Reactを使って実践的なアプリを作ってみたいけど、何を作ればいいか分からない…」
そんな方におすすめなのが、レシピ検索アプリの作成です。
API連携やルーティング、useEffectの使い方など、Reactの基礎をまるっと学べる構成となっており、初心者でも確実にスキルアップできます。

React レシピ検索アプリの作り方
1. 結論：実用的で学びが多いアプリです
必要な準備と構成
1. 使用技術とツール
2. プロジェクト作成と依存関係
Edamam APIの登録と使用方法
1. APIキーの取得と設定
アプリ構成とルーティング
1. ページの構成
2. ルーティング設定（App.js）
API検索のロジック実装
1. 検索ボタン押下でレシピ取得
公的機関の参考リンク
よくあるトラブルと対応方法
1. 検索結果が出ない場合
2. ルートにアクセスできない場合
完成コードのまとめ
まとめ：React学習の良い一歩

React レシピ検索アプリの作り方

結論：実用的で学びが多いアプリです

レシピ検索アプリは、APIとのやりとり・ルーティング・状態管理などReactの基本要素が詰まった学習題材です。

必要な準備と構成

使用技術とツール

Node.js（https://nodejs.org/ja）
create-react-app
React Router（ルーティング用）
Edamam API（https://developer.edamam.com/）

プロジェクト作成と依存関係

npx create-react-app recipe-app
cd recipe-app
npm install react-router-dom

Edamam APIの登録と使用方法

APIキーの取得と設定

EdamamのDeveloperページで無料登録し、アプリIDとAPIキーを取得します。
.envファイルに以下を記述します：

REACT_APP_RECIPE_APP_ID=xxxxxx
REACT_APP_RECIPE_APP_KEY=yyyyyy

アプリ構成とルーティング

ページの構成

トップページ（検索フォーム）
検索結果ページ
詳細ページ（レシピの説明）

ルーティング設定（App.js）

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Results from "./pages/Results";
import Detail from "./pages/Detail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/results" element={<Results />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

API検索のロジック実装

検索ボタン押下でレシピ取得

const fetchRecipes = async () => {
  const res = await fetch(
    `https://api.edamam.com/search?q=chicken&app_id=${process.env.REACT_APP_RECIPE_APP_ID}&app_key=${process.env.REACT_APP_RECIPE_APP_KEY}`
  );
  const data = await res.json();
  setRecipes(data.hits);
};