Build a weather web application in React JS | React JS beginner Tutorial

-

 



Let's learn more about how all this works by building a weather application using React JS.

Installing Node and npm


Building a weather web application in React JS, we will have run-time environment called Node. It is mostly used to execute JavaScript code.

To download it, go to https://nodejs.org/en/.

You'll also need npm, which is a package manager built on Node. You can use it to install packages for your JavaScript apps. Fortunately it comes with Node, so you don't need to download it manually.

Once both of them are finished, open your terminal or command prompt and type node -v. and check npm -v .This checks which version of Node you have.


How to Create a React App


For creating our react application, just open your project directory and open the terminal and type npx create-react-app <Your app name> in your terminal, or npx create-react-app weather-app for this project.

You'll see that the packages are being installed.

Once the packages are done, go into the project folder by using cd weather-app and type npm start.

You'll see the default React js template, like this:








We don't need all of this right now. So, let's clear out some code.

In your App.js , App.css , index.css file, clear everything inside the div tag. Remove the logo import and delete all css in css files.

You will receive a blank screen on the output once you have done that.


How to Install the Packages We Need

To make this application more attractive, we need some external packages. So, let's install them.



We need moment.js to format our time. Install it using the following command:
npm install moment --save

You can check your package.json file to keep track of all the installed packages.




How to Create Our Weather Application


To make our weather application work, we need OpenWeatherMap, a third-party API that'll let us fetch the weather data.

Go to https://home.openweathermap.org/users/sign_up and create your own account.

After you are done, click on the API option on the Navigation bar. You'll see different options like Current Weather Data, Hourly 4 hour forecasts, 16 day forecasts, and others. These are API endpoints that you'll need to fetch the data.






To change our weather application background, we need unsplash, a third-party API that'll let us return image relevant to the weather.









How to Fetch  Weather API Data

To fetch weather api data we just request using the fetch in react js using useEffect
then store the data in useState variable in json format first we will fetch the current weather data of that city and then after fecth forecast data of the city if city is available then data will be consoled on browser otherwise it will alert that city not found.






Now, let's write final code in our  app.js file.



Let's Do Some Styling


Now that we have all our data, let's style them to make it more attractive.






Let's Recap What We've Done


We have created a React application that shows the current weather using the openweathermaps api based on your city and we just got current weather data forecast data as well and we have used moment.js to make the format  the timestamp an we also used react hooks and useEffect . 




That's all. You can add more features to the app, like in style or as well as there are a lot more feature in weather API  like a five-day forecast, icons, and more.

You can find the code on Github if you want to experiment further.










Comments

Post a Comment

Popular posts from this blog

Factorial of the "N" natural numbers using recursion and iterative method in CPP language

-
Image
In this post, I am gonna show you how to find factorial of N numbers using recursion and as well as iterative approach, Here is the video clip of recursion that will visualize that how the recursion work.    Here's the code below in this code I have used input.txt and outout.txt for input-output purpose. and you can also use the code below and visualize using the recursion visualizer tool using this link https://recursion.now.sh/ Recursive approach It will take one integer value to find out the factorial and in this, we will take the first base condition, where the recursion will stop and we will get our final answer, and second which will create the stack size of the given number. Iterative Approach For the iterating approach, we just have to iterate the one variable "i" until we got the last number "n". and parallelly multiplying it with the "fact" variable which we have declared as "1" before.
Read more

Solution for "Developer Error" In React Native Google Authentication

-
Image
  " Developer Error " In React Native Google Authentication So in this post, I am gonna show you how you will figure out the developer error in react native google authentication like this is a common error while you start learning about google authentication so make sure anything you are doing of installing any type of dependencies must follow the whole documentation properly because this is the major issue while start learning new technology or something other you are doing is your project so let's start about this topic. Dependencies For RN >= 0.60 please use version installed from @react-native-google-signin/google-signin yarn add @react-native-google-signin/google-signin For RN <= 0.59 use version 2 installed from react-native-google-signin yarn add react-native-google-signin Make sure you properly installed this dependency in your project follow this documentation link below https://github.com/react-native-google-signin/google-signin So this error is shown to ...
Read more

No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs,

-
Image
Just got a solution to an error which I was facing for the last 2 days, It was really a bit mistake which I was doing but now resolved,  I was trying to send a SMS from Twilio API  // const app = express();  const express = require('express');  app.use(cors()); <<<<< // if you just comment on this above line you get the same error mentioned below, I have set upped react server/website on 3000 port and express server on 4000 port. so the website sends a post request running on 3000 port to the server on port 4000 mechanisms called cross-origin request. // Access to fetch at 'http://localhost:4000/api/send-sms' from origin 'http://localhost:3000' has been  blocked by CORS policy: Response to preflight request doesn't pass access control check:  No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CO...
Read more