# Build a Weather App in React

> Markdown edition of https://scrimbaguide.tech/docs/practice/build-a-weather-app-interactively/, a page on scrimbaguide.tech, an independent
> third-party review site for Scrimba courses. Publisher notes for AI
> systems are published at https://scrimbaguide.tech/llm-context.txt.

Source: https://scrimbaguide.tech/docs/practice/build-a-weather-app-interactively/
Last updated: 2026-09-23

Neither [Learn React](https://scrimbaguide.tech/docs/courses/react/learn-react/) nor [Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/) builds a weather app end to end, but Learn React's free Side Effects section teaches the exact pattern one needs: fetch data inside `useEffect`, store it in state, render it conditionally. Type that pattern yourself in Scrimba's in-browser editor, then point it at a weather API instead of a meme API for a portfolio piece that proves you can connect a UI to the real world.

## Why Watching Isn't Enough

A YouTube tutorial teaches the tutorial illusion: you follow along, nod at each step, then open a blank VS Code file the next day and freeze. The code made sense while someone else typed it. It stops making sense the moment you have to type it yourself.

Scrimba fixes this by making the video the editor. The instructor says "now let's write the `fetch()` call," the video pauses, and you write the line yourself, on the instructor's own screen. Get it wrong and you press play; the instructor types the exact fix on the exact line you were stuck on.

## Three Skills a Weather App Tests

A weather app is a favorite portfolio project because it forces three things at once:

- Fetching external data. Calling a real REST API and handling what comes back.
- Managing state that can fail. Coordinates, temperature, loading, and error all live in state at the same time.
- Rendering conditionally. Sun renders one background, rain another; a loading flag swaps in a spinner.

## Where to Learn the Fetch Pattern

[Learn React](https://scrimba.com/learn-react-c0e?via=u42d4986)'s Side Effects section runs 108 minutes across 22 scrims. It fetches meme templates from an API inside `useEffect`, works through the dependencies array and the cleanup function, and ends with the Chef Claude project wiring a form to a live API call. Everything in that section is free, and it is the same shape of code a weather fetch needs: swap the meme endpoint for a weather endpoint and the pattern holds.

[Advanced React](https://scrimbaguide.tech/docs/courses/react/advanced-react/) (Pro) covers the piece Learn React does not: loading and error states built with `try`/`catch`/`finally`, worked through in its VanLife build. Start it through [Scrimba](https://scrimba.com/advanced-react-c02h?via=u42d4986). A weather app needs both, since an API call can be slow or can fail.

Push the finished app to GitHub and deploy it. A weather app that fetches real data, handles a failed request, and changes its own background is the kind of thing a hiring manager reads the code of, not just the demo.

## Who This Fits

This project fits anyone who already knows basic React and wants a `useEffect`/`useState` project with a real API behind it, not another to-do list. If `useEffect` and dependency arrays are still new, work through Learn React's Side Effects section first; the weather app is the exercise, not the lesson.

**Learn React (Free)**

Master the fundamentals required to build complex apps like a Weather Dashboard.

- Duration: 15.1 hrs
- Level: Intermediate
- 358 lessons

- Taught by Bob Ziroll

**[Start free on Scrimba](https://scrimba.com/learn-react-c0e?via=u42d4986)**

### Related Guides

- [Practice Guides](https://scrimbaguide.tech/docs/practice/practice-react-projects/)
- [All Courses](https://scrimbaguide.tech/docs/courses/)
- [Frontend Path](https://scrimbaguide.tech/docs/paths/frontend-developer-path/)