React JS Tutorial - Build a Weather App With Cities Autocomplete
Вставка
- Опубліковано 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
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.
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
Both react and working with APIs seem like very important skills. Thanks!
Awesome thank you, check more tutorials on my channel
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!
Thanks for the great tutorial! My first little coding project with React and i''m sure, more will follow :-) Thanks!!!
guys i can't thank you enough, you're the best at dropping tutorials out there
Great work, thanks! Enjoyed completing this mini project!
This is so cool! I'm definitely going to mess around with the finished product.
This was so much fun, thank you!
Just finished! It was awesome!!
Been waiting for this one.. thank you
Awesome thank you, check more tutorials on my channel
brilliant course. Extremely grateful!!
Thank you for your course!
Thank you for this ,really helpful
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
Awesome stuff brother!
Really enjoyed this video Thanks!
Thank you, it was great!
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 ❤️
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
Best video ever for Weather project Thanks alot 🙌
Thanks a lot - it was very helpful! Really appreciate!
Thanks a lot , amazing video
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! :)
I read react documentation and little bit bored but this tutorial made fun my learning journey thanks.
Thankyou Sloba and freeCodeCamp
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
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
Very Helpful and Informative video 🤩🤩
Thank you. I made it as your tutorial
Amazing teaching, Keep it bro 😀😀
Thankyou I learned a lot It was very beginner friendly though
Thanks mate! 💌
This is what i needed for my react project ..Thanks fcc
Awesome
Much Love ❤
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
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!
Thank you so much!
Love video, tnk u very much
THanks a lot!
10/10 for study
thank you 🙏
Yooooo that's amazing
Awesome
Informative 💜
Awesome thank you, check more tutorials on my channel
Thank you!
Thank you !! 👑🏆❤💖✨
you’re welcome
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
Thank you so much 😊🙌🏻👐🏻👏🤝👍👊🏻🤜🏻✌️
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.
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.
This man is not explaining anything he's just telling what to do
Thank you very much
great. gud job
thank you
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 UA-camr just use 3 hour forecast to show how it works in software developpe level
Please upload some videos on React typescript and some advance projects using React-Redux.
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
Awesome
Awesome thank you, check more tutorials on my channel
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
Great thanks
Awesome thank you, check more tutorials on my channel
Thank you
thanks!
Wow, since when do you have so much subs!
Yeah freecodecamp is huge
nice i finished it
Awesome tutorial. But there is something i wanted tell you is that pls follow coding standards. Naming a component file should start with a Capital Letter.
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.
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?
awesome
Thank you 🙏, feel free to check more tutorials on my channel
Love you from Bangladesh
Love from Serbia
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
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.
start watching... enjoy
Awesome thank you, check more tutorials on my channel
ammmmazzzzingggggg !!!!!
thank you 🙏
Please execute the following commands to avoid the error at 1:09:15:
npm i accordion
npm i react-accessible-accordion
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 ?
can you please tell whether there is any way to fix the issue that both max and min temparature is same
didn't get it how r u getting the options tab when in the start
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?
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));
};
crazy how this was just 9 months ago and it's already kinda outdated
Pogchamp
cool
sir. which use in project backend and frent end i am comfujen .
how did you defined axios it wasn't in geo api before
Thanks for putting this together. I am one hour in but the entire app has gone blank. Not sure why
check the console
Constantly throws module not found cant resolve error for current weather.js
The forecast isn't returning the daily forecast instead is returning hourly forecast. Anyone knows what to do ?
when I input the prop {data.city}, it shows an error that data is null, please help!
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
why not use axios instead of fetch?
cannot get usestate to work - error is this Compiled with problems:X
ERROR
[eslint]
src\Components\Search\Search.js
Line 4:33: 'useState' is not defined no-undef
Search for the keywords to learn more about each error.
Fixed after googling. Had to import use state
forecast.js isn't returning. splice method error. anyone please help me? 1:06:27
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
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.
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
I'm getting ' GEO_API_URL' is defined but never used warning
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
api has changed not working now
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
I just downloaded from Github and something is wrong. It gives suggestion for city but when I choose city return blank page(same color), no search bar or anything else. Can someone help me, any idea. I rewatch every line of code and everything seems OK.
Please link to the github
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