REACT

 WE DISPLAY DIFFERENT IMAGES FOR DIFFERENT WEATHER CONDITIONS WE CREATE A CONDITION THAT CHECKS THE HUMIDITY FIRST, AND THE TEMPERATURE NEXT. export default function InfoBox ({ info }) {   let SUNNY_IMG =     "https://images.unsplash.com/photo-1604228741406-3faa38f4907a?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8c3Vubnl8ZW58MHx8MHx8fDA%3D" ;   let COLD_IMG =     "https://images.unsplash.com/photo-1519944159858-806d435dc86b?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8Y29sZHxlbnwwfHwwfHx8MA%3D%3D" ;   let RAINY_IMG =     "https://images.unsplash.com/photo-1519692933481-e162a57d6721?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8cmFpbnxlbnwwfHwwfHx8MA%3D%3D" ; < CardMedia             sx = { { height : 140 } }       ...

 WE WILL CONNECT BOTH THE INFOBOX AND SEARCH BOX USING WEATHER APP COMPONENT. WE WILL IMPLEMENT A NEW FUNCTION INORDER TO UPDATE THE LOCATION. FOR INFOBOX , WE WILL SEND THE WEATHERINFO OBJECT AS A PROP. DEFAULT LOCATION IS SET TO KHAMMAM. import SearchBox from "./SearchBox" ; import InfoBox from "./InfoBox" ; import "./WeatherApp.css" ; import { useState } from "react" ; export default function WeatherApp () {   let [ weatherInfo , setWeatherInfo ] = useState ({     city : "khammam" ,     feels_like : 34.48 ,     humidity : 26 ,     temp : 35.43 ,     tempMax : 35.43 ,     tempMin : 35.43 ,     weather : "clear sky" ,   });   let updateInfo = ( newInfo ) => {     setWeatherInfo ( newInfo );   };   return (     < div className = "WeatherApp" >       < h1 > Weather App </ h1 >       < Sea...

HERE, WE USE A CARD LAYOUT TO SHOW THE INFO . FROM THE MATERIAL UI WE IMPORT THE REQUIRED CODE. import Card from "@mui/material/Card" ; import CardContent from "@mui/material/CardContent" ; import CardMedia from "@mui/material/CardMedia" ; import Typography from "@mui/material/Typography" ; import "./InfoBox.css" export default function InfoBox () {   let info = {     city : "khammam" ,     feels_like : 34.48 ,     humidity : 26 ,     temp : 35.43 ,     tempMax : 35.43 ,     tempMin : 35.43 ,     weather : "clear sky" ,   };   return (     < div className = "InfoBox" >       < h1 > Weather info - { info . weather } </ h1 >       < Card sx = { { maxWidth : 345 } } >         < CardMedia           sx = { { height : 140 } }           image ...

 WE USE OPEN WEATHER API , SIGNUP AND CREATE AN ACCOUNT , IN THE DROPDOWN, CLICK ON MY API KEYS. FROM THE GEOCODING API, SELECT THE API URL :       https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key} import "./Searchbox.css" ; import TextField from "@mui/material/TextField" ; import Button from "@mui/material/Button" ; import { useState } from "react" ; export default function SearchBox () {   let [ city , setCity ] = useState ( "" );   const API_URL = "https://api.openweathermap.org/data/2.5/weather" ;   const API_KEY = *********** ;   let getWeatherInfo = async () => { let res = await fetch ( ` ${ API_URL } ?q= ${ city } &appid= ${ API_KEY } &units=metric` ); HERE &units=metric IS USED TO CONVERT THE TEMP (IN KELVIN) INTO CELSIUS.     let jsonRes = await res . json ();     console . log ( jsonRes );     let result = { ...

 WE WILL BUILD A WEATHER WIDGET THATA CONSISTS OF A SEARCH BOX, SEARCH BUTTON, WEATHER REPORTS (FOUND USING AN API) . IN THE SEARCH BOX, WHEN A CITY NAME IS SEARCHED THAT CITY'S WEATHER REPORT SHOULD BE DISPLAYED. BUILDING SEARCH BOX: THE SEARCH BOX IS BUILT FROM MATERIAL UI BY IMPORTING THE TEXT FIELD  import "./Searchbox.css" ; import TextField from "@mui/material/TextField" ; import Button from "@mui/material/Button" ; import { useState } from "react" ; export default function SearchBox (){     let [ city , setCity ] = useState ( "" );     let handleChange = ( event ) => {         setCity ( event . target . value );     }     let handleSubmit = ( event ) => {         event . preventDefault ();         console . log ( city )         setCity ( "" )     }     return (         < div className =...

 IT IS A LIBRARY OF REACT UI COMPONENTS VISIT - https://mui.com/material-ui/ TO INSTALL : npm install @mui/material @emotion/react @emotion/styled FONT: npm install @fontsource/roboto ICONS : npm install @mui/icons-material IN THE COMPONENTS SECTION, WE CAN FIND VARIOUS COMPONENTS LIKE BUTTON, CHECKBOX, SELECT .. ETC TO USE THEM , WE NEED TO IMPORT THEM FIRST, (EXPAND CODE) FOR EACH COMPONET WE CAN IMPORT MANY PROPERTIES LIKE , SIZE, COLOR, VARIANT,ICONS.....ETC import './App.css' import Button from '@mui/material/Button' ; import DeleteIcon from '@mui/icons-material/Delete' ; import SendIcon from '@mui/icons-material/Send' ; function App () {   return (     <>       < Button variant = "outlined" color = "success" size = "large" endIcon = { < SendIcon /> } > click </ Button >       < Button variant = "contained" color = "error" size = "medium" start...

 USE CASES OF useEffects INCLUDE VARIOUS OPERATIONS SUCH AS , IF WE WANT TO DISPLAY A LOADER SIMILAR TO THAT OF YOUTUBE , THAT HAS TO BE DISPLAYED ONLY IN THE BEGINNING OF A WEBPAGE , WHEN IT IS RENDERED. THEY ARE USED FOR API CALLS - ASYNCHROUS OPERATIONS LET'S CREATE AN API, TO DISPLAY JOKES. COPY THE JOKES API URL FROM GITHUB  USING API IN REACT IS SIMILAR TO JS. export default function Joker () {   let URL = "https://official-joke-api.appspot.com/random_joke" ;   let [ joke , setJoke ] = useState ({});   let getJoke = async () => {     let res = await fetch ( URL );     let jsonRes = await res . json ();     console . log ( jsonRes );     setJoke ({ setup : jsonRes . setup , punchline : jsonRes . punchline });   };   return (     < div >       < h2 > Joker!! </ h2 >       < h2 > { joke . setup } </ h2 >   ...

 DEPENDENCIES REFER TO STATE VARIABLES. WHATEVER VARIABLE DECLARED AS A DEPENDENCY WILL ONLY BE PERFORMED AS A SIDE EFFECT. WE DECLARE THEM AS ARRAYS IN TWO  WAYS,  [COUNTX] - MEANS THAT ONLY COUNTX WILL BE USED AS A SIDE EFFECT. [] - EMPTY , MEANS THAT SIDE EFFECT IS PERFORMED ONLY WHEN THE PAGE IS RENDERED ( NOT RE-RENDERED). ( IN THE BEGINNIG)  EX- WE CREATE TWO STATE VARIABLES, COUNTX AND COUNT Y , HERE WE ONLY ADD SIDE EFFECTS TO COUNT X. import { useEffect , useState } from "react" ; export default function Counter () {   let [ countx , setCountx ] = useState ( 0 );   let [ county , setCounty ] = useState ( 0 );   let incx = () => {     setCountx (( currCount ) => currCount + 1 );   };   let incy = () => {     setCounty (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   },[ co...

 THE EFFECT HOOK LET'S YOU PERFORM SIDE EFFECTS IN FUNCTION COMPONENT.  IF WE WANT TO PERFORM A TASK WHENEVER A COMPONENT RENDERS, WE USE useEffect(). WHENVER A CHANGE IS TRACKED AND WE WANT TO PERFORM A TASK BY THAT CHANGE, THESE TASKS ARE CALLED AS SIDE EFFECTS, IN REACT THEY ARE KNOWN AS EFFECTS. DATA FETCHING, SETTING UP A SUBSCRIPTION AND MANUALLY CHANGING THE DOM IN REACT COMPONENTS ARE ALL EXAMPLES OF SIDE EFFECTS. WHENEVER THERE IS A CHANGE IN STATE, THESE SIDE EFFECTS WORK. import { useEffect , useState } from "react" ; export default function Counter () {   let [ count , setCount ] = useState ( 0 );   let inc = () => {     setCount (( currCount ) => currCount + 1 );   };   useEffect ( function PrintSomething () {     console . log ( "this is a side effect" );   });   return (     <>       < h2 > Count: { count } </ h2 >       < button ...