5 Steps to Create a Weather Data Component in React Apps


Data services are an essential function of the web. People access the Internet to discover a variety of information and ideas, including searching for information such as weather situation.

On virtually every news site there is a component that indicates the city’s temperature and outdoor conditions.

In this tutorial, we will present the 5 steps to build a component like this image.

Web components are functions that work in an encapsulated fashion. They have individual interoperability with other elements of the HTML page.

Some components can work independently and individually with native elements.

An API can leverage custom components. The Application programming interface is a kind of messenger.

The main job is to make the link between the programs. The API requests the information from a data server, translates the data, and sends it back to the browser.

In 2021, the most common format is JavaScript Object Notation (JSON). JSON is an open file format that uses human readable text. The data is passed in goals made up of attribute-value pairs and arrays.

The model has several advantages. A critical factor is the ease of integration of the API into the application. It was a fundamental step towards popularization.

1) Choose a cloud-based API service

The market trend is the emergence of dedicated API services. This type of work allows developers to rethink the process of integrating roles.

Data-driven tools enable full automation for businesses.

An example of this type of service is apilayer, brand Idera Devs Tools, which offers a range of 20 types of API with several functions.

For weather data, one of the most popular options is Weatherstack.

According to apilayer, 75,000 companies use this API. The tool’s proposal is interesting: API weather data from around the world in real time and history.

The company can integrate the API with other tools such as PHP, Python, Nodejs, jQuery, Go and Ruby.

2) Obtain API authorization

First, the developer needs to register on Weatherstack (https://weatherstack.com/signup/free).

In this tutorial, we will be using the free plan. The service offers monthly paid options that vary depending on the number of API calls the app needs.

Certain data is requested, such as e-mail, name and address.

Logging into the account can access the API dashboard.

The dashboard allows you to query the number of requests made from the API. Operation is intuitive.

The step of Weatherstack integration is to capture the API access key.

The access key is the personal access key required by the tool for authentication.

The key is a string of 32 letters and numbers.

3) Definition of the end point

The developer should now set the API endpoint. The endpoint is a URL link with the information to access the API data and some parameters on the required return.

It is the technology that enables the personalization of requests.

In Weatherstack, the endpoint can choose between current weather, historical weather, historical time series, and weather forecast. Another parameter is the location search.

The main request URL is http://api.weatherstack.com, which comes with the time parameter, a question mark, access key, ampersand, and request.

The API URL Endpoint Format will be in the code as in the example below but without the spaces.

// Current weather API endpoint for New York


? access_key = 301faca57745d3aba9612fd6077d213f)

& query = New York

// optional parameters:

& units = m

& language = en

& reminder = REMINDER

Basically what the developer has to do is get the URL (http://api.weatherstack.com/current?access_key = 301faca57745d3aba9612fd6077d213f) & query = New York) and make a request in the app.

The dashboard allows you to query the number of requests made from the API. Operation is intuitive.

4) Creation of an application project

To start coding the component, we’ll use Create New React App (https://reactjs.org/docs/create-a-new-react-app.html). The developer must have at least version 14 of Node and version 5.6 of npm installed on the machine.

When creating a project, it is possible to access a development environment with JavaScript resources.

A React app doesn’t work with backend logic or a database. It creates a front-end pipeline for use with the implementation of other functions.

npx create-react-app name_app

cd_app name

start npm

With these commands, the project file is created and runs in http: // localhost: 3000. The creation process may take a few minutes.

The coder can do the development of the project in the preferred IDE (integrated development environment). For this tutorial, we are using Visual Code.

5) Coding of the weather component

In the src folder, create a .js file named Weatherstack to encode the component.

For this tutorial, we’ll be using React’s native styling. The developer can freely create the component with the appearance he wants.

The first code to create is a class component. In React, the coder can reuse components in other projects. It works like JavaScript but in isolation, with HTML returns via the render () function.

import ‘./App.css’;

import React, {Component} from “react”;

the Weatherstack class extends the component {

render () {






export Weatherstack by default;

Next, we’ll define the constructor (), a method used to initialize the state of the object in a given class. In any constructor, code must call super (props) before any other statement. This code snippet is before render ().

In this document, we define what information the API returns that we will use. In this case, it is the city, temperature, time icon and date.

manufacturer (accessories) {

super (accessories);

this.state = {

city: [],

Temperature: [],

Dated: [],

icon: []



To call the data from the Weatherstack API, we use componentDidMount ().

This method is called immediately after the component is assembled. React is an option to instantiate a request if the project needs data from a remote endpoint.

To get the API interface, we use fetch, which allows data manipulation and access. There we indicate this captured endpoint on the API website.

The software can update the variables defined in the constructor () in the set.State. It is necessary to check the JSON format of the Weatherstack API. Other information is provided by the API but will not be used in this project.

We indicate the location of the information in the variables as in the example below.

componentDidMount () {

go get (

“http://api.weatherstack.com/current?access_key=301faca57745d3aba9612fd6077d213f&query=New York”


.then ((res) => res.json ())

.then ((data) => {

this.setState ({

city: data.location.name,

temperature: data.current.temperature,

date: data.location.localtime,

icon: data.current.weather_icons




In this part, the component can access the data of the API if it is executed.

What the component lacks is the front end itself. In render (), the information collected is highlighted.

render () {

const {city, temperature, date, icon} = this.state;

to recover (

{temperature} ° C is the current temperature

in the city of {city}






The component is done. Now it’s time to import it into App.js. Before, it is recommended to delete the elements of this file that come in React projects.

import ‘./App.css’;

import Weatherstack from ‘./Weatherstack.js’;

App () function {

to recover (



export the default application;

The component is ready to be used in any project. On localhost, the developer can check the end result.

The cleanliness with which the API delivers data to the browser offers endless possibilities.

Front-end development is possible to present this information in the application in a completely personalized way.

With an API like this, the developer can deliver robust projects without spending hours building functions like this.

Featured Image: NOAA, Unsplash.


Leave A Reply