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/
Submitted by Abhijit Shivaji Nawale (abhjitnawale)
Download packets of source code on Coders Packet
Comments