Lab Learning Workbook: Building a Weather App with React.js and OpenWeatherMap API

Lab Checklist:

Learning Outcomes:

Network programming using the Axios

NMPjs.com

⁠

library

To build a weather application in React.js that fetches data from the OpenWeatherMap API, you will need to install and use several npm packages.

Here are some of the key packages that you might need:

React: This is the core library for building user interfaces in JavaScript. It allows you to create reusable UI components and manage their state

1

⁠

.

Installation: npm install react

Axios: This is a promise-based HTTP client for making HTTP requests from the browser. It can be used to make the HTTP call to the OpenWeatherMap API

6

⁠

.

Installation: npm install axios

react-http-request: This is a React component that exposes network request functionality. It can be used to perform a network request and parse the response

2

⁠

.

Installation: npm install --save react-http-request

http-react: This is a React hooks library for data fetching. It's built on top of the native Fetch API and can be used to make the HTTP request to an API server, in this case: the OpenWeatherMap API

4

⁠

.

Installation: npm install --save http-react

Formik: This is a popular open-source library for managing forms in React applications. It can be used to create the input form for specifying the city

5

⁠

.

Installation: npm install formik

Remember to import these packages in your React.js files using the import statement before using them.

For example, to use Axios, you would add the line import axios from 'axios'; at the top of your file

6

⁠

.

Please note that the exact packages you need may vary depending on the specific requirements of your application and your personal preferences.

Always refer to the official documentation of each package for the most accurate and up-to-date information.

Welcome to the Weather App Lab!

## Prerequisites

Before we begin, you will need to sign up for a free account with OpenWeatherMap to get an API key. You can get an API key by following this link:

https://home.openweathermap.org/users/sign_up

⁠

[14].

## Benefits of Using a Cloud-Based IDE

## Step-by-Step Guide

### Step 3: Adding React Libraries

### Step 4: Writing the React Component

In the JS section, write the following code:

### Step 5: Fetching Data from the OpenWeatherMap API

We will now modify our `WeatherApp` component to fetch data from the OpenWeatherMap API. Replace the existing `WeatherApp` code with the following:

To allow the user to specify the city to pull the weather from, we can add an input form to our React.js application. This form will give the user the option to enter a city name. When the user submits the form, the application will make an HTTP call to the OpenWeatherMap API to retrieve the weather data for the specified city. Here's how you can implement this:

### Step 6: Adding User Input

First, we need to add an input form to our `WeatherApp` component. Modify the `render` method as follows:

```javascript render() { const { weatherData } = this.state;

if (!weatherData) return <div>Loading...</div>;

return ( <div> <form onSubmit={this.handleSubmit}> <input type="text" value={this.state.city} onChange={this.handleInputChange} /> <input type="submit" value="Get Weather" /> </form> <h1>Weather in {weatherData.name}</h1> <h2>{Math.round(weatherData.main.temp - 273.15)}°C</h2> <p>{weatherData.weather[0].description}</p> </div> ); } ```

Next, we need to add the `handleInputChange` and `handleSubmit` methods to our `WeatherApp` component to handle the form submission:

```javascript handleInputChange(event) { this.setState({ city: event.target.value }); }

handleSubmit(event) { event.preventDefault(); this.fetchWeatherData(this.state.city); } ```

Finally, we need to modify the `componentDidMount` method to `fetchWeatherData` method and call this method in `handleSubmit`:

```javascript fetchWeatherData(city) { fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`) .then(response => response.json()) .then(data => this.setState({ weatherData: data })); } ```

Remember to replace `YOUR_API_KEY` with your actual API key from OpenWeatherMap[5].

Now, when the user enters a city name into the input form and clicks the "Get Weather" button, the application will fetch and display the weather data for the specified city.

Citations: [1] https://youtube.com/watch?v=Reny0cTTv24 [2] https://www.htmlhints.com/article/how-to-create-weather-app-using-reactjs-with-current-location-search-city/93 [3] https://www.freecodecamp.org/news/learn-react-by-building-a-weather-app/ [4] https://github.com/topics/react-weather-app [5] https://rapidapi.com/blog/weather-app-react/ [6] https://youtube.com/watch?v=xBqEWbirtvA