Coders Packet

city weather app in react

By Abhijit Shivaji Nawale

This is a weather project in react js using API, you just enter your city name and you get temperature min-max and humidity.

*Weather app in React js.*

Know your city weather by just putting the city name on a search.

* How to build weather app using React js.

* Requirement to create a project.

   1) Install node js, VS, or any editor.

   2) You have to know about React, API fetching, Hooks in React.

   3) Create an account in

   4) Create Your Own API Key from OpenWeatherMap.

   5) Install {npm install react-bootstrap bootstrap} for styling.

  6)Paste these Links to the folder public->index.html file in the head tag. 

        These links are for Google font and Logo.

    <link rel="stylesheet" href="" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />

    <link rel="preconnect" href="">

<link href="[email protected]&display=swap" rel="stylesheet">


* Now start to Create Weather app

  1) open a terminal in vs code.

      install npm then create app.
      npx create-react-app reactproject // reactproject  is project name

  2) Now Create a component folder in the src  folder

         1) Weather.js 

         2) style.css // for styling weather component

         3) Navbar.js and navbar.css // bootstrap files for Navbar.

  3) Import Hooks in Weather.js file ->

import React, { useState, useEffect } from "react";


 4) How to fetch API . 

const baseUrl = "";
const suffix = "&units=metric&appid=6233ee11de9b8797b5baa715e90e369e";


you need your own API key so generate your own API key from 

After your key look like these. 

 const APIkey = "6233ee11de9b8797b5baa715e90e369e";


* fetch API using Hooks.

  useEffect(() => {
    const fetchApi = async () => {
      const response = await fetch(baseUrl + search + suffix);

      const resJson = await response.json();
  }, [search]);


* Last for run the project use this command.

    npm start

* Thanks a lot happy coding if you need any help reach me

  Linkedin :


Download Complete Code


No comments yet