Building a Responsive Weather App with React

Fetching and Displaying Weather Data

By - ABDUL YESDANI

Objective:

This document will help you prepare for the workshop on building a responsive weather app using React. You will learn the basics of React, how to use APIs, and how to work with data fetched from an API. By the end of the workshop, you’ll build a simple weather app that fetches real-time weather data.

1. What is React?

React is a JavaScript library used to build user interfaces, especially for single-page applications. It lets you create components, which are reusable, isolated pieces of code that define a part of your user interface.

Key Terms

Component: Think of components as building blocks for your app. Each part of your app’s UI can be a component, like a button, form, or navigation bar.
JSX: A syntax extension for JavaScript, which looks a lot like HTML. JSX is used to describe what the UI should look like.
State: Data that controls what gets rendered on the screen. State can change over time, like input values or the weather data we'll fetch.
Props: Short for “properties,” props are data passed from one component to another.

2. Setting Up the Development Environment

Before the workshop, you need to install the following tools:

Node.js and npm (Node Package Manager):

Node.js: Allows us to run JavaScript on our computer outside a browser.
npm: A tool to install and manage libraries we use in our React app.
Download Node.js from here.

For most users, the LTS (Long Term Support) version is recommended.
To confirm installation, open your terminal/command prompt and type:
C:\Users\LENOVO>node -v
v21.7.3 (The version can be different based on the installation)
C:\Users\LENOVO>npm -v
10.9.0

Visual Studio Code (VSCode):

A text editor that makes writing and managing code easier.
Download it from here.
Open the terminal in VSCode with Ctrl + ~ or from the menu.

Setting Up a React Project
Step 1: Install Create-React-App
React comes with a tool called create-react-app that helps you set up a React project quickly.
1. Open your terminal and run the following command to create a new React app:
```
npx create-react-app weather-app
```
  This command will create a new folder named weather-app with all the files and libraries needed to get started.
2. Navigate into the project folder:
```
cd weather-app
```
3. Start the development server:
```
npm start
```
  This command will start a local server, and your app will open in a browser window at http://localhost:3000/. You should see the default React welcome page.
Step 2: Understand the Project Structure
When you open the project folder, you'll see several files and folders. Here are the key ones:

public: This folder contains static files like images and the index.html file.
src: This is where all your React code will live.
App.js: The main component where you will write your code.
index.js: This is the entry point of the React app, responsible for rendering the App component.

Introduction to APIs
An API (Application Programming Interface) allows different software systems to communicate with each other. For this workshop, we'll use an API from OpenWeatherMap to fetch live weather data.
How APIs Work:

APIs use HTTP requests to communicate. In our case, we'll send a request to OpenWeatherMap’s API asking for weather data, and the API will send back the data in a format called JSON (JavaScript Object Notation).

Fetching Data from OpenWeatherMap
Step 1: Get an API Key
To access the OpenWeatherMap API, you need to create a free account and get an API key.
1. Go to the OpenWeatherMap website.
2. Sign up for a free account and navigate to the API keys section.
3. Copy your API key (you’ll use this in the code).
Step 2: Fetching Data Using fetch
To get weather data, we’ll use the axios.get( ) or fetch() function in JavaScript. This function sends an HTTP request to the API and gets the response back.
Introduction to React Hooks
In our weather app, we will use two important React hooks: useState and useEffect.
useState

This hook allows you to create and update state in your component.

Example:


const [weather, setWeather] = useState(null);

Responsive Design Basics
Responsive Design ensures that your app looks good on different screen sizes (phones, tablets, and desktops). You can use CSS or Styled Components to make your app responsive.
CSS Flexbox/Grid
Flexbox and Grid are two modern layout systems that make responsive design easier.
- Flexbox: Helps arrange elements in rows or columns.
```
css

.container {
  display: flex;
  flex-direction: column;
}
```
- Grid: Provides a grid-based layout.
```
css

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
}
```
Media Queries
Use media queries to apply styles based on screen size.
```
css

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
```
Error Handling in React In any application, you’ll need to handle errors gracefully. When fetching data, errors like network issues or incorrect city names can occur. Example: try {
const response = await axios.get(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${process.env.REACT_APP_OPENWEATHER_API_KEY}&units=metric`
);
setWeatherData(response.data);
} catch (err) {
setError('City not found. Please try again.');
}
Workshop Expectations
- Hands-On Practice: During the workshop, you’ll code along with the instructor, so be ready to type out code as we go.
- Ask Questions: Don't hesitate to ask questions if something isn't clear. The goal is to help you understand React, APIs, and building responsive web apps.
- Prepare Ahead: Try to have Node.js, npm, and Visual Studio Code installed before the workshop. This will save time and let us focus on coding.
What You’ll Learn
By the end of the workshop, you will:
- Understand React basics: components, state, and hooks.
- Know how to fetch data from an API using fetch or Axios.
- Build a weather app that displays real-time weather data.
- Implement basic responsive design using CSS.
- Handle errors and loading states in your app.

ASKYEDU

Search This Blog