About the
Lab.

Welcome to the Weather App Lab. In this session, we'll dive deep into React development and build a flash weather dashboard that talks to real-world servers.

Recommended Learning

Master React.js

Understand the virtual DOM, state management, and component-based thinking in our deep-dive React guide.

Start Learning

Original App Preview

London...

GO

24°

London

What we are building

We'll be constructing a Atmosphere Dashboard from scratch, covering environment configuration, Fetch API for live data, React Hooks for state management, and a clean component architecture. By the end of this lab, you'll have a deeper understanding of Unidirectional Data Flow.

Lab Objectives

1
Master React component hierarchy and props.
2
Integrate live weather data via REST APIs.
3
Implement reactive state for instant UI updates.

The Toolbelt

Before we write a single line of React, we need the runtime and the environment to build it.

Node.js

The JS runtime environment.

Download LTS →

VS Code

The industry standard editor.

Get Code →

The Action Plan

Install Node.js (LTS) to enable terminal commands.
Open VS Code and install the "ES7+ React/Redux/React-Native snippets" extension.

Why Node?

React doesn't run in a vacuum. Node.js allows us to use npm (Node Package Manager) to pull in libraries like React, Vite, and Lucide Icons into our local workspace.

Spinning up Vite

Initializing a React environment that's optimized for speed and development experience.

Terminal

npm create vite@latest weather-app -- --template react
cd weather-app
npm install

• Open your terminal or Command Prompt.

• Paste the first command to scaffold the project.

• Select "JavaScript" (not TypeScript) when prompted.

• cd into the folder and run npm install to download React.

App Anatomy

Visualizing how our components will communicate and where the data flows.

Component Thinking

In React, we break the UI into independent, reusable pieces. The Search bar handles input, while the WeatherCard handles display. They don't know about each other; they only know about the Data.

Managing Credentials

We'll use environment variables to keep our API keys secure and accessible.

.env

VITE_WEATHER_API_KEY=your_key_here
VITE_API_BASE_URL=https://api.openweathermap.org/data/2.5

Action Items

1. Create a file named .env in the project root.
2. Register at OpenWeatherMap for a free key.
3. Paste your key into the file above.

The Weather Service

Abstraction is key. We'll create a dedicated file for networking.

src/services/weather.js

const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;
const BASE_URL = import.meta.env.VITE_API_BASE_URL;

export const fetchWeather = async (city) => {
  const response = await fetch(
    `${BASE_URL}/weather?q=${city}&units=metric&appid=${API_KEY}`
  );
  if (!response.ok) throw new Error('Metadata fetch failed');
  return await response.json();
};

Reactive State

Using hooks to track user interactions and API responses.

src/App.jsx

import { useState } from 'react';

function App() {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);

  return ( /* UI */ );
}

→

Open src/App.jsx and replace the boilerplate code with the state hooks shown above. These will hold our weather data throughout the app session.

What is state?

State is data that changes over time. When setWeather is called, React notices the change and automatically "re-renders" (updates) only the parts of the screen that use that data.

Interaction Logic

Implementing async handlers to link user input to data.

src/App.jsx

const handleSearch = async (city) => {
  setLoading(true);
  try {
    const data = await fetchWeather(city);
    setWeather(data);
  } finally {
    setLoading(false);
  }
};

The Search Node

Building the input interface with Tailwind classes.

src/components/Search.jsx

export default function Search({ onSearch }) {
  return (
    <div className="w-full max-w-md flex bg-white rounded-lg shadow-sm border overflow-hidden">
      <input className="flex-1 p-4 outline-none" placeholder="Search..." />
      <button className="bg-cyan-400 px-6 font-bold">GO</button>
    </div>
  );
}

Component Setup

1. Create folder: src/components
2. Create file: Search.jsx
3. Paste the component code.

The Atmosphere Card

Presenting data in a high-fidelity visual container.

src/components/WeatherCard.jsx

export default function WeatherCard({ data }) {
  return (
    <div className="mt-12 p-8 bg-white rounded-3xl shadow-2xl border w-full max-w-sm">
      <h2 className="text-7xl font-bold">{Math.round(data.main.temp)}°</h2>
      <p className="text-gray-400 font-medium">{data.name}</p>
    </div>
  );
}

Visual Implementation

Create src/components/WeatherCard.jsx. This component uses Props (the data object) to dynamically display the temperature and city name.

Optimization

Hardening the build and cleaning up dependencies.

Terminal

# Verify local build
npm run build

# Preview production build locally
npm run preview

Why Build?

The code you write isn't what the browser sees. `npm run build` minifies your styles and uglifies your JavaScript to ensure the smallest possible file sizes for your users.

Action Plan

1
Run npm run build and check the dist/ folder.
2
Run npm run preview to see how the app looks in "Production Mode".

System Online

Behold your creation. A clean, responsive weather station built with React and Tailwind CSS.

London...

GO

24°

London

Terminal

npm run dev

About theLab.

Master React.js

24°

Lab Objectives

The Toolbelt

Node.js

VS Code

The Action Plan

Spinning up Vite

App Anatomy

Managing Credentials

The Weather Service

Reactive State

Interaction Logic

The Search Node

The Atmosphere Card

Optimization

Action Plan

System Online

24°

Congratulations!

About the
Lab.