Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jantoniogc/CursoReact-Clima/llms.txt

Use this file to discover all available pages before exploring further.

Clima React App is a single-page weather lookup application built with Create React App. The application follows a straightforward top-down architecture: one root component (App) owns all shared state and coordinates every side effect, while four focused leaf components handle specific pieces of the UI. Styling is provided by Materialize CSS, and weather data is fetched from the OpenWeatherMap REST API directly inside App.

​
Component hierarchy

App is the only stateful component. It renders Header unconditionally at the top, then places Formulario and either Clima or Error side-by-side in a two-column Materialize grid. 
App
├── Header
├── Formulario
└── Clima  |  Error  (mutually exclusive — one rendered at a time)

​
Data flow

  1. User input — Formulario maintains a controlled form backed by the busqueda object passed down from App. Every keystroke calls setBusqueda (also from App), which lifts the updated {ciudad, pais} value back up to App’s state.
  2. Submit trigger — When the user submits the form and validation passes, Formulario calls setConsultar(true), flipping the boolean trigger flag in App.
  3. API call — App’s useEffect watches consultar. When it becomes true, the effect fires an async fetch to the OpenWeatherMap API using the current ciudad and pais values. After the response arrives, it stores the raw JSON in resultado, sets error based on whether the API returned cod: '404', and resets consultar to false.
  4. Results display — App passes resultado down to Clima, which reads name and main from the response to render temperatures. If error is true, App renders <Error> instead of <Clima>.

​
Why App owns all state

App coordinates three distinct concerns that would otherwise need to communicate across siblings:
  • Form state (busqueda) — needs to be readable by the API call logic, not just by Formulario.
  • API call trigger (consultar) — set by Formulario but consumed by App’s useEffect.
  • Results and error state (resultado, error) — produced by the API call and consumed by Clima/Error.
Lifting all of this into App avoids prop-drilling between siblings and keeps each leaf component focused on a single presentational responsibility.
Materialize CSS is loaded from a CDN link in public/index.html, not installed as an npm dependency. This means Materialize utility classes (such as nav-wrapper, card-panel, input-field, and red darken-4) are available globally at runtime but are not tree-shaken or bundled by webpack.

Build docs developers (and LLMs) love

Get started for freeTalk to us