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 https://openweathermap.org/

   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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jost:[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 = "https://api.openweathermap.org/data/2.5/weather?q=";
const suffix = "&units=metric&appid=6233ee11de9b8797b5baa715e90e369e";

you need your own API key so generate your own API key from https://openweathermap.org/ 

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();
      setCity(resJson.main);
    };
    fetchApi();
  }, [search]);

* Last for run the project use this command.

    npm start

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

  Linkedin :  https://www.linkedin.com/in/abhijit-nawale-66772b1b6/

 

Download project

Reviews Report

Submitted by Abhijit Shivaji Nawale (abhjitnawale)

Download packets of source code on Coders Packet