Build a weather app using React for beginners

Tram Ho

Hello everyone, today I will introduce you a small application using React that is the weather app (see weather conditions by location). I personally find this app also covers quite a lot of basic knowledge of React, so it will help people who are new to React, or do not know anything about React. (When I first learned React, I also practiced to make this app ). The article is aimed at people who are new to React, so in practice I will kick through some basic components.

Well, no more words, let’s get started:

Prerequisites

  1. The only condition the app needs is React 16 or greater, because the code uses the arrow function inside the react component
  2. npm> 5.2 the better, no it doesn’t matter.

Create a React app

There are many ways to create a new React app, you can google to learn more, but I personally use the command line for convenience.  Open a terminal and type the following commands:

Note npx is used with npm version 5.2 or more, if your npm version is 5.1 or lower, you can create a new project by running the command:

App component

In ReactJS, each piece of code will be divided into components that are not interdependent and can be reused when needed. Specifically in our weather app will be divided into 3 components, which are:

  1. Component Titles: Displays the title, some small descriptions for the app (this part is only for coloring, but not necessary.
  2. Component Form: Displays the form for users to enter locations, cities to view
  3. Weather Component: Displays the result of the weather returned after the user enters the location

After creating a new React app, edit the directory structure as follows:

In which: components is the directory containing the components I have listed above

img is the folder that contains the background image

titles.js

form.js

App.js

ReactDOM

ReactDOM is an independent library used to render React components into the DOM. If you open the index.js file you will see we are rendering the App component using ReactDOM.

The ReactDOM.render () method takes two parameters, the first is the component to render, and the second is the html element (id, class …) to render.

Here we render the App component into the element whose id is root in the index.html file inside the public directory.

Now the App component has been rendered, import the title and form components, and then run npm start :

API call

Next, we’ll call an API to get data for our app. There are many APIs with large data sets updated regularly so we can get weather data such as metaweather, openweathermap... , in this article I will use OpenWeatherMap. Very simple, you just need to visit openweathermap.org/api , login, create an api keys and create a const in App.js you can call the API already: Or you can use your key: const Api_Key = "8d2de98e089f1c28e1a22fc19a24ef04"; 😅

Set the default value for any state:

Here I know in advance what the API will return, and what information I need to get, if you do not know what the API will return then console.log response or use Postman to check the response to create a state variable for suitable offline. ✌️ Next is the call API stage, create a getWeather () function and use async / await to get the results returned less complicated:

Where 2 city and country variables store the value of the user entering the city and country. We will use these two information to submit to the API via url.

This part calls the API and takes the return value assigned to the const response rest is the error handling part, and changes the state to display an error (if it occurs) or to display information.

This part is almost done. 🙄 Once the getWeather () method is available, we need to know when to call this function when it’s true. First we need to pass through the Form component, and call it when submitting the form via props:

App.js

form.js

A little forgotten, we need to import the weather component to display the information after calling the API again. 😅

App.js

and weather.js

We get:

It’s done temporarily, now is the last stage to makeup her a little bit more. =))

You can clone the code here: github

Conclude

Above I have introduced you how to create a basic weather app, hope that after the article you can better understand React. The article is a summary of my knowledge as well as a reference to some other websites, if there are deficiencies, please comment. Chin thanks and see you in the following article. 😄

Share the news now

Source : Viblo