Build a Simple Weather App with React: A Beginner’s Guide

Written by

learnmodernjavascript

in

In today’s digital world, users expect instant access to information. One of the most sought-after pieces of data? The weather. Building a weather application is an excellent project for developers of all levels, offering a practical way to learn and solidify your React skills. This tutorial will guide you through creating a simple, yet functional, weather app. We’ll cover everything from setting up your React environment to fetching data from a weather API and displaying it in a user-friendly interface. Whether you’re a beginner taking your first steps into React or an intermediate developer looking for a refresher, this guide will provide you with the knowledge and code snippets you need to succeed.

Why Build a Weather App?

Creating a weather app offers several advantages for aspiring React developers:

  • Practical Application: You’ll learn how to interact with external APIs, a crucial skill for any web developer.
  • State Management: You’ll work with React’s state management, understanding how to update and display dynamic data.
  • Component Composition: You’ll practice breaking down your app into reusable components.
  • User Interface Design: You’ll gain experience in creating a clean and intuitive user interface.
  • Real-World Relevance: Weather apps are universally understood, making it easy to showcase your skills.

This project is perfect for beginners because it’s manageable in scope, yet it covers essential React concepts. It’s also a great way for intermediate developers to practice best practices and refine their skills.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies.
  • A code editor: Visual Studio Code, Sublime Text, or any editor you prefer.
  • Basic knowledge of HTML, CSS, and JavaScript: You should be familiar with the fundamentals.

Setting Up the Project

Let’s start by creating a new React application using Create React App. Open your terminal and run the following command:

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

This command creates a new React project named “weather-app” and navigates you into the project directory. Now, let’s install some dependencies we’ll need. For this project, we’ll use Axios for making API requests. Run the following command in your terminal:

npm install axios

This installs Axios, a popular library for making HTTP requests from your browser or Node.js. Now, open the project in your code editor.

Project Structure and Component Breakdown

We’ll structure our application with the following components:

  • App.js: The main component that renders other components and manages the overall application state.
  • SearchBar.js: A component for the user to enter a city and submit their search.
  • WeatherDisplay.js: A component to display the weather information.

This structure promotes modularity and maintainability. Each component has a specific responsibility, making the code easier to understand and debug.

Building the SearchBar Component

Create a file named SearchBar.js inside the src directory. This component will contain an input field for the city and a button to trigger the weather search.

import React, { useState } from 'react';

function SearchBar({ onSearch }) {
  const [city, setCity] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (city.trim() !== '') {
      onSearch(city);
      setCity(''); // Clear the input after submission
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginBottom: '20px' }}>
      <input
        type="text"
        placeholder="Enter city..."
        value={city}
        onChange={(e) => setCity(e.target.value)}
        style={{ padding: '8px', marginRight: '10px', borderRadius: '4px', border: '1px solid #ccc' }}
      />
      <button type="submit" style={{ padding: '8px 15px', borderRadius: '4px', backgroundColor: '#007bff', color: 'white', border: 'none', cursor: 'pointer' }}>Search</button>
    </form>
  );
}

export default SearchBar;

Let’s break down the code:

  • Import React and useState: We import useState to manage the input field’s value.
  • City State: const [city, setCity] = useState(''); initializes a state variable city with an empty string. This variable holds the user’s input.
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior (page refresh), checks if the city input is not empty, calls the onSearch prop function (which we’ll define in App.js), and clears the input field.
  • Form and Input: The component renders a form with an input field and a submit button. The onChange event updates the city state as the user types, and the value prop binds the input field to the city state. Styling is added inline for simplicity, but you would normally use CSS or a CSS-in-JS solution.
  • onSearch Prop: This prop is passed from the parent component (App.js) and is a function that handles the search logic.

Building the WeatherDisplay Component

Create a file named WeatherDisplay.js inside the src directory. This component will display the weather information fetched from the API.

import React from 'react';

function WeatherDisplay({ weatherData, error }) {
  if (error) {
    return <p style={{ color: 'red' }}>{error}</p>;
  }

  if (!weatherData) {
    return <p>Enter a city to see the weather.</p>
  }

  return (
    <div style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px' }}>
      <h2>Weather in {weatherData.name}, {weatherData.sys.country}</h2>
      <p>Temperature: {Math.round(weatherData.main.temp)}°C</p>
      <p>Weather: {weatherData.weather[0].description}</p>
      <p>Humidity: {weatherData.main.humidity}%</p>
      <p>Wind Speed: {weatherData.wind.speed} m/s</p>
    </div>
  );
}

