How To Make Weather App Using React JS 2024 | Weather API React Project Tutorial

Learn How To Make Weather App Using React JS 2024 | Weather API React Project Tutorial Step by Step explained. #ReactJS #reactjsproject
SUBSCRIBE: @GreatStackDev

❤️ Complete JavaScript Course with Certification:
✔️ Beginner + Advance + ES6 + Notes
✔️ 30 Project With Source Code
✔️ React Beginner course with project
✔️ Course Completion certificate
✔️ Chat Support

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

In this video you will learn to build a Weather App using React JS Project. Here we will get the current Weather data from OpenWeatherMap API and display the weather data like Temperature, Weather condition, Humidity and Wind Speed according to the city.

In this Weather app React JS Project, You have to enter the name of the city, state or country and it gives you the accurate weather data using free API.

------------------------------
Recommended Full Stack Projects:

Watch Full Stack E-commerce Website tutorial:

Watch Full Stack Food Order Website tutorial:

-------------------------
Timestamp:

00:00 Project Overview
01:45 Setup React Project
07:22 Create Weather App UI
26:20 Add Open Weather Map API
45:30 Create Search feature

-----------------------------------------
Suggested Course:

Complete JavaScript course with 30 projects:

Complete HTML and CSS with 8 projects:

-------------------------------------
Recommended Videos:

Beginner's HTML and CSS tutorial:

Beginner's JavaScript tutorial:

Make A Complete Website for college using HTML & CSS:

How to make a Business website step by step:

How to make personal resume website step by step:

How to make fitness website design using HTML CSS:

How to make an Ecommerce Website Design:

How to make a Job Portal website design with HTML & CSS:

How to make travel website design with HTML CSS Bootstrap:

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

◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:

-------------------
Image and icon credit:

-------------------------------------
Connect with me:

Connect with GreatStack:

[kowshikjoy]

Thanks a lot, I've completed my university project with this tutorial. it saved me. Happy coding.

[sanketpathak]

Thank you. This is by far the most easy to understand tutorial. Plase bring more tutorials for reactJS.

[danialnawawi]

I really like the way you teach us one by one so that we can understand. Thanks and can't wait for more project.

[rayblinksme]

Thank you very much for your efforts! Project is great for beginners and it shows so much information. From React hooks, to jsx, creating react app using Vite, Fetch, API requests, Google dev tools, async code, try catch code blocks with alerts, ternary's and so much more. Great project!

[NoHandles]

Can You please Create a transportation Website that shows that trucks could carry goods from one place to another by using Api that tells the area location and a responsive pages using react and Backend.🙌🙌

[thabangreymondsehlako]

You are a good teacher.Your tutorials are easy to follow. I so wish you can give us more react tutorials ❤

[razeenmeeran]

Recognizing this from the old js, css and html video ❤❤

[ajiteshmishra]

Your explanation is very good.


Please create one video on Redux as well as Redux Toolkit on any React Project from scratch with small and large data so that every concept can be cleared.

We can answer every interview questions smoothly.

[fitnessfreak]

Please bring tailwind css in it and you keep bringing more projects ❤❤ love it

[DanyalMoazzamJann]

btw you can also run command "npm create vite . --template react" for initializing the project.

[mayankvaidh]

The project is very awesome. Sir, please make one video for deploying food app on vercel.

[noufalriyasm]

Could you please make a video on how to deploy vite-react-app in git pages?

It will be very helpful for beginners

[preranaattarde]

Excellent Project and API is very fast Working👍👍

[Applecitylightkiwi]

Congrats i remember the first one you made, i learnt that one well

[ManieshSanwal]

please let us know your vs code colour theme. I genuinely like this 🤗🤗

[SarathkumarKilli]

Best explanation. But whenever I use Axios instead of the fetch method, the state variable is not updating and also the data is not rendering on the browser. Why?

[melvinbruce]

Thank you bro just finished this tutorial really great video

[aadhi]

Sir can you put a video for react js full course really like your teaching method.😊

[JameishLestray]

Could you please make an HTML, CSS and JS Video for a crossword website :( I'd understand better from you GreatStack!

[gokulrajpalanisamy]

Sir, Great content❤❤
Plz create LMS website using MERN STACK (using react) with all admin functionalities ❤