React JS Tutorial - Build a Weather App With Cities Autocomplete
HTML-код
- Опубликовано: 6 июн 2024
- In this React project tutorial, you will learn to build a weather application using the OpenWeatherMap API and GeoDB API with places autocomplete.
✏️ Slobodan Gajic created this course. Check out his channel: / codewithsloba
💻 Code: github.com/bobangajicsm/react...
💻 OpenWeather API: openweathermap.org/
💻 GeoDB Cities API: rapidapi.com/wirefreethought/...
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:00:30) How to get API keys
⌨️ (0:02:30) Creating the application and installing packages
⌨️ (0:05:25) Building city search component
⌨️ (0:23:48) Building current weather component
⌨️ (0:43:23) Fetching and mapping data from weather API
⌨️ (1:01:35) Building weather forecast component
⌨️ (1:34:20) Outro
🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news
![BETA SQUAD vs AMP FOOTBALL MATCH [OFFICIAL STREAM]](http://i.ytimg.com/vi/ChEmvP52p0U/mqdefault.jpg)
![Dimension 20: Never Stop Blowing Up Trailer [Dropout Exclusive Series]](http://i.ytimg.com/vi/xYeXpbHnGEM/mqdefault.jpg)
I'm an experienced React developer and enjoyed this tutorial as a refresher on how to interact with REST APIs using React. As with all such tutorials, you'll get the most out of it by going back and experimenting with all the things you can add, modify, expand, etc. Obviously, there is only so much Sloba could include here or the video would be several hours long. In this case, really exploring the API documentation to see what you can get from the API and then how you can use that data is very helpful in learning about working with REST APIs.
As I saw from one other commenter, the tutorial does misinterpret what the forecast list array provides. The 40 items in that array are not consecutive daily forecasts, but rather they are consecutive hourly forecasts separated by 3 hours. The API returns 5 days of data and there are 8 3-hr segments in a 24-hr day, hence the count of 5 x 8 = 40. So, to be accurate, you would need to do more data manipulation to really be able to extract a multi-day forecast from this data, and it would only look forward at most 5 days (unless you upgrade to the paid version of the API). But, the point of this tutorial is to show an example of accessing and displaying REST API data, not building an amazing replacement for the current weather app on your phone.
One last thing - new devs need to learn about protecting API keys. If you intend to upload this project to a public GitHub repo, then you need to learn about how to do it without exposing your personal API keys. Google "how to hide api key in github" for the how and why of this issue. (e.g., If you look at Sloba's Github repo for this tutorial, you will see he put placeholders in for the keys.)
hey Gfore thanks a lot for suggestion would look forward to doing this. Btw how can I reach out to you would love to connect on socials/ mail!
I noticed the same thing too when I saw the dates were same. And about hiding the API keys, how bad is it for this project, any idea?
@@abhyudaysoni - In this case, it is not a big deal since the API key is free so you aren't really trying to protect anything. But, it is just a good practice to protect API keys rather than sharing them publicly since you will eventually be working with keys that definitely need to be kept secret.
Both react and working with APIs seem like very important skills. Thanks!
Awesome thank you, check more tutorials on my channel
Small error, but something React developers need to be aware of: Around 1:06:20, in forecast.js, we should use "data.list.slice()" not "data.list.splice()". The difference is that slice() is for copying a portion of an array (data.list in this case) and does not alter the original array. The splice() method is meant for removing part of an array, and replacing it if a 3rd argument is included, so it actually alters the original array, which you don't want to do since altering the props within a React component can lead to unexpected results.
Thanks for this
correct slice is shadow copy.. just noticed while going through
guys i can't thank you enough, you're the best at dropping tutorials out there
Great little code along project with React. I like how it was quick and simple enough to not get lost and there was some interesting problem solving as well.
thank you so much 😊
Awesome video, pretty straightforward, I managed to make this lovely app in no time! Hvala, Slobodane, svaka cast!
Great work, thanks! Enjoyed completing this mini project!
Thanks for the great tutorial! My first little coding project with React and i''m sure, more will follow :-) Thanks!!!
I just finished this project, I loved it. Thank you!!!!
Awesome, cheers more tutorials on my channel 👏🏻
Have you deployed this project
Without subscription for rapid api is it work ??
Send deployment link
brilliant course. Extremely grateful!!
Just finished! It was awesome!!
Been waiting for this one.. thank you
Awesome thank you, check more tutorials on my channel
I know tNice tutorials is an old video but I’m new and thank god I finally found you . Thank you for such an amazing and helpful video ❤️
This was so much fun, thank you!
Just completed react course from this channel and wanted to do some project🤭🤭 you guys just uploaded a new project thank you!
Awesome thank you, check more tutorials on my channel
did you face any problem like this. Failed to parse source map from 'D:\Project React\July22TutorialWeatherApp\weather-app
ode_modules
eact-select-async-paginate
Currently learning react to use with django, thank you for this video :)
same bro. good luck
@@logic_ok I think I got some of reacts basics down , but I found it a little complicated to properly integrate it in to an existing django application. Good luck to you! :)
Nice couse! the api really real, data fetch so cool... and the UI simple but really awesome! Thanks you!
You’re welcome, check more tutorials on my channel
This is so cool! I'm definitely going to mess around with the finished product.
Really nice tutorial, just having basic knowledge of react I could understand almost everything he was doing👍👍
how long did you learn react to understand what is he doing, I learn react for 1 month and some of it still got me confused
Best video ever for Weather project Thanks alot 🙌
Thanks a lot - it was very helpful! Really appreciate!
I read react documentation and little bit bored but this tutorial made fun my learning journey thanks.
Really enjoyed this video Thanks!
Thank you for your course!
Thank you, it was great!
Exquisite lesson thank you, while working along had few lols
1. 1:28:42 "Sea_Level in metres" - that would be air pressure at sea level 😂
2. 58:14 Before converting API to &units=metric, you said temperature is in fahrenheit , that was kelvin. 300°F would be ~150°C 😂
Subscibed to your channel :)
thank you for letting us know 🙏 awesome
Awesome stuff brother!
Thankyou Sloba and freeCodeCamp
Awesome video!
Around minute 53:00 I missed the `import { useState } from 'react';` so I was getting the error "useState not defined" but then I caught it, phew.
Hope this helps some other 'newbies' like me out there, lol.
Thank you!
This is what i needed for my react project ..Thanks fcc
Awesome
Thank you. I made it as your tutorial
Just starting this after installing all relevant dependencies/packages. Wish me luck, will update "when" it's completed, looking forward to the challenge and learning 👍
Awesome good luck
Did you finish?
any update
@@siddharthsingh-cw4sd lol
THanks a lot!
10/10 for study
thank you 🙏
Thank you so much!
Thankyou I learned a lot It was very beginner friendly though
Thanks mate! 💌
Love video, tnk u very much
Much Love ❤
Thank you so much 😊🙌🏻👐🏻👏🤝👍👊🏻🤜🏻✌️
Awesome thank you, check more tutorials on my channel
Informative 💜
Awesome thank you, check more tutorials on my channel
Thank you!
Great tutorial. I am having an issue tho. the current weather component is not showing just the search component. I have checked with your code on git hub but i still cant figure where the issue is. Note: the weather component was showing before i linked the api
thanks, very cool api. It is much more interesting to build this using redux toolkit or mst and TS :). But the Idea - is only what we need )))
And what was confusing for me, is styling the select component 🙃, because it has some module.css like generated code in DOM.
Thank you !! 👑🏆❤💖✨
you’re welcome
Thank you so much for this Sloba. This video will for sure help with my future coding career. Was this made in Java programming language?
You’re welcome, that’s Javascript
React is a Javascript library, not Java
Yooooo that's amazing
Awesome
Foercast request sends you weather forecast for 5 days with data every 3 hours. It sends data for example (from 2022-07-15 12:00:00 to 2022-07-20 09:00:00). You splice data and map over first 7 items(that is day and a half or something like that), but you mark them as day of the week.
And not the best idea to use labels instead of spans everywhere)
there is a confusion in their api. I tested this data against their day forecast widget and it worked correctly. But you are correct
@@CodewithSloba Hi! so the original video code is correct and does it reflect the next 7 days? Thank you!
@@pedromiguelmazzeyvera4872 Seems that original code is not OK... Every object in list array has dt and dt_txt properties which shows date and time for the current forecast and it is clear that those are not daily but three hourly forecasts. This error doesn't make this tutorial invalid as the code is valid it's just that assumption about the data is wrong. Fix can be done by just using some vanilla js to map original data to required format...
@@Vlada1969 thank you!!
@@pedromiguelmazzeyvera4872 no, it can not be correct. because for this API daily forecast is not free. I think RUclipsr just use 3 hour forecast to show how it works in software developpe level
Thank you very much
Very Helpful and Informative video 🤩🤩
Please upload some videos on React typescript and some advance projects using React-Redux.
Amazing teaching, Keep it bro 😀😀
This man is not explaining anything he's just telling what to do
Wow, since when do you have so much subs!
Yeah freecodecamp is huge
Great thanks
Awesome thank you, check more tutorials on my channel
Question guys
(not stack overflow)
Is the weather api in the free plan limited by days because I saw it says 5 days 3 hours a day weather updates with geo location?
Thank you
nice i finished it
Awesome
Awesome thank you, check more tutorials on my channel
I am from mechanical background but lot of interest in coding. Hoping this will help to add to my resume and to gain lot of knowledge.
Absolutely
it sort of will but you need to actually complete a big project from start to end. Huge difference than doing tutorials, small projects like these.
great. gud job
thank you
thanks!
Love you from Bangladesh
Love from Serbia
Failed to parse source map from 'D:\Project React\weather-app
ode_modules
eact-select-async-paginate
ode_modules
eact-is-mounted-hook How can i resolve this error.
I'm getting the same error.
how did you defined axios it wasn't in geo api before
start watching... enjoy
Awesome thank you, check more tutorials on my channel
sir. which use in project backend and frent end i am comfujen .
didn't get it how r u getting the options tab when in the start
awesome
Thank you 🙏, feel free to check more tutorials on my channel
I want to learn React, but all the tutorials are long as hell! This seems decent. Is this good enough for a beginner to learn React?
This will help for sure, but only one tutorial can’t teach you
Just code and code! If you don’t understand a part, that’s ok. You’ll understand it in the next tutorial that you do.
React is like the hell, that's why tutorials are that long! 😂
I personally don't even take short tutorials, except of course It is focused on a tech I really want to learn. Only long tutorials can really give you so many implementations. If you are looking to earn so much from this career, I think it's only natural to be willing to give so much.
I agree what you say, just make sure to take time to digest informations
can you please tell whether there is any way to fix the issue that both max and min temparature is same
Please execute the following commands to avoid the error at 1:09:15:
npm i accordion
npm i react-accessible-accordion
api has changed not working now
Hey, I'm not able to load data for different cities. My code is only fetching or showing the data of a particular country irrespective of any city name typed...
One way to fix this is by appending a unique identifier, such as a timestamp, to the API endpoint URL. This ensures that each API request is unique and not cached.
const loadOptions = (inputValue) => {
const timestamp = Date.now(); // Unique identifier
const url = `${GEO_API_URL}/cities?minPopulation=1000000&namePrefix=${inputValue}×tamp=${timestamp}`;
return fetch(url, geoApiOptions)
.then(response => response.json())
.then(response => {
return {
options: response.data.map((city) => {
return {
value: `${city.latitude} ${city.longitude}`,
label: `${city.name}, ${city.contryCode}`,
};
}),
};
})
.catch(err => console.error(err));
};
Thanks! I almost finished this, but the forecast info is 4 hours interval, and I prefer to make something different from this tutorial, thanks anyway.
Constantly throws module not found cant resolve error for current weather.js
why not use axios instead of fetch?
where can i download the icon folder?
Hello! I am going along with the tutorial, but by the 12 minute mark the search bar still hasn't appeared on app? The console is not sending me any errors. Do you know what could be the issue?
Had the same issue, didn't install react-select-async-paginate correctly. Use this command "npm i react-select-async-paginate --force --save"
@@ibeliveinawp thanks I'll check that out
i am getting this error (city
:
"Belgrade, RS"
cod
:
"404"
message
:
"Internal error"
[[Prototype]]
:
Object
) which suggest i am not receiving data how can i resolve this problem ?
Nice project, I really love the explanations💥💥
I have a little bug I want to fix: anytime I search for a city, it's keeps on fetching data (weather and forecast) how do make it fetch once and hence the input search?
hey did you found the bug I am also facing same issue
@user-kw8qh4bc6p you are probably updating a state in the search component. that's why the component keeps re-rendering and keeps fetching data for the input.
Let me know if this info helps
i'm having this same issue and I really can't figure it out, I even copied his source code from the search.js file and its still happening
1:09:00 Uncaught TypeError: Cannot read properties of undefined (reading 'splice')...
In 48:27 where he stored forecast data in variable name forecastWeatherFetch, for that change ${WEATHER_API_URL}/weather to ${WEATHER_API_URL}/forecast.
Whenever I type something to the search bar I keep getting this error "You have exceeded the rate limit per second for your plan, BASIC, by the API provider" any idea how to solve this? I tried to type slower or refresh the page but didn't work.
You need to add a delay, as you are making too many requests
What is the best way to study with these videos for actual learning? I know they are an amazing skill, but there is a subtle line between learning and just following commands. I’m asking to the ones that are improving their skills at the moment. 🥺 how do you do it? Some advice would be appreciated Thanks!
Did you find the answer?
@@Mahmoud_176 nope
Pogchamp
forecast.js isn't returning. splice method error. anyone please help me? 1:06:27
cool
I'm getting ' GEO_API_URL' is defined but never used warning
when I input the prop {data.city}, it shows an error that data is null, please help!
I did the same as you but I can't get the icon? Can anyone explain it to me?
Even though I am a member of the geoDB site and use my own "apikey", I get a 403 (forbidden) error when fetching data from geoDB. I also tried with fetch and axios. Do you know how can i fix that problem?
Hello, I had this same issue. Its because we are supposed to click a button on the page with the copy and paste code that says "Subscribe to Test". 403 means we are authenticated (aka logged in) but havent yet got the rights to that particular API (ie havent subscibed). I hope this helps
The slice(0, 7) data from list shows not daily forecast but hourly! So you get forecast just for 1 day not for a whole week!
geocities api was change so what do you did to use api from geocities ? axios?
Why my temp property coming in at like "226"?
Thanks for putting this together. I am one hour in but the entire app has gone blank. Not sure why
check the console
This tutorial did not work for me. Too many errors keep popping up. The search bar is not working right. THe dropdown keeps switching up between no option and loading.
can we do this in ubuntu ?
The forecast isn't returning the daily forecast instead is returning hourly forecast. Anyone knows what to do ?
at first the asyncpaginate bot shows any search bar what is the mistake
Tried to do this and the first 20 minutes with coding along and checking making sure i have the same code it still doesn't work. nothing comes up on the search and i tried to inspect the console it doesnt print the data. And since nothing work i just grab the code from the github and tried to copy the same codes , using my api keys of course but still, when i search it doesnt do anything. Nothing is working.
add return before fetch
not able to run that api and get the response
Tried to follow along with this to get some extra react practice in and it just will not work for me. Once I completed the search component I keep getting an error where it flicks between searching and no options over and over until I click off the search bar. I even downloaded your code and it was doing the same thing to me, no clue why this would happen. Thanks for the tutorial anyway.
hey I have the same problem :( did you fix it?
@@biancamagali100 i m facing the same issue how to fix it ?
same! and my widget dissapeared too