export default WeatherDisplay;

Explanation:

  • Props: This component receives two props: weatherData (the weather information) and error (any error message).
  • Error Handling: It first checks if there’s an error and displays an error message if so.
  • Loading State: If no weather data is available, it displays a prompt for the user to enter a city.
  • Data Display: If weatherData exists, it displays the city name, country code, temperature, weather description, humidity, and wind speed. The temperature is rounded to the nearest whole number.
  • Styling: Basic inline styling is used for layout and readability.

Building the App Component (App.js)

Now, let’s create the main component, App.js, which brings everything together. Replace the contents of src/App.js with the following code:

import React, { useState } from 'react';
import axios from 'axios';
import SearchBar from './SearchBar';
import WeatherDisplay from './WeatherDisplay';

const API_KEY = 'YOUR_OPENWEATHERMAP_API_KEY'; // Replace with your actual API key

function App() {
  const [weatherData, setWeatherData] = useState(null);
  const [error, setError] = useState(null);

  const handleSearch = async (city) => {
    try {
      const response = await axios.get(
        `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`
      );
      setWeatherData(response.data);
      setError(null);
    } catch (err) {
      if (err.response) {
        // The request was made and the server responded with a status code
        // that falls out of the range of 2xx
        setError(err.response.data.message);
      } else if (err.request) {
        // The request was made but no response was received
        setError('Network error. Please check your internet connection.');
      } else {
        // Something happened in setting up the request that triggered an Error
        setError('An error occurred. Please try again later.');
      }
      setWeatherData(null);
    }
  };

  return (
    <div style={{ fontFamily: 'sans-serif', padding: '20px', textAlign: 'center' }}>
      <h1>Weather App</h1>
      <SearchBar onSearch={handleSearch} />
      <WeatherDisplay weatherData={weatherData} error={error} />
    </div>
  );
}

export default App;

Let’s break down this crucial component:

  • Imports: We import necessary components and libraries: useState, axios, SearchBar, and WeatherDisplay.
  • API Key: Replace 'YOUR_OPENWEATHERMAP_API_KEY' with your actual API key from OpenWeatherMap. You’ll need to sign up for a free API key at OpenWeatherMap.
  • State Variables:
    • weatherData: Stores the weather data fetched from the API (initially null).
    • error: Stores any error messages (initially null).
  • handleSearch Function:
    • This asynchronous function is called when the user submits the search form.
    • It uses axios.get() to fetch weather data from the OpenWeatherMap API using the city entered by the user. The API endpoint includes the city name (q=${city}), units (units=metric for Celsius), and your API key (appid=${API_KEY}).
    • If the API call is successful (status code 200), it updates the weatherData state with the received data and clears any previous error messages.
    • It includes comprehensive error handling using a try...catch block. It checks for different types of errors: server responses with error codes, network errors (no response), and other unexpected errors. Error messages are set accordingly, and the weather data is reset to null to prevent displaying outdated information.
  • JSX Structure: The component renders a heading, the SearchBar component (passing the handleSearch function as a prop), and the WeatherDisplay component (passing the weatherData and error states as props).

Connecting the Components

Now that we have all three components ready, we need to connect them. The App.js component acts as the central hub, managing the state and passing data to its children.

  • The SearchBar component receives the handleSearch function as a prop. When the user submits the form in SearchBar, this function is called, triggering the API request and updating the weather data.
  • The WeatherDisplay component receives the weatherData and error states as props. It displays the weather information if weatherData has a value and renders an error message if the error state has a value.

Styling (Basic CSS)

While inline styles are used in the example for brevity, you should ideally use a separate CSS file or a CSS-in-JS solution for better organization and maintainability. Create a file named App.css in the src directory and add the following CSS rules:

body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.app-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h1 {
  color: #333;
}

input[type="text"] {
  padding: 8px;
  margin-right: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  padding: 8px 15px;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  margin: 5px 0;
}

Then, import this CSS file into App.js by adding this line at the top of App.js:

import './App.css';

Modify the App.js to use the CSS classes. For example:


function App() {
    // ... (previous code)

    return (
        <div className="app-container">
            <h1>Weather App</h1>
            <SearchBar onSearch={handleSearch} />
            <WeatherDisplay weatherData={weatherData} error={error} />
        </div>
    );
}

Running the Application

To run the application, execute the following command in your terminal within the project directory:

npm start

