Understand the WeatherNow Components
Task
See how the prepared interface is divided according to what the user sees and does.
File / section
src/components/
Change
Open these components and connect each one to its role in the finished app:
Header.jsx— the WeatherNow brand and temperature-unit control.SearchPanel.jsx— city search, location action, and search errors.Welcome.jsx— the starting screen before weather has been loaded.CurrentWeather.jsx— the main current-condition display.WeatherStats.jsxandStat.jsx— supporting measurements such as humidity and wind.Forecast.jsx— the upcoming weather cards.Loader.jsx— the waiting state while a request is in progress.WeatherBackground.jsx— the visual atmosphere behind the dashboard.
App.jsx will eventually coordinate these pieces. It will know when weather has been requested, when data arrives, and which data should be passed into the appropriate UI.
Why this matters
The components are organized around the WeatherNow experience, so later lessons can make focused changes without turning one large component into a difficult-to-follow file.
You do not need to redesign these components. The course is about making the existing experience work.
Test it
Click through the running interface and match the visible areas to the components you just inspected.
Checkpoint
You can connect the main WeatherNow screen to the components responsible for each part of the experience.