Entra en el link de abajo para construir tú mismo el app de Costa Rica
¡Muy bien! Ahora vamos a construir paso a paso un componente para salvar a tortugas en la isla Tortuguero.
Imagina que React es una caja enorme llena de piezas LEGO. Cada pieza (componente) tiene un trabajo, por ejemplo:
- Una pieza puede ser un botón
- Otra pieza puede ser una pantalla
- Otra puede ser una lista
- Otra puede ser una imagen
Cuando juntas todas esas piezas… ¡se forma tu aplicación completa!
Empecemos
import { useState } from "react";
¿Qué significa import { useState } from "react";?
En React, algunas herramientas no vienen listas. Hay que pedirlas de la cajita de React. useState es una de esas herramientas especiales que nos deja guardar cosas que cambian.
Por ejemplo: cuántas tortugas quedan por salvar.
export default function Tortugero()
¿Qué es export default function Tortugero()?
Aquí estamos creando un componente. export default significa: “Este es el archivo principal, lo puedes usar en otros lugares”.
function Tortugero() es el nombre del componente. Como una caja que dice: "Esto es Tortugero".
¿Qué es const [tortugas, setTortugas] = useState(0);?
Imagina que tenemos una caja mágica donde guardamos un número. Ese número es la cantidad de tortugas salvadas.
- tortugas → lo que hay en la caja (un número)
- setTortugas → la llave mágica que permite cambiar ese número
- useState(0) → empieza en 0 tortugas salvadas
Así React recuerda cuántas tortugas llevas salvadas.
¿Qué es const total = 10;?
Este número es la meta del juego: ¡hay 10 tortugas atrapadas en Tortuguero! Aquí estamos diciendo: "Debemos salvar 10 tortugas".
Podrías cambiarlo a otro número para hacer el juego más fácil o más difícil.
¿Qué hace salvarTortuga()?
Esta función se activa hacemos clic en el botón "Salvar tortuga".
- Revisa si aún quedan tortugas por salvar →
tortugas < total - Si sí, suma una tortuga más →
setTortugas(tortugas + 1)
Cada clic rescata una tortuga nueva.
if (tortugas < total) setTortugas(tortugas + 1);
¿Qué hace reiniciar()?
Cuando terminamos la misión, pueden volver a empezar. Esta función pone el contador de tortugas en 0 de nuevo.
Así pueden jugar otra vez desde el inicio.
const reiniciar = () => setTortugas(0);
Importante colocar un div con el classname= Tortugero
<p>Has salvado {tortugas} de {total} tortugas</p>
Aqui se mostraran las tortugas que has salvado y el total.
{tortugas < total ? (
<button onClick={salvarTortuga}>Salvar tortuga</button>
) : (
<>
<p className="exito">Todas las tortugas están a salvo!</p>
<button onClick={reiniciar}>Reiniciar misión</button>
</>
)}
El button responde a la funcion SALVARTORTUGAS para ir sumando rescates
El botton reiniciar limpia la mision, para que puedas rescatar mas tortugas.
Luego para mostrar lo que acabamos de construir debemos importarlo en el "App.jsx"
import Tortugero from "./components/Tortugero.jsx"
Con el nombre "Tortugero" podemos implementar una nueva “etiqueta” y asi mostramos todo lo que contiene el archivo "Tortugero.jsx"
