"I'm learning React, but I don't know how to use the API..."
Such a beginner's problem,Build a weather forecast appLet's solve this neatly.
In this article,How to use the OpenWeatherMap API with React to get real-time weatherWe will explain the above in an easy-to-understand and detailed manner.
How to make a weather forecast app using React
Conclusion: Perfect for your first step in API integration
By creating a weather forecast app with React,How to use APIs, state management, asynchronous communication (fetch)You will learn the basics all at once.
Tools and preparation
What you need:
- Node.js (https://nodejs.org/ja)
- OpenWeatherMap API key (https://openweathermap.org/api)
- create-react-app
Project creation command:
1 | |
How to obtain and set an API key
Registering the OpenWeatherMap API
You can get an API key with a free plan from the official website.
After acquisition,.envPut the following in the file:
1 | |
Implementation to get weather data
Basic configuration of App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | }}> )} ); } |
Common errors and solutions
"City not found" is displayed
- Input error (It is recommended to input in English, not in Japanese)
- API Key Restrictions
API key is not reflected
.envAfter changingnpm startLet's restart.
Reference links from public institutions
- Guidelines for using Japan Meteorological Agency data: https://www.jma.go.jp/jma/kishou/info/coment.html
- GIGA School Initiative (Ministry of Education, Culture, Sports, Science and Technology): https://www.mext.go.jp/a_menu/other/index_00001.htm
Completed code summary
Once you write all the code in App.js, the weather forecast app will be complete.
Just replace the API key with your own.
Summary: Learn API basics through practice
A weather app can be a great first step in integrating React with an API.
"API call → Status management → Display"This flow will come naturally to you.
In the next step, let's try expanding it to display maps and weekly weather forecasts.
English 
Japanese