Build a Weather App in React [React for Beginners]

In this video, we are going to build a weather app in react js and we will be using weather stack API for weather information. This is a basic beginner level project and I've just used two components. We will also use the geolocation API to get our current position and weather stack API to give the weather information of that particular location. Enjoy this tutorial video.

This weather app is going to be a very simple application. However, you will be needing the fundamentals of React for eg concepts of Components, etc. The weather app that we will be building in react will take a location as an input and will give the weather details of that particular location.

---------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------

Thank you for watching the video

Follow me on

#reactjs #weatherapp #weatherappinreact

[jaswhitehead]

This is one of the better tutorials I have ever seen. Very thorough and well explained. Not assuming that you know everything already. Thank you for this.

[thegraphicalhouse]

Didn't expect that this video will be this great...thanks bhai😍😍

[laurasikorakramer]

Thanks for making this, love the tutorial!!

[TheAdel]

thank you man !!! very good tuto <3 lot of love from algeria !!

[prayankardahal]

This video is really good thank you very much

[tenzinyeshi]

thanks for the video .. it was a great help👍

[MaherAsimriaz]

tell me what design pattern u have used?

[maitrishmukherjee]

Hey man! Love this tutorial! I really wanna know how much time it took for you to reach this level, since i'm like 4 months into React and related tech, and although i find it easy to understand, i really wanna reach a level where i can do most of the coding myself, and not google stuff. Thanks in advance! :D

[TheAdel]

bro i have a question ... what if i want to show the previous days weather or the next days weather with a button ?? that will be super if you make short video for that !! thanks

[dipikasarkar]

Hello I am getting 101 error during fetch api can you please tell me how to fix it

[krsumit]

I am getting error - Cannot destructure property 'temperature' of 'props.weatherData' as it is undefined @Scriptnation. kindly help me out.

[shashijaiswal]

2nd time the api call is not done thus after entering the city name the updated weather info do not appear.


changeWeather = (e) => {
console.log("calling change weather");
//e.preventDefalt()

console.log("here i am in ");

//api call
(res) => {
console.log(res);
let newweatherResponseData = {
cityName: res.data.location.name,
humidity: res.data.current.humidity,
temperature: res.data.current.temperature,
};
this.setState({ data: newweatherResponseData });
}).catch(error => {
console.log(error);
});
};

render() {
return (
<div className="App">
<Navigationbar
changeInput={this.change}

/>
<WeatherFetch data={this.state.data} />
</div>
);
}
}

[Sky-yy]

Bhai please make a tutorial on how you deploy this application

[brandongibson]

Why does everyone use the class base components!!! like cmon now i cant find a tutorial that doesn't use it geesh

[vladimirivanov]

Типичный индус пишет на классовых компонентах в 2020