{"id":2834,"date":"2021-12-01T13:06:01","date_gmt":"2021-12-01T13:06:01","guid":{"rendered":"https:\/\/mobilecoderz.com\/blog\/?p=2834"},"modified":"2023-07-21T11:07:13","modified_gmt":"2023-07-21T05:37:13","slug":"how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide","status":"publish","type":"post","link":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/","title":{"rendered":"How To Build A Weather Application With React And React Hooks? &#8211; Complete Guide"},"content":{"rendered":"<p style=\"text-align: justify;\"><span style=\"color: #003366;\"><em><strong><span style=\"font-family: arial, helvetica, sans-serif;\">React has the power to build a feature-rich weather app.\u00a0<\/span><\/strong><\/em><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">It is a fully-functional front-end JS library that is used to create feature-rich and dynamic user interfaces and applications.\u00a0 React provides a high-standard front-end development support to create an awesome user interface and useful features for web or mobile applications.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">If you know how to intelligently use React and React Hooks, you can make a full-fledged weather app for your target audience. In this blog, we will give you a brief <\/span><span style=\"font-weight: 400;\">React app development<\/span><span style=\"font-weight: 400;\"> tutorial for creating a weather app using React&#8217;s latest hooks.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">By the end of this blog, you will learn about React&#8217;s most common hooks and how to create eye-catching and custom features that your users find helpful.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">If you are a <\/span><span style=\"font-weight: 400;\">ReactJS developer<\/span><span style=\"font-weight: 400;\"> or app founder who wants to build a high-quality weather application, this developer tutorial will guide you on how to effectively use this technology.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">So let&#8217;s start then<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Before we start, we hope you must be familiar with the ReactJS framework. But since we are going to use React Hook in this process, so you should know the basics of\u00a0<\/span><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#What_are_React_Hooks\" >What are React Hooks?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#Installation_of_npm_and_Node\" >Installation of npm and Node<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#Most_Effective_Method_to_Develop_a_Weather_Application_Using_React\" >Most Effective Method to Develop a Weather Application Using React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#To_Wrap_Up\" >To Wrap Up<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_are_React_Hooks\"><\/span><span style=\"color: #003366;\"><strong><span style=\"font-family: arial, helvetica, sans-serif;\">What are React Hooks?<\/span><\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Hooks are the latest addition to the React 16.8 version. These hooks allow developers to use state and other React features without writing a class. React Hooks are APIs that enable React functional components to use React features.\u00a0 This function was previously only available in react class components.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">React hooks solves the problems of using React class components which makes the development process much easier and simpler than before. And this updated feature is highly useful in <\/span><span style=\"font-weight: 400;\">weather app development<\/span><span style=\"font-weight: 400;\">.\u00a0<\/span><\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Installation_of_npm_and_Node\"><\/span><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Installation of npm and Node<\/b><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">To construct React apps, there is a requirement of the run-time atmosphere which is termed as Node. This is predominantly used to carry out the coding of\u00a0 JavaScript.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You&#8217;ll additionally require the package manager termed \u201c<span style=\"color: #000080;\"><strong>npm<\/strong><\/span>\u201d which is developed on Node. One can utilize it for the installation of packages for the Javascript apps. Luckily it accompanies Node, hence you do not have to download it independently.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">When you are done, open your type <\/span><span style=\"color: #000080;\"><b>node- v<\/b><\/span><span style=\"font-weight: 400;\"> and command or terminal. It will give you an idea about what variant of Node you have.<\/span><\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Most_Effective_Method_to_Develop_a_Weather_Application_Using_React\"><\/span><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><strong>Most Effective Method to Develop a Weather Application Using React<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">To develop a React app, you must first write the following line in the depot \u201c<\/span><b><span style=\"color: #000080;\">npx create-react-app my-weather-app<\/span>\u201d.<\/b><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You will be notified about the installation of packages.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">After the installation, go to the file \u201c<\/span><span style=\"color: #000080;\"><b>project<\/b><\/span><span style=\"font-weight: 400;\">\u201d and tap \u201c<\/span><b><span style=\"color: #000080;\">npm start<\/span>\u201d.<\/b><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You can witness the template that is default as shown in the image below:-<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2836 aligncenter lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/1-1.png\" alt=\"React native app development company\" width=\"665\" height=\"373\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/373;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2836 aligncenter\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/1-1.png\" alt=\"React native app development company\" width=\"665\" height=\"373\" \/><\/noscript><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\">The Boilerplate Template of Default React,\u00a0 Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2837 aligncenter lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/2-2.png\" alt=\"weather app development \" width=\"665\" height=\"610\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/610;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2837 aligncenter\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/2-2.png\" alt=\"weather app development \" width=\"665\" height=\"610\" \/><\/noscript><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\">App.js, Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">In this case, we do not have to bother about the entire function. So, let\u2019s ahead propel into some coding.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">In your file \u201c<\/span><b><span style=\"color: #000080;\">app.js<\/span>\u201d<\/b><span style=\"font-weight: 400;\">, make sure that you clear everything inside the <\/span><span style=\"color: #000080;\"><b>div tag<\/b><\/span><span style=\"font-weight: 400;\">. <\/span><span style=\"font-weight: 400;\">Eliminate the import of the logo.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">After this process,\u00a0 you will observe a blank screen.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2838 aligncenter lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/3-2.png\" alt=\"Weather app development\" width=\"665\" height=\"610\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/610;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2838 aligncenter\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/3-2.png\" alt=\"Weather app development\" width=\"665\" height=\"610\" \/><\/noscript><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\">After the clean up of App.js, Source: freecodecamp.org<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Installation of Packages<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">For making this app additionally appealing, you must install the packages that are external. For this, you require a <\/span><a href=\"https:\/\/react.semantic-ui.com\/usage\/\"><span style=\"font-weight: 400;\">Semantic React UI library<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">In the terminal type the below-mentioned command,<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"color: #ff0000;\"><b>npm<\/b> <b>install<\/b><\/span><b><span style=\"color: #000080;\"> semantic-ui-react semantic-ui-css<\/span>.<\/b><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Once the installation is complete, the library must be imported in <\/span><span style=\"color: #000080;\"><b>index.js<\/b><\/span><span style=\"font-weight: 400;\"> and paste the command \u201c <\/span><span style=\"color: #000080;\"><b>import &#8216;semantic-ui-css\/semantic.min.css<\/b><\/span><span style=\"font-weight: 400;\">\u201d in the file <\/span><span style=\"color: #000080;\"><b>index.js<\/b><\/span><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">There is also the requirement of <\/span><a href=\"https:\/\/momentjs.com\/\" target=\"_blank\" rel=\"noopener nofollow\"><span style=\"font-weight: 400;\">moment.js<\/span><\/a><span style=\"font-weight: 400;\"> to format the timing. You can install it by utilizing the \u201c<\/span><span style=\"color: #000080;\"><b> npm install moment &#8211;save<\/b><\/span><span style=\"font-weight: 400;\">\u201d command.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">To keep a track of all the packages that are installed, you can see the <\/span><span style=\"color: #000080;\"><b>package.json <\/b><\/span><span style=\"font-weight: 400;\">file.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2839 aligncenter lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/4-2.png\" alt=\"weather app development\" width=\"665\" height=\"312\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/312;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2839 aligncenter\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/4-2.png\" alt=\"weather app development\" width=\"665\" height=\"312\" \/><\/noscript><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\">Package.json, Source: freecodecamp.org<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Development of Weather Apps<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">For properly operating your weather application, we require <\/span><b>OpenWeatherMap,<\/b><span style=\"font-weight: 400;\"> an API from a third-party platform that will obtain the data related to weather.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Once you create your account, check for the options of API click on the Navigation bar. You can see various alternatives such as <\/span><span style=\"font-weight: 400;\">Hourly 4 hour forecasts, <\/span><span style=\"font-weight: 400;\">Current Weather Data, <\/span><span style=\"font-weight: 400;\">16-day forecasts, etc. These are the endpoints of the API and you must ensure to fetch the data for these sections.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2840 aligncenter lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/5-1-e1616755165859.png\" alt=\"weather app development\" width=\"665\" height=\"471\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/471;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2840 aligncenter\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/5-1-e1616755165859.png\" alt=\"weather app development\" width=\"665\" height=\"471\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Now, the next thing you require is a key API to declare these (check the image above for this) APIs. To have your key API, you must click the username on the right top corner and afterwards check on &#8220;<\/span><span style=\"color: #000080;\"><b>my API keys<\/b><\/span><span style=\"font-weight: 400;\">&#8220;.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">If the API key does not exist make sure you develop one. For this, all you have to do is develop a field named <\/span><b><span style=\"color: #000080;\">.env<\/span>. <\/b><span style=\"font-weight: 400;\">This you can see in the folder of the main app. This folder will be an environmental variable and will enclose all the information related to your keys and endpoints.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>REACT_APP_API_URL = 'https:\/\/api.openweathermap.org\/data\/2.5'\r\nREACT_APP_API_KEY = Paste your API key here.\r\nREACT_APP_ICON_URL = 'https:\/\/openweathermap.org\/img\/w'<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Source: <\/span><span style=\"font-weight: 400;\">freecodecamp.org<\/span><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\">In the variable REACT_APP_API_KEY make sure you paste all the key API that is copied.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Utilization of React Hooks<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">With the help of React Hooks, you can accomplish and utilize all the state in the components that are functional.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">For instance, here, in this case, we will be using <\/span><span style=\"color: #000080;\"><b>useEffect <\/b><\/span><span style=\"font-weight: 400;\">and <\/span><span style=\"color: #000080;\"><b>useState<\/b><\/span><span style=\"font-weight: 400;\"> hooks and will pitch at the top.<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">The next phase is to develop two states. One will be for longitude and the other for latitude.<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>const [lat, setLat] = useState([]);\r\nconst [long, setLong] = useState([]);<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Source: <\/span><span style=\"font-weight: 400;\">freecodecamp.org<\/span><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Now develop the function \u201c<\/span><span style=\"color: #000080;\"><b>useEffect<\/b><\/span><span style=\"font-weight: 400;\">\u201d. Now the main function of this is to load the functionalities when the app is reloaded or loaded.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>useEffect(() =&gt; {\r\n    navigator.geolocation.getCurrentPosition(function(position) {\r\n      setLat(position.coords.latitude);\r\n      setLong(position.coords.longitude);\r\n    });\r\n\r\n    console.log(\"Latitude is:\", lat)\r\n    console.log(\"Longitude is:\", long)\r\n  }, [lat, long]);<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Source: <\/span><span style=\"font-weight: 400;\">freecodecamp.org<\/span><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Using the <\/span><span style=\"color: #000080;\"><b>navigator. geolocation<\/b><\/span><span style=\"font-weight: 400;\">, you can get the longitude and latitude, ensure to use<\/span> <span style=\"color: #000080;\"><b>setLat <\/b><\/span><span style=\"font-weight: 400;\">and <\/span><span style=\"color: #000080;\"><b>setLong<\/b><\/span> <span style=\"font-weight: 400;\">to set the states of latitude and longitude.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import '.\/App.css';\r\nimport React, { useEffect, useState } from \"react\";\r\nexport default function App() {\r\n\r\n  const [lat, setLat] = useState([]);\r\n  const [long, setLong] = useState([]);\r\n\r\n  useEffect(() =&gt; {\r\n    navigator.geolocation.getCurrentPosition(function(position) {\r\n      setLat(position.coords.latitude);\r\n      setLong(position.coords.longitude);\r\n    });\r\n\r\n    console.log(\"Latitude is:\", lat)\r\n    console.log(\"Longitude is:\", long)\r\n  }, [lat, long]);\r\n\r\n  return (\r\n    &lt;div className=\"App\"&gt;\r\n\r\n    &lt;\/div&gt;\r\n  );\r\n}<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">app.js, Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Below mentioned (in the image) is an example of how the console will look with the values of longitude and latitude.<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>Latitude is: 25.5922166\r\nLongitude is: 85.12761069999999<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Using The Longitude &amp; Latitude For Getting The Current Location<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">You must craft another functionality <\/span><b><span style=\"color: #000080;\">get Weather<\/span>. <\/b><span style=\"font-weight: 400;\">From the Weather API, it will attain the data of the weather that is based on the longitude and latitude.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">In this functionality, you can utilize a fetch call to attain the data from the API. The following command <\/span><span style=\"color: #000080;\"><b>process.env .REACT_APP_API_URL<\/b><\/span><span style=\"font-weight: 400;\"> will get your API address and <\/span><span style=\"color: #000080;\"><b>process.env. REACT_APP_API_KEY <\/b><\/span><span style=\"font-weight: 400;\">will get your key API from the .env document. The log &amp; lat are the longitudes and latitude that you have seen beforehand.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">And afterwards, you must ensure to modify the data into the format <\/span><span style=\"color: #000080;\"><b>JSON<\/b><\/span><span style=\"font-weight: 400;\">.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">In the subsequent stage, we must ensure to utilize <\/span><b><span style=\"color: #000080;\">setData<\/span>. <\/b>This will <span style=\"font-weight: 400;\">store all the outcome into the object \u201c<\/span><b><span style=\"color: #000080;\">data<\/span>\u201d<\/b><span style=\"font-weight: 400;\">.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>await fetch(`${process.env.REACT_APP_API_URL}\/weather\/?lat=${lat}&amp;lon=${long}&amp;units=metric&amp;APPID=${process.env.REACT_APP_API_KEY}`)\r\n      .then(res =&gt; res.json())\r\n      .then(result =&gt; {\r\n        setData(result)\r\n        console.log(result);\r\n      });<\/code><\/span><\/pre>\n<\/div>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">And you can log in to the data that is there in the console.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2846 size-full lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/7dd.png\" alt=\"weather app development\" width=\"572\" height=\"264\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 572px; --smush-placeholder-aspect-ratio: 572\/264;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2846 size-full\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/7dd.png\" alt=\"weather app development\" width=\"572\" height=\"264\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Here, you can get the details of the weather data based on Longitude and Latitude.<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Creation of The Components of The Weather<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Now, the next step is to develop the components of the weather where you can display the data. In the folder src, make sure to develop a folder named \u201c<\/span><span style=\"color: #000080;\"><b>Components<\/b><\/span><span style=\"font-weight: 400;\">\u201d and develop the file named \u201c<\/span><span style=\"color: #000080;\"><b>weather.js<\/b><\/span><span style=\"font-weight: 400;\">\u201d in that folder.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Next, you need to transfer these components of weather into the file named \u201c<\/span><span style=\"color: #000080;\"><b>app.js<\/b><\/span><span style=\"font-weight: 400;\">\u201d.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import '.\/App.css';\r\nimport React, { useEffect, useState } from \"react\";\r\nimport Weather from '.\/components\/weather';\r\nexport default function App() {\r\n  \r\n  const [lat, setLat] = useState([]);\r\n  const [long, setLong] = useState([]);\r\n  const [data, setData] = useState([]);\r\n\r\n  useEffect(() =&gt; {\r\n    const fetchData = async () =&gt; {\r\n      navigator.geolocation.getCurrentPosition(function(position) {\r\n        setLat(position.coords.latitude);\r\n        setLong(position.coords.longitude);\r\n      });\r\n\r\n      await fetch(`${process.env.REACT_APP_API_URL}\/weather\/?lat=${lat}&amp;lon=${long}&amp;units=metric&amp;APPID=$\r\n{process.env.REACT_APP_API_KEY}`)\r\n      .then(res =&gt; res.json())\r\n      .then(result =&gt; {\r\n        setData(result)\r\n        console.log(result);\r\n      });\r\n    }\r\n    fetchData();\r\n  }, [lat,long])\r\n  \r\n  return (\r\n    &lt;div className=\"App\"&gt;\r\n      \r\n    &lt;\/div&gt;\r\n  );\r\n}<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Importing the component of weather in app.js file, Source: <\/span><span style=\"font-weight: 400;\">Source: freecodecamp.org<\/span><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">In the image, you might have seen the return statement. If the data type is undefined, it will display the empty div.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2847 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/8dd.png\" alt=\"weather app development\" width=\"665\" height=\"175\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/175;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2847\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/8dd.png\" alt=\"weather app development\" width=\"665\" height=\"175\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><b>Creation of The Weather Body<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">In this section, you are going to utilize the user interface library of the Semantic to design the interface.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Now, develop the card that will demonstrate the information related to weather.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Below mentioned (in the image) is an example of how the console will look with the values of longitude and latitude.<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport { Card } from 'semantic-ui-react'\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;Card&gt;\r\n    &lt;Card.Content&gt;\r\n        &lt;Card.Header className=\"header\"&gt;{weatherData.name}&lt;\/Card.Header&gt;\r\n    &lt;\/Card.Content&gt;\r\n  &lt;\/Card&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Weather.js, <\/span><span style=\"font-weight: 400;\">Source: freecodecamp.org<\/span><\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">The next stage is to value the card from the <\/span><span style=\"font-weight: 400;\">semantic-ui-react, and inside this card, the header will display the name of the city. For this, you can utilize the props to React.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You can use this to send the data from the component of the parent to the component of the child. <\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>&lt;Weather weatherData={data}\/&gt;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">The next step is to pass the data with the name \u201c<\/span><b><span style=\"color: #000080;\">Weather.js<\/span>\u201d<\/b><span style=\"font-weight: 400;\"> of the props as weatherData.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport { Card } from 'semantic-ui-react'\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;Card&gt;\r\n    &lt;Card.Content&gt;\r\n        &lt;Card.Header className=\"header\"&gt;{weatherData.name}&lt;\/Card.Header&gt;\r\n    &lt;\/Card.Content&gt;\r\n  &lt;\/Card&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">For example, the current location in Patna<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2848 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/Patna.png\" alt=\"weather app development\" width=\"665\" height=\"329\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/329;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2848\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/Patna.png\" alt=\"weather app development\" width=\"665\" height=\"329\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You can adjoin more sections to the components of the weather.<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport { Card } from 'semantic-ui-react'\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;Card&gt;\r\n    &lt;Card.Content&gt;\r\n        &lt;Card.Header className=\"header\"&gt;City Name: {weatherData.name}&lt;\/Card.Header&gt;\r\n        &lt;p&gt;Temprature: {weatherData.main.temp}&lt;\/p&gt;\r\n        &lt;p&gt;Sunrise: {weatherData.sys.sunrise}&lt;\/p&gt;\r\n        &lt;p&gt;Sunset: {weatherData.sys.sunset}&lt;\/p&gt;\r\n        &lt;p&gt;Description: {weatherData.weather[0].description}&lt;\/p&gt;\r\n    &lt;\/Card.Content&gt;\r\n  &lt;\/Card&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Here, you can get updates related to descriptions, sunset, sunrise, and temperature from the API.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2850 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/10dd.png\" alt=\"weather app development\" width=\"665\" height=\"441\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/441;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2850\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/10dd.png\" alt=\"weather app development\" width=\"665\" height=\"441\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">In this stage, you can also add sections such as visibility, humidity, wind speed, etc.\u00a0<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Formatting The Data &amp; Addition of Today\u2019s Time &amp; Date<\/b><\/span><\/h3>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Make sure you add the temperature unit. Then, you can add <\/span><b>&amp;deg;C<\/b><span style=\"font-weight: 400;\"> after the temperature. Make sure to change the local time according to sunset and sunrise.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport { Card } from 'semantic-ui-react'\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;Card&gt;\r\n    &lt;Card.Content&gt;\r\n        &lt;Card.Header className=\"header\"&gt;City Name: {weatherData.name}&lt;\/Card.Header&gt;\r\n        &lt;p&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n        &lt;p&gt;Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n        &lt;p&gt;Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n        &lt;p&gt;Description: {weatherData.weather[0].main}&lt;\/p&gt;\r\n        &lt;p&gt;Humidity: {weatherData.main.humidity} %&lt;\/p&gt;\r\n    &lt;\/Card.Content&gt;\r\n  &lt;\/Card&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Next, you can add today\u2019s date and days utilizing <\/span><b><span style=\"color: #000080;\">moment.js<\/span>.<\/b><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import moment from 'moment';\r\n\r\n&lt;p&gt;Day: {moment().format('dddd')}&lt;\/p&gt;\r\n&lt;p&gt;Date: {moment().format('LL')}&lt;\/p&gt;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Using moment.js, Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">The most appreciated part about this package is it will update the date and day automatically.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Your screen will display the following:-<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport { Card } from 'semantic-ui-react';\r\nimport moment from 'moment';\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;Card&gt;\r\n    &lt;Card.Content&gt;\r\n        &lt;Card.Header className=\"header\"&gt;City Name: {weatherData.name}&lt;\/Card.Header&gt;\r\n        &lt;p&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n        &lt;p&gt;Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n        &lt;p&gt;Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n        &lt;p&gt;Description: {weatherData.weather[0].main}&lt;\/p&gt;\r\n        &lt;p&gt;Humidity: {weatherData.main.humidity} %&lt;\/p&gt;\r\n        &lt;p&gt;Day: {moment().format('dddd')}&lt;\/p&gt;\r\n        &lt;p&gt;Date: {moment().format('LL')}&lt;\/p&gt;\r\n    &lt;\/Card.Content&gt;\r\n  &lt;\/Card&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Weather.js, Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">And the final output will be displayed as below:-<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2851 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/11-dd.png\" alt=\"weather app development\" width=\"665\" height=\"461\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/461;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2851\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/11-dd.png\" alt=\"weather app development\" width=\"665\" height=\"461\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Styling The Weather App<\/b><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">After the development, the next stride is to do the styling to make the application more alluring.<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">The first thing is to colossal the card, change the radius of the border, colour,\u00a0 font of the cooler and remove the alignment of the text.\u00a0<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport moment from 'moment';\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;div className=\"main\"&gt;\r\n      &lt;p className=\"header\"&gt;{weatherData.name}&lt;\/p&gt;\r\n      &lt;div&gt;\r\n        &lt;p className=\"day\"&gt;Day: {moment().format('dddd')}&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div&gt;\r\n        &lt;p className=\"temp\"&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      \r\n  &lt;\/div&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Weather.js, Source: freecodecamp.org<\/span><\/h6>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Recursive&amp;display=swap');\r\n\r\n.main{\r\n    width: 700px;\r\n    border-radius: 15px;\r\n    background-color: #01579b;\r\n}\r\n\r\n.header{\r\n    background-color: #424242;\r\n    color: whitesmoke;\r\n    padding: 10px;\r\n    font-size: 28px;\r\n    border-radius: 15px;\r\n    font-family: 'Recursive', sans-serif;\r\n}\r\n\r\n.day{\r\n    padding: 15px;\r\n    color: whitesmoke;\r\n    font-family: 'Recursive', sans-serif;\r\n    font-size: 24px;\r\n    font-weight: 600;\r\n}\r\n\r\n.temp{\r\n    padding: 15px;\r\n    color: whitesmoke;\r\n    font-family: 'Recursive', sans-serif;\r\n    font-size: 18px;\r\n}<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Styles.css, Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2852 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/12-dd.png\" alt=\"weather app development\" width=\"664\" height=\"260\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 664px; --smush-placeholder-aspect-ratio: 664\/260;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2852\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/12-dd.png\" alt=\"weather app development\" width=\"664\" height=\"260\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Now, it is how the application will look like. You can utilize the <\/span><span style=\"color: #000080;\"><b>flexbox<\/b><\/span><span style=\"font-weight: 400;\"> to organize the data list-wise.<\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>&lt;div className=\"flex\"&gt;\r\n   &lt;p className=\"day\"&gt;Day: {moment().format('dddd')}&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;div className=\"flex\"&gt;\r\n   &lt;p className=\"temp\"&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n&lt;\/div&gt;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">Make sure you designate the <\/span><span style=\"font-weight: 400;\">divs named &#8216;flex&#8217; and include the subsequent equity in <\/span><b><i><span style=\"color: #000080;\">styles.css<\/span>.<\/i><\/b><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>.flex{\r\n    display: flex;\r\n    justify-content: space-between;\r\n}<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">weather.js will now appear like this. <\/span><\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport moment from 'moment';\r\n\r\nconst CardExampleCard = ({weatherData}) =&gt; (\r\n  &lt;div className=\"main\"&gt;\r\n      &lt;p className=\"header\"&gt;{weatherData.name}&lt;\/p&gt;\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"day\"&gt;Day: {moment().format('dddd')}&lt;\/p&gt;\r\n        &lt;p className=\"day\"&gt;{moment().format('LL')}&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"temp\"&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n        &lt;p className=\"temp\"&gt;Humidity: {weatherData.main.humidity} %&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n      \r\n      \r\n  &lt;\/div&gt;\r\n)\r\n\r\nexport default CardExampleCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2853 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/13.png\" alt=\"weather app development\" width=\"664\" height=\"260\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 664px; --smush-placeholder-aspect-ratio: 664\/260;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2853\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/13.png\" alt=\"weather app development\" width=\"664\" height=\"260\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You can add the following fields that are remaining.<\/span><\/p>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport moment from 'moment';\r\n\r\nconst WeatherCard = ({weatherData}) =&gt; (\r\n  &lt;div className=\"main\"&gt;\r\n      &lt;p className=\"header\"&gt;{weatherData.name}&lt;\/p&gt;\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"day\"&gt;{moment().format('dddd')}, &lt;span&gt;{moment().format('LL')}&lt;\/span&gt;&lt;\/p&gt;\r\n        &lt;p className=\"description\"&gt;{weatherData.weather[0].main}&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"temp\"&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n        &lt;p className=\"temp\"&gt;Humidity: {weatherData.main.humidity} %&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"sunrise-sunset\"&gt;Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n        &lt;p className=\"sunrise-sunset\"&gt;Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    \r\n  &lt;\/div&gt;\r\n)\r\n\r\nexport default WeatherCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Weather.js, Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2854 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/14.png\" alt=\"weather app development\" width=\"665\" height=\"375\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/375;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2854\" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/14.png\" alt=\"weather app development\" width=\"665\" height=\"375\" \/><\/noscript><\/span><br \/>\n<span style=\"font-family: arial, helvetica, sans-serif;\">Source: freecodecamp.org<\/span><\/p>\n<h3 style=\"text-align: justify;\"><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><b>Addition of The Refresh Button<\/b><\/span><\/h3>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>import React from 'react';\r\nimport '.\/styles.css';\r\nimport moment from 'moment';\r\nimport { Button } from 'semantic-ui-react';\r\n\r\nconst refresh = () =&gt; {\r\n  window.location.reload();\r\n}\r\n\r\nconst WeatherCard = ({weatherData}) =&gt; (\r\n  &lt;div className=\"main\"&gt;\r\n\r\n      &lt;div className=\"top\"&gt;\r\n        &lt;p className=\"header\"&gt;{weatherData.name}&lt;\/p&gt;\r\n        &lt;Button className=\"button\" inverted color='blue' circular icon='refresh' onClick={refresh} \/&gt;\r\n      &lt;\/div&gt;\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"day\"&gt;{moment().format('dddd')}, &lt;span&gt;{moment().format('LL')}&lt;\/span&gt;&lt;\/p&gt;\r\n        &lt;p className=\"description\"&gt;{weatherData.weather[0].main}&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"temp\"&gt;Temprature: {weatherData.main.temp} &amp;deg;C&lt;\/p&gt;\r\n        &lt;p className=\"temp\"&gt;Humidity: {weatherData.main.humidity} %&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n\r\n      &lt;div className=\"flex\"&gt;\r\n        &lt;p className=\"sunrise-sunset\"&gt;Sunrise: {new Date(weatherData.sys.sunrise * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n        &lt;p className=\"sunrise-sunset\"&gt;Sunset: {new Date(weatherData.sys.sunset * 1000).toLocaleTimeString('en-IN')}&lt;\/p&gt;\r\n      &lt;\/div&gt;\r\n    \r\n  &lt;\/div&gt;\r\n)\r\n\r\nexport default WeatherCard;<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Weather.js, Source: freecodecamp.org<\/span><\/h6>\n<div style=\"background-color: #f6f6f6; padding: 15px; margin: 15px 0px; border-left: 4px solid #1e3957; font-size: 12px; text-align: justify;\">\n<div style=\"color: #303030; font-weight: 600; position: absolute;\"><\/div>\n<pre><span style=\"font-family: arial, helvetica, sans-serif;\"><code>.button{\r\n    width: 35px;\r\n    height: 35px;\r\n}<\/code><\/span><\/pre>\n<\/div>\n<h6 style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Styles.css, Source: freecodecamp.org<\/span><\/h6>\n<p style=\"text-align: justify;\"><span style=\"font-family: arial, helvetica, sans-serif;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2855 lazyload\" data-src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/15-e1616763047821.png\" alt=\"weather app development \" width=\"665\" height=\"348\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 665px; --smush-placeholder-aspect-ratio: 665\/348;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2855 \" src=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/03\/15-e1616763047821.png\" alt=\"weather app development \" width=\"665\" height=\"348\" \/><\/noscript><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">You will be displayed with the button and this will prompt you to refresh the functions. When you push this further, it refreshes the pages.\u00a0<\/span><\/p>\n<h2 style=\"text-align: justify;\"><span class=\"ez-toc-section\" id=\"To_Wrap_Up\"><\/span><span style=\"color: #003366; font-family: arial, helvetica, sans-serif;\"><strong>To Wrap Up<\/strong><\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">So, that\u2019s it!!! You are done. If you want, you can also add other features like icons, forecasts, etc., to the application.\u00a0<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">If you want more ideas get in touch with MobileCoderz.\u00a0 We are a <span style=\"text-decoration: underline; color: #003366;\"><em><a style=\"color: #003366;\" href=\"https:\/\/mobilecoderz.com\/react-native-app-development-company\/\" target=\"_blank\" rel=\"noopener\"><strong>leading React development company<\/strong><\/a><\/em><\/span><span style=\"font-weight: 400;\"> that provides high-quality web and mobile solutions for any app concept.\u00a0<\/span><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"font-weight: 400; font-family: arial, helvetica, sans-serif;\">Got something in mind?<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React has the power to build a feature-rich weather app.\u00a0 It is a fully-functional front-end JS library that is used to create feature-rich and dynamic user interfaces and applications.\u00a0 React provides a high-standard front-end development support to create an awesome user interface and useful features for web or mobile applications.\u00a0 If you know how to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,490],"tags":[493,491,90,492],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Build A Weather Application With React And React Hooks?<\/title>\n<meta name=\"description\" content=\"The Weather app has gained immense popularity of late. Here is a guide that can help you embark on weather-based mobile app development. Check this link\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Build A Weather Application With React And React Hooks?\" \/>\n<meta property=\"og:description\" content=\"The Weather app has gained immense popularity of late. Here is a guide that can help you embark on weather-based mobile app development. Check this link\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"MobileCoderz\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MobileCoderz\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/MobileCoderz\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-01T13:06:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-21T05:37:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"404\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"MobileCoderz Technologies\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mobilecoderz\" \/>\n<meta name=\"twitter:site\" content=\"@mobilecoderz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"MobileCoderz Technologies\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\"},\"author\":{\"name\":\"MobileCoderz Technologies\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#\/schema\/person\/5b5a4724393a36f7d68add2099993c49\"},\"headline\":\"How To Build A Weather Application With React And React Hooks? &#8211; Complete Guide\",\"datePublished\":\"2021-12-01T13:06:01+00:00\",\"dateModified\":\"2023-07-21T05:37:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\"},\"wordCount\":1765,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png\",\"keywords\":[\"develop weather app\",\"react native app developers\",\"React Native App Development company\",\"weather app development\"],\"articleSection\":[\"Featured\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\",\"url\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\",\"name\":\"How To Build A Weather Application With React And React Hooks?\",\"isPartOf\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png\",\"datePublished\":\"2021-12-01T13:06:01+00:00\",\"dateModified\":\"2023-07-21T05:37:13+00:00\",\"description\":\"The Weather app has gained immense popularity of late. Here is a guide that can help you embark on weather-based mobile app development. Check this link\",\"breadcrumb\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage\",\"url\":\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png\",\"contentUrl\":\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png\",\"width\":720,\"height\":404},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mobilecoderz.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Build A Weather Application With React And React Hooks? &#8211; Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#website\",\"url\":\"https:\/\/mobilecoderz.com\/blog\/\",\"name\":\"MobileCoderz\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mobilecoderz.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#organization\",\"name\":\"MobileCoderz Technologies Pvt Ltd\",\"url\":\"https:\/\/mobilecoderz.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2016\/02\/logo-1-2.png\",\"contentUrl\":\"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2016\/02\/logo-1-2.png\",\"width\":100,\"height\":63,\"caption\":\"MobileCoderz Technologies Pvt Ltd\"},\"image\":{\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/MobileCoderz\/\",\"https:\/\/x.com\/mobilecoderz\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#\/schema\/person\/5b5a4724393a36f7d68add2099993c49\",\"name\":\"MobileCoderz Technologies\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mobilecoderz.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a645212d7c47cc4a362c65b6672886d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a645212d7c47cc4a362c65b6672886d6?s=96&d=mm&r=g\",\"caption\":\"MobileCoderz Technologies\"},\"description\":\"MobileCoderz has established itself as the first choice of small and medium-sized businesses in the mobility space within a short span of time. We have a young &amp; talented team of mobile strategists, UX\/UI designers, and App Developers. We have a client base that spreads across emerging startups to small &amp; medium size Business across the globe. MobileCoderz has helped in the development of World Class mobile apps for 500+ clients, collaborating with its team of 120+ nerds.\",\"sameAs\":[\"https:\/\/mobilecoderz.com\/blog\",\"https:\/\/www.facebook.com\/MobileCoderz\/\",\"https:\/\/www.instagram.com\/official.mobilecoderz\/\",\"https:\/\/www.linkedin.com\/company\/mobilecoderz-technologies-pvt-ltd\/\",\"https:\/\/www.pinterest.com\/mobilecoderz\/\",\"https:\/\/x.com\/mobilecoderz\",\"mobi@ppAdmin\"],\"url\":\"https:\/\/mobilecoderz.com\/blog\/author\/mobippadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Build A Weather Application With React And React Hooks?","description":"The Weather app has gained immense popularity of late. Here is a guide that can help you embark on weather-based mobile app development. Check this link","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/","og_locale":"en_US","og_type":"article","og_title":"How To Build A Weather Application With React And React Hooks?","og_description":"The Weather app has gained immense popularity of late. Here is a guide that can help you embark on weather-based mobile app development. Check this link","og_url":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/","og_site_name":"MobileCoderz","article_publisher":"https:\/\/www.facebook.com\/MobileCoderz\/","article_author":"https:\/\/www.facebook.com\/MobileCoderz\/","article_published_time":"2021-12-01T13:06:01+00:00","article_modified_time":"2023-07-21T05:37:13+00:00","og_image":[{"width":720,"height":404,"url":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png","type":"image\/png"}],"author":"MobileCoderz Technologies","twitter_card":"summary_large_image","twitter_creator":"@mobilecoderz","twitter_site":"@mobilecoderz","twitter_misc":{"Written by":"MobileCoderz Technologies","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#article","isPartOf":{"@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/"},"author":{"name":"MobileCoderz Technologies","@id":"https:\/\/mobilecoderz.com\/blog\/#\/schema\/person\/5b5a4724393a36f7d68add2099993c49"},"headline":"How To Build A Weather Application With React And React Hooks? &#8211; Complete Guide","datePublished":"2021-12-01T13:06:01+00:00","dateModified":"2023-07-21T05:37:13+00:00","mainEntityOfPage":{"@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/"},"wordCount":1765,"commentCount":1,"publisher":{"@id":"https:\/\/mobilecoderz.com\/blog\/#organization"},"image":{"@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png","keywords":["develop weather app","react native app developers","React Native App Development company","weather app development"],"articleSection":["Featured","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/","url":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/","name":"How To Build A Weather Application With React And React Hooks?","isPartOf":{"@id":"https:\/\/mobilecoderz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage"},"image":{"@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png","datePublished":"2021-12-01T13:06:01+00:00","dateModified":"2023-07-21T05:37:13+00:00","description":"The Weather app has gained immense popularity of late. Here is a guide that can help you embark on weather-based mobile app development. Check this link","breadcrumb":{"@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#primaryimage","url":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png","contentUrl":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2021\/12\/How-to-build-a-weather-application-with-React-and-React-hooks.png","width":720,"height":404},{"@type":"BreadcrumbList","@id":"https:\/\/mobilecoderz.com\/blog\/how-to-build-a-weather-application-with-react-and-react-hooks-complete-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mobilecoderz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Build A Weather Application With React And React Hooks? &#8211; Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/mobilecoderz.com\/blog\/#website","url":"https:\/\/mobilecoderz.com\/blog\/","name":"MobileCoderz","description":"","publisher":{"@id":"https:\/\/mobilecoderz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mobilecoderz.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/mobilecoderz.com\/blog\/#organization","name":"MobileCoderz Technologies Pvt Ltd","url":"https:\/\/mobilecoderz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobilecoderz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2016\/02\/logo-1-2.png","contentUrl":"https:\/\/mobilecoderz.com\/blog\/wp-content\/uploads\/2016\/02\/logo-1-2.png","width":100,"height":63,"caption":"MobileCoderz Technologies Pvt Ltd"},"image":{"@id":"https:\/\/mobilecoderz.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/MobileCoderz\/","https:\/\/x.com\/mobilecoderz"]},{"@type":"Person","@id":"https:\/\/mobilecoderz.com\/blog\/#\/schema\/person\/5b5a4724393a36f7d68add2099993c49","name":"MobileCoderz Technologies","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mobilecoderz.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a645212d7c47cc4a362c65b6672886d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a645212d7c47cc4a362c65b6672886d6?s=96&d=mm&r=g","caption":"MobileCoderz Technologies"},"description":"MobileCoderz has established itself as the first choice of small and medium-sized businesses in the mobility space within a short span of time. We have a young &amp; talented team of mobile strategists, UX\/UI designers, and App Developers. We have a client base that spreads across emerging startups to small &amp; medium size Business across the globe. MobileCoderz has helped in the development of World Class mobile apps for 500+ clients, collaborating with its team of 120+ nerds.","sameAs":["https:\/\/mobilecoderz.com\/blog","https:\/\/www.facebook.com\/MobileCoderz\/","https:\/\/www.instagram.com\/official.mobilecoderz\/","https:\/\/www.linkedin.com\/company\/mobilecoderz-technologies-pvt-ltd\/","https:\/\/www.pinterest.com\/mobilecoderz\/","https:\/\/x.com\/mobilecoderz","mobi@ppAdmin"],"url":"https:\/\/mobilecoderz.com\/blog\/author\/mobippadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/posts\/2834"}],"collection":[{"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/comments?post=2834"}],"version-history":[{"count":11,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/posts\/2834\/revisions"}],"predecessor-version":[{"id":10009,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/posts\/2834\/revisions\/10009"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/media\/8339"}],"wp:attachment":[{"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/media?parent=2834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/categories?post=2834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mobilecoderz.com\/blog\/wp-json\/wp\/v2\/tags?post=2834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}