"I want to create a practical app using React, but I don't know what to make..."
For those people, we recommendCreating a recipe search appis.
API integration, routing, how to use useEffect, etc.Learn the basics of ReactIt is structured so that even beginners can improve their skills.
- How to make a recipe search app using React
- Required preparations and configurations
- How to register and use the Edamam API
- App Configuration and Routing
- API search logic implementation
- Reference links from public institutions
- Common problems and how to deal with them
- Summary of the completed code
- Summary: A good step forward in learning React
How to make a recipe search app using React
Conclusion: A practical and educational app
Recipe search appAPI interaction, routing, and state managementThis is a learning material packed with basic elements of React, such as:
Required preparations and configurations
Technologies and tools used
- Node.js (https://nodejs.org/ja)
- create-react-app
- React Router (for routing)
- Edamam API (https://developer.edamam.com/)
Project Creation and Dependencies
1 | |
How to register and use the Edamam API
Obtaining and Setting an API Key
Sign up for free on the Edamam Developer page and get your app ID and API key.
Put the following in your .env file:
1 | |
App Configuration and Routing
Page configuration
- Top page (search form)
- Search results page
- Details page (recipe description)
Routing configuration (App.js)
1 | ; ; ; ; |
API search logic implementation
Press the search button to get the recipe
1 | |
Reference links from public institutions
- Ministry of Agriculture, Forestry and Fisheries' "Food Education Site": https://www.maff.go.jp/j/syokuiku/
- Consumer Affairs Agency "Food Labeling and Nutritional Information": https://www.caa.go.jp/policies/policy/food_labeling/
Common problems and how to deal with them
If there are no search results
- The API key may be set incorrectly.
- You've reached your free plan request limit
If you don't have root access
- react-router-dom version and syntax mismatch
Summary of the completed code
All you need to do is create all the page files (Home.js/Results.js/Detail.js) and connect the API calls and routing.
Summary: A good step forward in learning React
Recipe search appAPI integration, routing, and status managementThis is a valuable subject that allows you to experience both at the same time.
Once you create it, you will be able to apply it to other apps.
In the next step, we'll add a favorites feature and user authentication.
English 
Japanese