Open In App

Create a weather Application using React Redux

Last Updated : 30 Apr, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Weather App is a web application designed to provide real-time weather information for any location worldwide. In this article, we will make a Weather App using React and Redux. It offers a seamless and intuitive user experience, allowing users to easily access accurate weather forecasts ( temperature, wind speed, humidity etc.) by just entering any city name.

Project preview:

wethear-app
Weather App

Prerequisites:

Approach

  • React App & dependencies : Use Create React App to set up a new React project named weather-app and install Redux, React Redux and Axios.
  • Redux Setup : Create a store.js file to set up the Redux store, define required reducers and actions and use createStore method to create store.
  • Weather API : Select a weather API platform, create an account, and integrate its keys and endpoint into your React app.
  • Component : Implement weather display, location input, loading indicator, and error message in the weather app and also integrating Redux state and actions.

Steps to Create React Application

Step 1: Create React Application named weather-app and navigate to it using this command.

npx create-react-app weather-app
cd weather-app

Step 2: Install required packages and dependencies.

npm install react-redux redux axios

Updated dependencies in package.json file

Installed dependencies will look like the below file in package.json file.

 "dependencies": {
"axios": "^1.6.8",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.1",
"redux": "^5.0.1"
},

File structure:
wethear-app-project-structure
Project Structure

Example:

CSS
/* App.css */

#App-wrapper {
  /* text-align: center; */
  justify-content: center;
  display: flex;
}
#app {
  text-align: center;
  width: 500px;
  display: flex;
  flex-direction: column;
}

#head {
  display: flex;
  gap: 10px;
  align-items: center;
}

input {
  padding: 10px 20px;
  border: 1px solid black;
  margin: 5px;
}
button {
  padding: 10px 20px;
  border: 1px solid black;
  /* margin: 5px; */
  cursor: pointer;
  background-color: rgb(230, 230, 230);
}
button:hover {
  background-color: rgba(9, 204, 9, 0.61);
}

p {
  background-color: rgb(230, 230, 230);
  padding: 10px 20px;
  margin: 5px 0px;
  text-transform: capitalize;
}
p span {
  color: green;
}
JavaScript JavaScript JavaScript


Command to Run Weather Application:

To run weather application open your terminal and navigate to weather-app directory and enter the following command.

npm start

Output:

wethear-app
Weather App



Similar Reads