Usar Apis Desde React

---

<h2 class="text-glow r-fit-text">¿Qué son las Promesas en JavaScript?</h2>

Como su propio nombre indica, en programación, una promesa es algo que en principio esperamos que se cumpla en el futuro.

Mientras esperamos, una promesa puede estar en tres estados:

* <span class="text-glow">Pending</span> ( pendiente )
* <span class="text-glow">Fulfilled</span> ( cumplida )
* <span class="text-glow">Rejected</span> ( rechazada )

</div>
<img src="/assets/media/javascript/promise-js.avif" alt="promesas en js" class="r-stretch" />

</div>

<h2 class="text-glow">¿Cómo se crea una promesa?</h2>

Una promesa se crea usando el constructor <span class="text-glow">Promise</span>, el cual recibe una función con dos parámetros: <span class="text-glow">resolve</span> y <span class="text-glow">reject</span>. Estos permiten definir qué pasa cuando la operación tiene éxito o falla.

```js [1-18] run
// Crear una promesa
const promesa = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (true) {
      resolve({
        status: 200,
        ok: true,
        message: "Inicio de sesión exitoso",
      });
    } else {
      reject({
        status: 401,
        ok: false,
        message: "Credenciales inválidas",
      });
    }
  }, 1000);
});
```

</div>

<div>

En este ejemplo creamos una promesa que simula un inicio de sesión tras 1 segundo y configuramos las respuestas para:

- <span class="text-glow">resolve()</span>: cuando todo sale bien ( estado *fulfilled* )
- <span class="text-glow">reject()</span>: cuando ocurre un error ( estado *rejected* )

</div>

<h2 class="text-glow">¿Cómo se consume una promesa?</h2>

Una de las primeras formas de trabajar con promesas es mediante <span class="text-glow">.then()</span> y <span class="text-glow">.catch()</span>, que permiten gestionar respuestas exitosas y errores de manera asíncrona.

<div>

```js run
// Consumir una promesa
promesa
  .then((respuesta) => {
    console.log(respuesta.status);
    console.log(respuesta.message);
  })
  .catch((error) => {
    console.error(error.status);
    console.error(error.message);
  });
````

</div>

<div>

Una vez creada la promesa, podemos manejar con <span class="text-glow">.then()</span> los casos exitosos y <span class="text-glow">.catch()</span> para capturar errores durante la ejecución.

</div>

<h2 class="text-glow r-fit-text">Enfoque moderno con async/await</h2>

Una forma más moderna de trabajar con promesas es mediante <span class="text-glow">async</span> y <span class="text-glow">await</span>, lo que permite escribir código asíncrono de manera más fácil.

```js [2-15] run
const promesa = new Promise(...);
// Consumir una promesa
async function iniciarSesion() {
  try {
    const respuesta = await promesa;

console.log(respuesta.status);
    console.log(respuesta.message);
  } catch (error) {
    console.error(error.status);
    console.error(error.message);
  }
}

iniciarSesion();
```

</div>

<div>

La palabra clave <span class="text-glow">await</span> espera el resultado de la promesa. Si ocurre un error, este puede gestionarse fácilmente mediante un bloque <span class="text-glow">try/catch</span>.

</div>

---

<h1 class="text-glow">¿Qué son los Hooks?</h1>

Los **Hooks** son funciones especiales de React ( su nombre siempre comienza con <span class="text-glow">use</span> ) que permiten agregar funcionalidades a un componente funcional.

Sus principales objetivos son:

* **Simplificar** la lógica de los componentes.
* **Reutilizar** lógica y estado entre componentes.
* **Organizar** mejor el código y escribir menos líneas.

</div>
<div style="flex: 1"><img src="/assets/media/react/react-hook.webp" /></div>

</div>
<a onclick="Reveal.down(); return false;" style="display: table; margin: 1rem auto; cursor: pointer" class="next-slide"><i class="fa-solid fa-down-long fa-bounce fa-2xl"></i></a>

<h2>El Hook <code class="text-glow">useState</code></h2>

El **hook `useState`** permite manejar estado en componentes funcionales. El estado es información que puede cambiar, y cuando cambia, React vuelve a renderizar el componente.

__Ejemplo típico__: un contador que se actualiza en pantalla.

```jsx run [1-12]
import { useState } from 'react'

function Counter() {
  const [counter, setCounter] = useState(0);

return (
    <div>
      <p>El contador está en: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Aumentar</button>
    </div>
  );
}
```

<h2>El Hook <code class="text-glow">useEffect</code></h2>

El hook **`useEffect`** se ejecuta después del **montaje** y cuando cambian sus **dependencias**, para manejar efectos como llamadas a **APIs**, temporizadores o eventos externos.

### Estructura

```jsx
useEffect(() => {
  /* Montaje */

return () => { /* Desmontaje */ }
}, [/* dependencias */]);
```
</div>

<div>

### Array de dependencias

|Deps|Cuándo corre|Montaje|Renderizado|
|---|---|---|---|
|[]|Una vez|Sí|No|
|[dep1]|Al cambiar dep1|Sí|Sí|
|[dep1,dep2]|Al cambiar cualquiera|Sí|Sí|
|sin []|Siempre|Sí|Sí|

</div>
</div><br/>
<a onclick="Reveal.down(); return false;" style="display: table; margin: 1rem auto; cursor: pointer" class="next-slide"><i class="fa-solid fa-down-long fa-bounce fa-2xl"></i></a>

<h2 class="r-fit-text">Ejemplo práctico: <span class="text-glow">consumo de API + limpieza</span></h2>

<span class="text-glow">useState</span> y <span class="text-glow">useEffect</span> son fundamentales para consumir datos desde una API en componentes funcionales.

A continuación, se realiza una **llamada a API en el montaje** del componente y su **limpieza en el desmontaje**.

<div>

```jsx run
useEffect(() => {
  const controller = new AbortController();

fetch("https://jsonplaceholder.typicode.com/users", {
    signal: controller.signal
  })
    .then(res => res.json())
    .then(data => setUsers(data))
    .catch(err => {
      if (err.name !== "AbortError") console.error(err);
    });

return () => controller.abort(); // limpieza al desmontar
}, []);
````