This command starts the development server, and your weather app should open in your browser at http://localhost:3000 (or another available port). Enter a city name in the search bar, and you should see the weather information displayed.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • API Key Errors: The most common issue is forgetting to replace 'YOUR_OPENWEATHERMAP_API_KEY' with your actual API key or using an invalid key. Double-check your key in the code and make sure it’s correct.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the API request. This can happen if the API doesn’t allow requests from your origin (localhost:3000). You can usually resolve this by using a proxy in development. One simple way is to use a proxy setting in your package.json file. Add the following line to the package.json file, inside the root object, but *outside* of the “scripts” object: 
    "proxy": "https://api.openweathermap.org/"

    Then, in your App.js, you’ll modify the API call to remove the full URL and just use the path:

    const response = await axios.get(`/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`);

    This tells the development server to proxy all requests to the OpenWeatherMap API. You’ll need to restart the development server after making this change. For production, you’ll need to configure a proper proxy on your server.

  • Incorrect API Endpoint: Double-check the API endpoint URL for any typos or errors. Make sure you’re using the correct parameters (e.g., q for city name, appid for your API key).
  • State Management Issues: Make sure you’re updating the state correctly using setWeatherData() and setError(). Incorrect state updates can lead to unexpected behavior.
  • Network Errors: Ensure you have a stable internet connection. If the API call fails, the `catch` block should handle the error and provide a user-friendly message.
  • Data Display Errors: If the data isn’t displaying correctly, inspect the weatherData object in your browser’s developer console (using console.log(weatherData) inside the WeatherDisplay component’s render method) to see if you are accessing the correct properties.

Enhancements and Next Steps

Once you have the basic weather app working, consider these enhancements to improve its functionality and user experience:

  • Error Handling: Implement more robust error handling, providing specific error messages to the user based on the type of error.
  • Loading Indicator: Display a loading indicator (e.g., a spinner) while the weather data is being fetched.
  • Unit Conversion: Allow users to switch between Celsius and Fahrenheit.
  • Geolocation: Implement geolocation to automatically detect the user’s location and display the weather for their current city.
  • More Detailed Weather Information: Display additional weather details, such as the hourly forecast, UV index, and air quality.
  • UI Improvements: Enhance the user interface with more appealing styling and layout. Consider using a UI library like Material UI, Ant Design, or Bootstrap.
  • Search History: Save the user’s search history using local storage.
  • Deployment: Deploy your app to a platform like Netlify or Vercel so that it can be shared with others.

Key Takeaways

  • You’ve learned how to create a simple weather app using React.
  • You’ve gained practical experience with API calls, state management, and component composition.
  • You now have a solid foundation for building more complex React applications.

FAQ

  1. How do I get an API key for the OpenWeatherMap API?

    Go to OpenWeatherMap, create a free account, and generate an API key. Be sure to keep your API key secure and do not share it publicly.

  2. What is CORS, and why am I getting CORS errors?

    CORS (Cross-Origin Resource Sharing) is a browser security feature that restricts web pages from making requests to a different domain than the one that served the web page. You might get CORS errors because the API server doesn’t allow requests from your origin (localhost:3000). Using a proxy in development (as shown above) is a common solution.

  3. How can I style my React components?

    You can use inline styles (as shown in this tutorial for simplicity), separate CSS files, or CSS-in-JS libraries (e.g., styled-components, Emotion) for more advanced styling. Choose the method that best suits your project’s complexity and your personal preference.

  4. How can I deploy my React app?

    You can deploy your React app to various platforms, such as Netlify, Vercel, GitHub Pages, or AWS. Each platform has its own deployment process. Typically, you’ll need to build your React app (npm run build) and then deploy the contents of the build directory.

  5. Where can I find more resources for learning React?

    The official React documentation (react.dev) is an excellent resource. You can also find many tutorials, courses, and documentation on websites like MDN Web Docs, freeCodeCamp, and Udemy.

Building a weather app is a rewarding project that combines practical skills with a useful outcome. By following this guide, you’ve taken a significant step forward in your React development journey. Remember that the key to mastering React, or any programming language, is consistent practice. The more projects you undertake, the more comfortable you’ll become with the concepts and the more confident you’ll be in your ability to build amazing web applications. Continue to explore, experiment, and learn, and you’ll be well on your way to becoming a proficient React developer. Embrace the challenges, celebrate the successes, and enjoy the process of creating something from scratch. The world of web development is constantly evolving, so stay curious and keep learning – the possibilities are endless.

More posts