Weather app with Reactjs

Github: https://github.com/swati1707/weather-app

Introduction: React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

In this tutorial, you’ll learn how to build weather application using Reactjs.

Prerequisites:

• Basics of React
• An openweathermap API key

Now let’s get started…

Step 1:- Setting up your project

Open your terminal and run below commands:

mkdir weather-app
cd weather-app
npm install create-react-app weather-app
npm start

This will create a project folder. The create-react-app sets the tools you need to start a react project. npm start command will open https://localhost:3000.

Step 2:- Create your App component

Create a file named App.js and add the below code:

import React from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import Form from "./components/form";
import Weather from "./components/weather";
const API_key="83985bda175bf0a119cefd45aa1ed4a3";
class App extends React.Component {
constructor(){
super();
this.state={
city:undefined,
country:undefined,
icon:undefined,
main:undefined,
celsius:undefined,
temp_max:undefined,
temp_min:undefined,
description:"",
error:false
};
}
calculateCelsius(temp){
let cel=Math.floor(temp-273.15);
return cel;
}
getWeather = async(e)=> {
e.preventDefault();
const city=e.target.elements.city.value;
const country=e.target.elements.country.value;
if(city && country) {
const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city} ,${country} &appid=${API_key}`);
const response = await api_call.json();

this.setState({
city:`${response.name},${response.sys.country}`,
celsius: this.calculateCelsius(response.main.temp),
temp_max: this.calculateCelsius(response.main.temp_max),
temp_min: this.calculateCelsius(response.main.temp_min),
description: response.weather[0].description,
error:false
})
} else {
this.setState({error:true});
}
}
render() {
return (
<div className="App">
<Form loadWeather={this.getWeather} error={this.state.error} />
<Weather
city={this.state.city}
country={this.state.country}
temp_celsius={this.state.celsius}
temp_max={this.state.temp_max}
temp_min={this.state.temp_min}
description={this.state.description}
/>
</div>
);
}
}
export default App;

This is the main component of your application where you’ll declare the state, where an API call is made. The App component has two children components namely Weather component and Form component. And both the child components interact with each other through this App component.

Step 3:- Create Form component

Now let’s create form component.

This component contains a form using which user can enter the city and country name to request the weather data. Below is the code for form component:

import React from 'react';
const Form = props => {
return (
<div className="container">
<div>{props.error ? error() : null}</div>
<form onSubmit={props.loadWeather}>
<div>
<input className="form-control" type="text" name="city" placeholder="City" autoComplete="off" />
</div>
<div>
<input className="form-control" type="text" name="country" placeholder="Country" autoComplete="off" />
</div>
<div>
<button className="btn btn-secondary">Get weather</button>
</div>
</form>
</div>
);
};
function error(){
return(
<div className="alert alert-danger mx-5" role="alert">
Please enter City and Country !!
</div>
)
}
export default Form;

You can create a functional component over here as this component doesn’t require state.

Step 4:- Create Weather component

Now that the user has requested for the data and an API call is also made, it’s time to display the data fetched from the API. So let’s create a weather component which will display the data fetched from the API.Below is the code for Weather component:-

import React from 'react';
const Weather = props => {
return (
<div className="container weather">
<div className="cards pt-4">

<h1>{props.city}</h1>
{props.temp_celsius ?
<h1 className="py-2">{props.temp_celsius}&deg;</h1> : null}
{minmaxTemp(props.temp_max,props.temp_min)}
<br></br>
<h4 className="py-3">{props.description}</h4>
</div>
</div>
);
}
function minmaxTemp(min,max){
if(min&&max){
return(
<h3>
<span className="px-4">{min}&deg;</span>
<span>|</span>
<span className="px-4">{max}&deg;</span>
</h3>
)
}
}
export default Weather;

Now start your server at http://localhost:3000/ in your browser.

That’s it. You’ve successfully created a weather application with ReactJs.