</div>

<div>

### Qué ocurre

</div>

---

<h1 class="text-glow r-fit-text">Generar proyecto con vite</h1>

<p class="r-fit-text">Vite nos ayuda a iniciar un proyecto React en pocos segundos. Ejecuta:</p>

```bash
npm create vite@latest react-demo-api-rick-and-morty -- --template react
```

<h2 class="text-glow">Ejecutando la aplicación</h2>

---

<h1 class="text-glow">Estructura de carpetas</h1>

Esta estructura permite mantener un código más ordenado, reutilizable y fácil de mantener.

---

<h2 class="text-glow r-fit-text" style="text-transform: uppercase;">Arquitectura basada en Componentes</h2>

En React, resolvemos problemas mediante componentes reutilizables. Si un componente se vuelve muy complejo, lo desglosamos en componentes más pequeños.

---

<h2 class="r-fit-text text-glow">Nuestro primer componente</h2>

## Objetivo

- Crear una tarjeta reutilizable para mostrar un personaje.
- Dividir la interfaz en componentes más pequeños.
- Preparar la estructura para recibir datos desde la API.

---

<h2 class="text-glow">Componente compuesto</h2>

Para mantener una estructura modular, implementaremos la tarjeta como un componente compuesto, es decir, un componente formado por otros componentes más pequeños.

---

<h2 class="text-glow">Esquema del personaje</h2>

Antes de crear el componente, es necesario conocer la información que entrega cada personaje.

</font>

---

<h2 class="text-glow">Campos utilizados para la tarjeta</h2>

Para la construcción de nuestra tarjeta de personaje, utilizaremos algunos de los atributos proporcionados por el esquema de la API. En particular, se mostrarán: <span class="text-glow">name</span>, <span class="text-glow">status</span>, <span class="text-glow">origin</span>, <span class="text-glow">image</span>.

Ya que son los datos necesarios para representar visualmente la información principal de cada personaje.

---

<h2 class="text-glow">EL componente base</h2>

__CharacterCard__ es el componente principal de la tarjeta. Se encarga de recibir la información del personaje y transmitir los datos necesarios a los componentes hijos para su representación.

<div class="code">
<font size="5" color="#ff8"><i class="fa-brands fa-react" style="color: rgb(116, 192, 252);"></i> src/components/CharacterCard/CharacterCard.jsx</font>

```jsx [1-21]
import styles from "./CharacterCard.module.css";
import { CharacterImage, CharacterInfo } from "./";

export default function CharacterCard({ character }) {
  if (!character) return null;

return (
    <article className={styles.card}>
      <CharacterImage
        src={character.image}
        alt={character.name}
      />

<CharacterInfo
        name={character.name}
        status={character.status}
        species={character.species}
      />
    </article>
  );
}
```
</div>
<div class="text">
<font size="5">
Además de importar los estilos y los componentes hijos, recibimos el objeto <span class="text-glow">character</span> y verificamos que exista antes de renderizar. Finalmente, organizamos la estructura de la tarjeta y pasamos la información del personaje mediante <span class="text-glow">props</span> a <span class="text-glow">CharacterImage</span> y <span class="text-glow">CharacterInfo</span>, encargados de mostrar la imagen y los datos, respectivamente.
</font>
<a onclick="Reveal.down(); return false;" style="display: table; margin: 1rem auto; cursor: pointer" class="next-slide"><i class="fa-solid fa-down-long fa-bounce fa-2xl"></i></a>
</div>
</div>

---

<h2 class="text-glow">Servicios</h2>

<p class="r-fit-text">El módulo <span class="badge">api.js</span> centraliza las peticiones a la API para obtener y gestionar personajes. Tenemos la siguiente función para configurar la URL de la API y realizar la petición con <span class="badge"><code>fetch()</code></span> y manejamos la paginación por parámetro.</p>

```js run
const API_BASE_URL = "https://rickandmortyapi.com/api";

export async function getCharacters(page = 1) {
  try {
    const url = `${API_BASE_URL}/character?page=${page}`;
    const response = await fetch(url);

if (!response.ok) {
      throw new Error(`Error HTTP: ${response.status}`);
    }
    const datos = await response.json();
    return datos.results;

} catch (error) {
    console.error("Error al obtener personajes:", error);
    return null;
  }
}
```

<h2 class="text-glow">Prueba del servicio</h2>

El servicio puede ejecutarse de forma independiente para validar la respuesta de la API.

```js
getCharacters().then(console.log);
```

---

```jsx
import { useState, useEffect } from "react";
import { Container, Row, Col, Card } from "react-bootstrap";

export default () => {
  const [characters, setCharacters] = useState([]);
  const [page, setpage] = useState(1);

useEffect(() => {
    const fetchApi = async () => {
      try {
        const response = await fetch(
          `https://rickandmortyapi.com/api/character?page=${page}`,
        );
        const data = await response.json();
        setCharacters(data.results);
      } catch (e) {
        console.log(e.message);
      }
    };

fetchApi();
  }, [page]);
};
```