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.

This quickstart walks you through cloning the Clima React App repository, installing its dependencies, obtaining an OpenWeatherMap API key, wiring that key into the source code, and launching the local development server. By the end you will have a running weather lookup app at http://localhost:3000.
1

Clone the repository

Clone the repository from GitHub and navigate into the project directory:
git clone https://github.com/jantoniogc/CursoReact-Clima.git && cd CursoReact-Clima
2

Install dependencies

Install the project’s npm dependencies. The app uses React 16, react-dom, and react-scripts — no additional UI libraries need to be installed locally.
npm install
3

Get an OpenWeatherMap API key

Clima fetches weather data from the OpenWeatherMap Current Weather API. You need a free account to obtain an API key.
  1. Sign up at openweathermap.org.
  2. After confirming your email, navigate to API keys in your account dashboard.
  3. Copy the default key or generate a new one.
The key is used in src/App.js at line 25 inside the useEffect hook that builds the request URL:
src/App.js
const appId = '0ce99c97e4fe1a22354d272a43c40232';
const url = `http://api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${appId}`;
The key shown above (0ce99c97e4fe1a22354d272a43c40232) is the demo key committed to the public repository. It may be rate-limited or revoked at any time. Replace it with your own key before running the app.
4

Replace the API key

Open src/App.js and update line 25 with your own key:
src/App.js
// Before
const appId = '0ce99c97e4fe1a22354d272a43c40232';

// After — replace with your key
const appId = 'YOUR_OPENWEATHERMAP_API_KEY';
Save the file. If the dev server is already running, it will hot-reload automatically.
5

Start the development server

Start the app with:
npm start
Create React App compiles the project and opens http://localhost:3000 in your default browser. The terminal will show a “Compiled successfully” message once the build is ready.
Materialize CSS (v1.0.0) is loaded directly from the Cloudflare CDN inside public/index.html — both the stylesheet and the JS bundle. You do not need to install any additional CSS framework packages via npm.

​
What happens on first load

When the app first renders, all state variables are in their initial values:
  • busqueda holds { ciudad: '', pais: '' } — the city and country fields in the form are empty.
  • consultar is false, so the useEffect hook skips the API call entirely.
  • resultado is an empty object ({}).
Because resultado is an empty object, the Clima component receives it as its resultado prop. Inside Clima, the destructured name property is undefined. The component checks for this immediately:
src/components/Clima.jsx
const { name, main } = resultado;

if (!name) return null;
When name is undefined (falsy), Clima returns null and renders nothing. No weather card or error message is shown until the user submits a valid city and country through the form.

Build docs developers (and LLMs) love

Get started for freeTalk to us