Building a Weather App with React & Axios | React Basics Series Part 3"
Part 3 of the React Basics series builds a functioning weather app that fetches live data from the OpenWeatherMap API using Axios and React state.
Fetching data from an external API is one of the first real hurdles beginners hit in React, because it means combining state management, asynchronous requests, and conditional rendering all at once. This third installment of the React Basics series tackles that hurdle head-on by building a working weather app from scratch, one that searches for a city and displays its current conditions.
Setting up the data source
Before writing any React code, the video walks through OpenWeatherMap.org, the free API used to power the app. After creating an account, the API section shows a range of available endpoints, including current weather, four-day forecasts, and sixteen-day forecasts. The demo uses a dedicated API key created specifically for this project, named "weather app," rather than the default key, and the presenter is careful to note that the key gets disabled after recording.
Why Axios instead of fetch
For making the actual HTTP request, the tutorial chooses Axios over the native fetch API. The reasoning covers several practical advantages: Axios handles JSON data transformation automatically, has simpler syntax for error handling, supports canceling requests after they've been made, and is widely supported across browsers. For a project centered on fetching and cleaning external data, those conveniences make Axios the more efficient choice.
Scaffolding the React project
The app starts from a fresh project created with npx create-react-app weather-app, followed by installing Axios with npm install axios. After clearing out the boilerplate code, the build begins with two pieces of state: query, which tracks what the user types into the search input, and weather, which holds the JSON response returned by the API once a search completes. The input field is wired up so that every keystroke updates the query state through an onChange handler, and pressing Enter, detected as event.key === "Enter" in an onKeyDown handler, triggers the search.
Writing the search function
The search function itself is asynchronous, since it needs to wait on a network response. It calls axios.get() against a base URL for the OpenWeatherMap current-weather endpoint, passing three parameters pulled directly from the API documentation: q for the city name typed into the input, units set to metric, and appid for the API key. Once the response comes back, the function calls setWeather() with the response data and resets the query field to an empty string, clearing the input so the user can immediately search for another city. The whole request is wrapped in a try/catch block, which the video calls out as good practice for handling any errors the API call might throw.
One point raised explicitly during the build: API keys should never be hardcoded into application source files. The right approach is storing them in a .env file and accessing them through process.env, so they stay out of the codebase and can be hidden properly in production. The video shows the key directly in the code only for demonstration purposes.
Rendering the response
To figure out what to display, the tutorial checks the actual JSON structure returned by the OpenWeatherMap API, which includes coordinates, weather conditions, main temperature data, visibility, wind, rain, snow, and the country and name of the city. Rather than rendering everything, the app keeps things simple and displays just the city name, the country, and the temperature, using sys.name and sys.country for location details and Math.round() on the main temperature value to display a clean, rounded number in Celsius. A conditional check on weather.main ensures the app only tries to render weather data once it actually exists, avoiding errors before the first search completes.
Seeing it work
Testing the app with a search for "Boston" confirms it: the city and country render correctly, the temperature rounds to a clean integer, and the description, cloudy in this case, matches the weather outside the window at the time of recording. The video closes by noting how far this basic version could be extended, from adding CSS styling to make the display more visually appealing to pulling in a city photo or theming the interface based on current conditions, since OpenWeatherMap exposes far more data than the app currently uses.
Key takeaways
- Axios is chosen over the native fetch API for its automatic JSON handling, simpler error handling, and request cancellation support.
- The app manages two pieces of state: a
querystring for the search input and aweatherobject for the API response. - Search is triggered on Enter key press and calls the OpenWeatherMap current-weather endpoint with city, units, and API key parameters.
- The query field is cleared after each search, and try/catch handles request errors.
- API keys belong in a
.envfile and should never be committed directly into application code. - Conditional rendering, checking that
weather.mainexists, prevents the app from breaking before the first search returns data.
Who this is for
This tutorial is built for beginners who have already worked through the earlier videos in the React Basics series and are ready to connect a React app to a real, external API. It's a practical next step for anyone learning state management and asynchronous data fetching in React through a small, complete project rather than isolated code snippets.
Full transcript(auto-generated, with timestamps)
[0:00]Hello everyone and welcome to this new video uh in the react tutorial series uh well today we will be creating uh a weather app so this project will teach us about fetching the data from external apis and managing the state with as synchronous data and updating our UI based on the user interactions so this would you know offer a perfect uh Deep dive into the react World for beginners so building upon the basic that you know we established uh with the prior to videos I think this uh would allow us to create a much fancier app because this involves fetching dat data from a an
[0:43]External API and uh you know manipulating and you know trying to clean the data so yeah let's proceed so I'll give you a basic overview of the weather app so this weather application will allow the allow the users to search for a particular City and display the current weather and similar details and we'll cover uh the setting up of the basic project fetching the data displaying the data and handling the user input so for this particular application um I would suggest uh you know before you even start to open uh to go to this particular website called openweathermap.org so this is very important uh it provides
[1:26]A very provides a free uh API uh you know to fetch the uh weather data and it's uh pretty user friendly so I would suggest you to First create uh your account with this website uh and uh yeah so I already uh created my account here and uh let's go to the API section so we have these API calls the different apis you know to get the current weather data the forecast for the 4 days forecast 16 days and so on so it has a really great collection of apis that you know you can use and utilize for your uh application and depend depending on your use case
[2:10]So for our use case uh so let's go to the account and here uh these are the API Keys uh which we will be using to fetch the data and to validate uh the data uh the API call so I will be using these keys and don't worry I will disable the keys after this after this video yeah so once you've set up your account here and you know you've got created your keys so by default uh uh you will be given a particular key the API key which you can use so I've created another one with the name of weather weather app uh to use it in my
[2:53]Application so yeah so after you've done that uh we can go ahead and start creating the application so let's set up the project uh and in this project uh uh you know I'll be using AIO you know fetch the data so there's a very particular reason uh I'll be using axos uh because axio is a very uh popular tool know to fetch the data uh external data and it is much more efficient compared to the native fetch API so because it simplifies requests and handles the responses in a very uh in a much more efficient way and uh and also there are many advantages of XX use
[3:38]Over fetch uh which you know kind of includes U Json data transformation so uh and also it's it has simpler Syntax for error handling and we also have the ability to cancel the requests after it's made so it's also much more widely supported across the browsers and that's one of the reasons why uh it's pretty much reliable for any web project so we will be going ahead with the xus it's very powerful STP client so let's go ahead and set up the project so uh like as always uh let's set up the project okay let me uh go to my directory first docents okay have the
[4:40]React projects and this let me go to C my app okay let's check all the files okay we are in the spirit so let's create uh the project npx create react app weather app so yeah um so all the changes so while this is being created so what we'll be going to do is that we'll uh create a simple react application in the app.js file and uh we'll also be using uh a use state so for State Management and um an ause for making the API requests so let's go to the folder now we inside the folder let's start working on it let's go to the source
[5:49]App.js so yeah uh before we start uh let's just start the project so that we know what we working on in okay let's run it cool uh I'll just delete all of the unnecessary Cod yeah so first things first let's import react and we'll be using US state from react um like I previously mentioned uh you know it's always better to write the code rather than you know uh taking the help of co-pilot of course co-pilot helps in you know building the project much faster but uh you know as a as it's much better to you know practice the code and You Know It uh improves the
[6:52]Coding ability so it's better that you write the whole uh all the whole the entire code by yourself so yeah let's install the package npm uh at the axios npmi axos so this would install the axos package which we can import into our file AOS from AOS so now what we can do is start creating the project so first things first um you know let's create uh an input field first and um you know where the users can you know type the name of the city uh and we also use some sort of a control component for this input so you know react can control uh that
[7:50]Particular value and we'll update the query uh the the state uh which would be the query uh it could be updated on every keystroke that you know we uh that we make so as to reflect the inputs value um yeah so let's start with that so so it has to return the day and let's okay let's give a heading first it has weather application yeah and input would be type text let's have a placeholder which would tell the user to you know enter uh a city name the value
[9:02]And have it as which would be sent to the uh API and on change uh event what we would do is so as we using um State Management so for the for every query there will be set query you know where where in uh like I mentioned that every key stroke that we make uh the change on the change of key stroke we'll be updating the uh query parameter so we can update it through set query I'll be showing you the how I'm setting up the query and set query just a moment value and on key down we can call call a function search I'll be uh creating the function
[10:05]Uh in the meanwhile let's compute this okay oh that's fine this is uh expected so because we haven't clear clearly defined query set query and search but uh for our uh Simplicity sake let's set it up very set query new state and let's create a function in fact I know what I'll take a const const search but uh yeah so before that let's also create another state for U weather because that's the data that you know we we'll be getting and uh all the data that we get from the API would be stored ins inside this particular weather and we can keep on updating the
[11:17]Weather using set weather and as it's a Json object we en close it with Paris cool now um let's create our uh search function so in the search function it would be an asynchronous event um yeah because you are fetching data from an API so it would always be as syn if event. key so uh this means that uh so even. key is enter so what does this mean so after you enter a particular cies name and you press the enter key the following action is what uh would happen so what would happen yes
[12:30]It would fire up or it would you know try sending uh the API uh uh try sending the request uh and and then it would you know wait for a response from that const response wait axos so for this we are going to use axios doget it's a get call that we're making so oh and before we do that so to simplify our call our API call our request we can Define um the base URL the URL that we would be using as okay uh GitHub copilot you know completes this uh Auto completes this code but you know what we can do is that you
[13:32]Know we can go to the guide uh actually the API can go down and you can select this current weather uh data here API Doc and you can just scroll down down down down I think so you have to actually search for the one with uh where in the query takes in uh the the name of the city like this one so all we can do is we can just copy this particular code and paste it let's enclose it within yes okay what we can do is we can just remove this part that we will be sending it inside
[14:43]The request so this is the base URL and also have let's have uh the API key the API key so like I showed uh after we set up our account uh we can just go to the account and in the API Keys we can just select choose this particular key or any key by default you'll get one key and you can use that as well but I've created a uh created a key for this particular application so I I'll go ahead and use that um and yeah good now um here in a.get well uh the request are we going to S I'll send the base
[15:32]URL and the parameters so so what are the parameters so the parameters are the query um as you can see uh it's pretty simple I'll just show you how I'm getting all of this let's go to API let's go down API doc so here you see the parameters so these are the parameters that I will be using so let's use the parameters Q it would be qu which is the city that you know I would enter in the input box the units so units it would be metric I believe get up copilot knows everything pretty evident here and the app ID uh yeah app ID would be the API
[16:40]Key perfect um after this you know what we can do set weather so we want so we going to get all the data as a response and we going to set the state to the response that we get after the AP yes let's just let's set the query to empty now why are we doing this is because um so now we're done we're done with this particular uh you know API call we ENT we entered the name of a city and we got the data but we if we have to make another API call or to get the data of another city we'll have to
[17:29]Empty the field we have to empty the input field so for that we're going to uh you know set the the state the query to uh uh to an empty string and yeah now we'll have using TR catch so let's catch an error if there is any this is much better than you know uh uh uh it's a good practice to to have try and catch it's a good coding principle the error that we get okay so right now we have created a basic uh search function you know which uh takes in the event uh and once we've entered uh we've just pushed the enter key so
[18:28]What it's going to do it's going to fire up um a get call uh through axios and it'll take all these parameters which is the query the state uh and the API key that we providing here so another thing that I want to point point out is that uh usually API Keys uh or any keys that you use for your application should not be uh uh you know displayed it on you know your main code uh on your uh on your code base it should always be onv files and when they go into production you know we not actually dealing then you they hidden so this is a very bad
[19:09]Practice but uh just as an example I'm just as this as an example I'm just showing it to you that uh for now otherwise all you can do is that you can just uh create a EnV file in your folder and then you know can you can just store this API key uh in the EnV file you can extract it uh using process. uh EnV and uh you can just get that uh the API key from there so yeah um right so what we can do now is okay we're going to search a particular City it's going to fire out of the a get call and we're want to get the
[19:52]Response okay now how do we uh display the response well so the response is going to be uh like we saw it's going to be ajacent object right so we have to you know uh make sense of the data that we're getting the the J the Json data and let's uh give a nice structure to it so that you know it's uh good to display so so how you know how how do we know that what's the structure of the data so open weather map uh has this example uh response from where you know you can actually see what the format of the response is going to be and how the
[20:37]Responses are how the response what are the various parameters that you know are there in those in the response so yeah okay I think I'm a little lost am I oh okay okay this is the the the API call that we're making and the response data okay all right not this one because we supposed to use uh the one where you know we get uh the basic data of the particular uh City just a
[21:49]second uh yeah this is the one okay so this is the Json format of the API response so what we're going to get is that we're want to get the coordinates um the weather uh and we're going to get uh the main temperature visibility wind rain snow uh the country and the name of the city that you know we've uh used so let's make it uh basic and you know what we want to just display the name of the city the country uh and also the temperature and uh yeah I think that's that's pretty much what you know we can show uh weather Main
[22:43]And just using this weather me okay them here CL tag let's create tag in fact to tag or no you can usea name
[23:54]Sis country okay all of these parameters are all available here CIS do country it's all here that you can use so it's pretty simple and let's display the temperature what I do I'll do round I'll round it up math do round main temperature de Centigrades and
[25:08]Um I think we've got the whole thing set up uh all we have to do is just try to fire it up and see how it right so so once we have the weather data so displaying it is pretty much straightforward so we check here if uh the weather do main exists and to confirm that we have the data then render render the city name temperature and the weather condition all available here yeah so let's try Boston I'm in Boston let's try Boston well it works perfect so it says shows you shows you the city the country like you mentioned and it rounds up the temperature to the
[26:08]Nearest uh value integer value uh which is 14° and it feels like I mean well it has clouds it's cloudy and if I just look out of my window well it is cloudy that's nice pretty much great open weather maps go job it's a very uh a great uh uh tool a great website you know which allows us to play around with uh their apis and yeah there's so many other apis that you can know you can uh you know Tinker around with and play around with and not just that we have so many other parameters that you know you can just show and another uh good thing is that U you know
[26:50]You can add uh styling you can use CSS stylings to you know make it more visually appealing so so for example uh there there's so much so many possibilities here so by it means that when I use uh when I just press uh when I just enter Boston you know something like u a Boston uh a picture of an image of Boston can you know can be shown here on the app and uh if the if it feels like I mean the current temperature is like 14° you can just show it having a Pleasant atmosphere and all so it's Sky a limit if you think of
[27:32]You know making it visually appealing so yeah so this is pretty much um a weather application uh Bas a pretty basic weather application using axios a very powerful tool to fetch uh apis uh data and uh yeah that's pretty much uh uh the basics in this uh third tutorial video in the react Series so yes uh and uh to just recap on the whole uh uh the whole project on what what's happening so first we are uh giving an input parameter which is the name of a city so here I've entered Boston and after that uh the search function is triggered when the user uh the when the
[28:24]User presses the enter key and we use axus to make the get to request to the open weather map API so AOS automatically handles the Json passing so we can directly work with the response. data here and after we get it we're going to set it to the weather the state is going to change to the response that we get and as it's going to be a Json object so we're going to have to pass it uh you know uh format it and pass it in a way that is visually appealing and uh yeah and that's pretty much it and like I already mentioned that API
[29:00]Keys shouldn't be in the main code so it should always be uh put them in a EnV file so that's another thing that you need to keep in mind uh and yeah that's pretty much yet so we have built a weather app with react in AOS we learned a little bit about streate management uh asynchronous Epi requests conditional rendering and uh that's pretty much it and thanks
