En este tutorial, aprenderás cómo construir una aplicación CRUD usando React y Convex. Cubriremos estas operaciones al construir un proyecto que se llama Book Collections. En este proyecto, los usuarios serán capaz de agregar libros y actualizar sus estados una vez que completan un libro.

Tabla de Contenido

• ¿Qué es Convex?
• ¿Cómo configurar tu proyecto?
• ¿Cómo crear el esquema?
• ¿Cómo crear la UI?
• ¿Cómo crear las funciones CRUD?
• Los estilos
• Resumen

¿Qué es Convex?

Convex es la Plataforma BaaS que simplifica el desarrollo backend. Convex viene con una base de datos de tiempo real, y no tienes que preocuparte sobre escribir lógica de parte del servidor de forma separada porque provee métodos para solicitar y mutar la base de datos.

Pre-requisitos

Para seguir este tutorial, debes conocer los fundamentos de React. Estaré usando TypeScript en este proyecto, pero es opcional, así que puedes seguirme con JavaScript.

Cómo configurar tu proyecto

Crea una carpeta separa para el proyecto y llámalo como gustes – yo lo llamaré Books. Configuraremos Convex y React en esa carpeta.

Puedes crear una aplicación de React usando este comando:

npm create vite@latest my-app -- --template react-ts

Si quieres trabajar con JavaScript, entonces quita el `ts` al final. Sería:

npm create vite@latest my-app -- --template react

Cómo configurar Convex

Tenemos que instalar Convex en la misma carpeta. Puedes hacer eso usando este comando:

npm install convex

Luego, ejecuta npx convex dev. Si lo estás haciendo por primera vez, te debería pedirte la autenticación. De otra forma, debería preguntarte por el nombre del proyecto.

Puedes visitar el panel de Convex para ver el proyecto que has creado.

Ahora que hemos configurado Convex y React, necesitamos conectar el backend de Convex a la aplicación de React.

En el src/main.tsx, envuelve tu componente App con ConvexReactClient:

import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import "./index.css"

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);

createRoot(document.getElementById("root")!).render(
  <ConvexProvider client={convex}>
    <App />
  </ConvexProvider>
);

Cuando configuras Convex, se crea un archivo .env.local. Puedes ver el URL de tu backend en ese archivo.

En la línea de abajo, instanciamos el Cliente de Convex de React con el URL.

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);

Cómo crear el Esquema

En tu carpeta principal del proyecto, deberías de ver la carpeta convex. Manejaremos las solicitudes de la base de datos y las mutaciones aquí.

Crea un archivo schema.ts en la carpeta convex:

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";

export default defineSchema({
  books: defineTable({
    title: v.string(),
    author: v.string(),
    isCompleted: v.boolean(),
  }),
});

Puedes definir un Esquema para tu documento con defineSchema y crea un tabla con defineTable. Convex provee estas funciones para definir un esquema y crear una tabla.

v es el validador de tipo, se usa para proveer tipos para cada dato que agregamos a la tabla.

Para este proyecto, ya que es una aplicación de colección de libros, la estructura tendrá title, author, y isCompleted. Puedes agregar mas campos.

Ahora que tienes definido tu esquema, configuremos la UI básica en React.

Cómo crear la UI

En la carpeta src, crea una carpeta llamada component y un archivo Home.tsx. Aquí, puedes definir la UI.

import { useState } from "react";
import "../styles/home.css";

const Home = () => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  return (
    <div className="main-container">
      <h1>Book Collections</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="book title"
        />
        <br />
        <input
          type="text"
          name="author"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          placeholder="book author"
        />
        <br />
        <input type="submit" />
      </form>
      {books ? <Books books={books} /> : "Loading..."}
    </div>
  );
};

export default Home;

Puedes crear tu componente como gustes. Agregué dos campos input title, author, y un botón submit. Esta es la estructura básica. Ahora podemos crear los métodos CRUD en el backend.

Cómo crear las funciones CRUD

En la carpeta convex, puedes crear un archivo queries.ts separado para las funciones CRUD.

La Función Create

Ie convex/queries.ts:

Puedes definir una función createBooks. Puedes usar la función mutation de Convex para crear, actualizar, y eliminar datos. Leer los datos será a través de query.

La función mutation espera estos argumentos:

• agrs: los datos que necesitamos almacenar en la base de datos.
• handler: maneja la lógica para almacenar los datos en la base de datos. El handler es una función asíncrona, y tiene dos argumentos: ctx y args. Aquí, ctx es el objeto contexto que usaremos para manejar las operaciones de la base de datos.

Usarás el método insert para ingresar nuevos datos. El primer parámetro en el insert es el nombre de la tabla y el segundo es para los datos que necesitan ser insertados.

Como último, puedes regresar los datos desde la base de datos.

Aquí estás el código:

import { mutation} from "./_generated/server";
import { v } from "convex/values";

export const createBooks = mutation({
  args: { title: v.string(), author: v.string() },
  handler: async (ctx, args) => {
    const newBookId = await ctx.db.insert("books", {
      title: args.title,
      author: args.author,
      isCompleted: false,
    });
    return newBookId;
  },
});

La Función Read

En convex/queries.ts:

import { query } from "./_generated/server";
import { v } from "convex/values";

//read
export const getBooks = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("books").collect();
  },
});

En esta operación read, usamos la función incorporada query de Convex. Aquí, args estará vacía ya que no obtenemos ningún datos del usuario. De forma similar, la función handler es asíncrona y usa el objeto ctx para solicitar de la base de datos y regresar los datos.

La Función Update

En convex/queries.ts:

Crea una función updateStatus. Vamos a actualizar solamente el estado isCompleted.

Aquí, necesitas obtener el ID del documento y el estado del usuario. En el args, definiremos el id y el isCompleted, los cuales vendrán del usuario.

En el handler, usaremos el método patch para actualizar los datos. El método patch espera dos argumentos: el primer argumento es el id del documento y el segundo es para los datos actualizados.

import { mutation } from "./_generated/server";
import { v } from "convex/values";

//update
export const updateStatus = mutation({
  args: { id: v.id("books"), isCompleted: v.boolean() },
  handler: async (ctx, args) => {
    const { id } = args;
    await ctx.db.patch(id, { isCompleted: args.isCompleted });
    return "updated"
  },
});

Función Delete

En convex/queries.ts:

Crea una función deleteBooks y usa la función mutation. Necesitaremos el ID del documento para que se elimine. En el args, define un ID. En el handler, usa el método delete del objeto ctx, y pasa el ID. Esto eliminará el documento.

import { mutation } from "./_generated/server";
import { v } from "convex/values";

//delete
export const deleteBooks = mutation({
  args: { id: v.id("books") },
  handler: async (ctx, args) => {
    await ctx.db.delete(args.id);
    return "deleted";
  },
});

A partir de ahora, has completado las funciones CRUD en el backend. Ahora necesitamos hacerlo funcionar en el UI. Volvamos a React.

Actualizar el UI

Ya has creado un UI básico en la aplicación de React, con algunos campos input. Vamos a actualizarlo.

En src/component/Home.tsx:

import { useQuery, useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Books } from "./Books";
import { useState } from "react";
import "../styles/home.css";

const Home = () => {
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const books = useQuery(api.queries.getBooks);
  const createBooks = useMutation(api.queries.createBooks);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    createBooks({ title, author })
      .then(() => {
        console.log("created");
        setTitle("");
        setAuthor("");
      })
      .catch((err) => console.log(err));
  };
  return (
    <div className="main-container">
      <h1>Book Collections</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="book title"
        />
        <br />
        <input
          type="text"
          name="author"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          placeholder="book author"
        />
        <br />
        <input type="submit" />
      </form>
      {books ? <Books books={books} /> : "Loading..."}
    </div>
  );
};

export default Home;

Ahora podemos usar las funciones API del backend al usar api de Convex. Como puedes ver, llamamos a dos funciones de la API: puedes usar useQuery si vas a obtener datos y useMutation si quieres cambiar los datos. Ahora en este archivo, que estamos haciendo, dos operaciones que son create y read.

Obtuvimos todos los datos al usar este método:

 const books = useQuery(api.queries.getBooks);

El arreglo de objetos serán almacenados en la variable books.

Obtuvimos la función create del backend con esta línea de código:

const createBooks = useMutation(api.queries.createBooks);

Cómo usar la función create en el UI

Usemos la función create en el UI.

Ya que los campos input están en la etiqueta form, usaremos el atributo onSubmit para manejar el envío del formulario.

// En el Home.tsx

const handleSubmit = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    createBooks({ title, author })
      .then(() => {
        console.log("created");
        setTitle("");
        setAuthor("");
      })
      .catch((err) => console.log(err));
  };

Cuando haces clic en submit, dispara la función handleSubmit.

Usamos el createBooks para pasar el title y author del estado. La función del endpoint es async, por lo que podemos usar el handleSubmit como async o usar .then. Usé el método .then para manejar los datos asíncronos.

Puedes crear un componente separado para mostrar los datos solicitados de la base de datos. Los datos regresados están en el Home.tsx, así que pasaremos los datos al componente Book.jsx como props.

En Books.tsx:

import { useState } from "react";
import { book } from "../types/book.type";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import "../styles/book.css";

export const Books = ({ books }: { books: book[] }) => {
  const [update, setUpdate] = useState(false);
  const [id, setId] = useState("");

  const deleteBooks = useMutation(api.queries.deleteBooks);
  const updateStatus = useMutation(api.queries.updateStatus);

  const handleClick = (id: string) => {
    setId(id);
    setUpdate(!update);
  };

  const handleDelete = (id: string) => {
    deleteBooks({ id: id as Id<"books"> })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
  };

  const handleUpdate = (e: React.FormEvent<HTMLFormElement>, id: string) => {
    e.preventDefault();
    const formdata = new FormData(e.currentTarget);
    const isCompleted: boolean =
      (formdata.get("completed") as string) === "true";
    updateStatus({ id: id as Id<"books">, isCompleted })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
    setUpdate(false);
  };

  return (
    <div>
      {books.map((data: book, index: number) => {
        return (
          <div
            key={data._id}
            className={`book-container ${data.isCompleted ? "completed" : "not-completed"}`}
          >
            <h3>Book no: {index + 1}</h3>
            <p>Book title: {data.title}</p>
            <p>Book Author: {data.author}</p>
            <p>
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            </p>
            <button onClick={() => handleClick(data._id)}>Update</button>
            {id === data._id && update && (
              <>
                <form onSubmit={(e) => handleUpdate(e, data._id)}>
                  <select name="completed">
                    <option value="true">Completed</option>
                    <option value="false">Not Completed</option>
                  </select>
                  <input type="submit" />
                </form>
              </>
            )}
            <button onClick={() => handleDelete(data._id)}>delete</button>
          </div>
        );
      })}
    </div>
  );
};

En el componente Book.jsx, puedes mostrar los datos de la base de datos y manejar la funcionalidad para actualizar y eliminar los registros.

Veamos paso a paso cada una de estas características.

Cómo mostar los Datos

Puedes obtener los datos pasados como un prop en el componente Home.tsx. Si estás usando TypeScript, he definido un tipo para el objeto que es regresado de la solicitud. Puedes ignorar esto si estás usando JavaScript.

Crea books.types.ts:

export type book = {
    _id: string,
    title: string,
    author: string,
    isCompleted: boolean
}

Puedes usar la función map para mostrar los datos.

import { useState } from "react";
import { book } from "../types/book.type";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import "../styles/book.css";

export const Books = ({ books }: { books: book[] }) => {
  const [update, setUpdate] = useState(false);

  return (
    <div>
      {books.map((data: book, index: number) => {
        return (
          <div
            key={data._id}
            className={`book-container ${data.isCompleted ? "completed" : "not-completed"}`}
          >
            <h3>Book no: {index + 1}</h3>
            <p>Book title: {data.title}</p>
            <p>Book Author: {data.author}</p>
            <p>
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            </p>
            <button onClick={() => handleClick(data._id)}>Update</button>
            {id === data._id && update && (
              <>
                <form onSubmit={(e) => handleUpdate(e, data._id)}>
                  <select name="completed">
                    <option value="true">Completed</option>
                    <option value="false">Not Completed</option>
                  </select>
                  <input type="submit" />
                </form>
              </>
            )}
            <button onClick={() => handleDelete(data._id)}>delete</button>
          </div>
        );
      })}
    </div>
  );
};

Esta es la estructura básica. Mostramos el título, autor, y estado, junto con un botón actualizar y eliminar.

Ahora, agreguemos las funcionalidades.

import { useState } from "react";
import { book } from "../types/book.type";
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import "../styles/book.css";

export const Books = ({ books }: { books: book[] }) => {
  const [update, setUpdate] = useState(false);
  const [id, setId] = useState("");

  const deleteBooks = useMutation(api.queries.deleteBooks);
  const updateStatus = useMutation(api.queries.updateStatus);

  const handleClick = (id: string) => {
    setId(id);
    setUpdate(!update);
  };

  const handleDelete = (id: string) => {
    deleteBooks({ id: id as Id<"books"> })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
  };

  const handleUpdate = (e: React.FormEvent<HTMLFormElement>, id: string) => {
    e.preventDefault();
    const formdata = new FormData(e.currentTarget);
    const isCompleted: boolean =
      (formdata.get("completed") as string) === "true";
    updateStatus({ id: id as Id<"books">, isCompleted })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
    setUpdate(false);
  };

  return (
    <div>
      {books.map((data: book, index: number) => {
        return (
          <div
            key={data._id}
            className={`book-container ${data.isCompleted ? "completed" : "not-completed"}`}
          >
            <h3>Book no: {index + 1}</h3>
            <p>Book title: {data.title}</p>
            <p>Book Author: {data.author}</p>
            <p>
              Completed Status:{" "}
              {data.isCompleted ? "Completed" : "Not Completed"}
            </p>
            <button onClick={() => handleClick(data._id)}>Update</button>
            {id === data._id && update && (
              <>
                <form onSubmit={(e) => handleUpdate(e, data._id)}>
                  <select name="completed">
                    <option value="true">Completed</option>
                    <option value="false">Not Completed</option>
                  </select>
                  <input type="submit" />
                </form>
              </>
            )}
            <button onClick={() => handleDelete(data._id)}>delete</button>
          </div>
        );
      })}
    </div>
  );
};

Este es todo el código del componente. Déjame explicarte qué hice.

Primero, necesitamos alternar la actualización, así que definimos la función handleClick, y le pasamos un ID del documento.

//handleClick
 const handleClick = (id: string) => {
    setId(id);
    setUpdate(!update);
  };

En el handleClick puedes actualizar el estado del ID y alternar el estado de la actualización de forma que alternará la actualización cuando se haga clic, y en otro clic, se cerrará.

Luego, tenemos handleUpdate. Necesitamos el ID del documento para actualizar los datos, así que pasamos el objeto evento así también como el ID del documento. Para obtener la entrada, podemos usar FormData.

const updateStatus = useMutation(api.queries.updateStatus);

const handleUpdate = (e: React.FormEvent<HTMLFormElement>, id: string) => {
    e.preventDefault();
    const formdata = new FormData(e.currentTarget);
    const isCompleted: boolean =
      (formdata.get("completed") as string) === "true";
    updateStatus({ id: id as Id<"books">, isCompleted })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
    setUpdate(false);
  };

Necesitamos usar el useMutation para obtener la función updateStatus. Pasa el ID y el estado completado a la función, y maneja la parte asíncrona usando .then.

Para la función delete, el ID del documento es suficiente. Como el anterior, llama la función delete usando el useMutation y pásale el ID.

Luego pasa el ID del documento y maneja la promesa.

const deleteBooks = useMutation(api.queries.deleteBooks);

const handleDelete = (id: string) => {
    deleteBooks({ id: id as Id<"books"> })
      .then((mess) => console.log(mess))
      .catch((err) => console.log(err));
 };

Estilos

Finalmente, lo que queda es agregar algo de estilo. Agregué algunos estilos básicos. Si el libro no ha sido completado, estará en rojo, y si el libro se ha completado, estará en verde.

Aquí la captura de pantalla:

¡¡Esto es todo chicos!!

Puedes visitar mi repositorio para ver todo el código: convex-curd

Resumen

En este artículo, implementamos las operaciones CRUD (Crear, Leer, Actualizar y Eliminar) al construir una aplicación de colecciones de libros. Comenzamos configurando Convex y React, y escribir la lógica de CRUD.

Este tutorial cubrió tanto el frontend como el backend, demostrando cómo construir una aplicación serverless.

Puedes encontrar todo el código aquí: convex-curd

Si hay algún error o cualquier duda, contáctame en LinkedIn, Instagram.

¡Gracias por leer!

Algunas de estas herramientas, lenguajes, o frameworks son usados diariamente por miembros de la comunidad y pueden padecer cambios fundamentales en cómo son implementados o escritos con el tiempo.

En este artículo, exploraremos dos tecnologías populares de JavaScript, Next.js y React.js, comparando sus diferencias claves, examinando sus fortalezas, y ofreciendo perspectivas para ayudar a los desarrolladores a elegir la mejor opción para sus proyectos.

Tabla de Contenido

• Entendiendo React
  • Renderizado del lado del Cliente
  • Casos de uso para React en Desarrollo Web
• Explorando Next.js
  • Renderizado del lado del Servidor
  • Casos de uso para Next.js en Desarrollo Web
• Diferencias claves entre Next.js y React
  • Métodos de renderizado: lado del cliente vs. lado del servidor
  • Consideraciones de rendimiento
  • Implicaciones sobre SEO
  • Escalabilidad y complejidad del proyecto
• Cuándo usar React o Next.js
  • Cuándo usar React
  • Cuándo usar Next.js
• Conclusión

Entendiendo React

Frecuentemente nos confundimos en cuanto si React es un framework de JavaScript o no, pero acá está la respuesta a esa pregunta. React no es un framework de JavaScript, sino una librería. Ahora, estas dos terminologías son intercambiables con frecuencia o mal usadas, pero los explicaré en breve.

Una librería es una colección de código ya escrito que puede ser re-usado o llamarse cuando construyes tu proyecto.

Ejemplo: Imagina una biblioteca en donde vas a estudiar. Los libros ya están disponibles en los estantes – simplemente agarras uno que necesitas y comienzas a leer. De forma similar, en programación, una librería (o biblioteca) provee herramientas ya terminadas que puedes usar en tu proyecto sin tener que empezar de cero.

Por otro lado, un framework es como una estructura ya hecha que te ayuda a construir tu proyecto. Te da una fundación sólida para trabajar, de forma que no tengas que comenzar desde cero o escribir código repetitivo. En cambio, te enfocas en agregar tus propias características y lógica, mientras que el framework se encarga de ejecutar cosas en el momento exacto y de la forma correcta.

Ejemplo: Imagina que un framework es como una casa en construcción donde los muros, el fundamento, y el techo ya están construidos. Todo lo que necesitas hacer es decidir cómo diseñar el interior – cómo elegir los muebles, la pintura y las decoraciones. El framework maneja el trabajo pesado, cómo asegurar que la casa se mantenga fuerte, mientras te enfocas en hacer lo tuyo. De forma similar, en programación, el framework provee la estructura, y tu agregas tu lógica personalizada para completar el proyecto.

Con eso fuera del camino, continuemos.

React es una de las librerías de JavaScript más populares usadas por los desarrolladores para construir interfaces de usuario rápidos, interactivos y confiables. Es una librería declarativa que ayuda a los desarrolladores crear aplicaciones web basado en componentes. Facebook desarrolló esta librería en 2011 y ha sido tendencia desde entonces.

Usualmente, cuando se escribe código JavaScript, creamos un archivo con la extensión js. Por ejemplo: App.js, script.js, y así sucesivamente. En React creamos un archivo con la extensión jsx. Eso es: index.jsx, Home.jsx, y así sucesivamente. El jsx es una extensión de React que te permite escribir un código de JavaScript que se parece a HTML. La sintaxis, cuando se ejecuta, pasa a través de pre-procesadores/transpiladores los cuales transforman el código parecido a HTML a código estándar de JavaScript.

En el corazón de todas las aplicaciones de React están los componentes. Los componentes son trozos de interfaces de usuario (UI) los cuales son hechos de forma independiente y pueden ser re-usados en partes distintas en tu proyecto. Distintos componentes pueden ser hechos de forma separada y luego se juntan para formar una interfaz de usuario compleja (UI).

Nota: Cada aplicación de React tiene al menos un componente, comúnmente referido como el componente raíz. Este componente representa la aplicación entera. Dentro del componente raíz, con frecuencia hay otros componentes, conocidos como componentes hijos, que ayudan a estructurar y manejar distintas partes de la aplicación.

Acá hay una representación estructural de los componentes raíz e hijos.

De la imagen de arriba, puedes entender con claridad de qué tratan los componentes. App es el componente raíz, y dentro del componente raíz tenemos los componentes hijos: Navbar, Profile, Blog y Footer. Los hijos componentes pueden ser re-usados en otras páginas del proyecto sin tener que re-escribir el código nuevamente.

Renderizado del lado del cliente

El renderizado del lado del cliente (CSR – Client Side Rendering en inglés) es una técnica común, especialmente en librerías como React y frameworks como Vue.js, Angular, y así sucesivamente. Aquí, el navegador descarga y procesa los archivos de JavaScript para renderizar dinámicamente el contenido directamente en el dispositivo del usuario. Con CSR, las páginas web se generan de forma dinámica, y cualquier actualización o cambio al código se aplica sin requerir una recarga completa de página. Solamente las partes específicas que han cambiado se actualizan, asegurando una experiencia de usuario fluida y eficiente.

Por lo tanto, en CSR, la lógica y la estructura de la página web se maneja por el cliente (navegador) y una recarga completa de página se muestra.

Para ayudarte a entender CSR, he agregado un artículo aquí.

Casos de uso para React en Desarrollo Web

Desde que React se volvió la opción preferida de muchos desarrolladores, su flexibilidad lo ha hecho conveniente para un amplio rango de casos de uso en desarrollo web. Aquí hay unos pocos casos:

• Aplicaciones de una Sola Página (SPAs): Cuando hablamos sobre SPAs, no nos referimos realmente que tu aplicación web tiene solamente una página, puede tener múltiples páginas. En SPAs, tus archivos de aplicación web (HTML, CSS, JS) se generan una vez en tu página web y cuando las actualizaciones subsecuentes se realizan en el archivo, tu página no tendrá que recargar completamente. Este enfoque ayuda a asegurar una transición más rápida, reduce la carga en el servidor y mejorar la experiencia general de usuario.
• Interfaces de Usuario Interactivos: React es idóneo para construir interfaces de usuarios interactivos, de vez en cuando, pasa por actualizaciones dinámicas basadas en las acciones de los usuarios. Ejemplos son formularios en línea, paneles de control, sitios web (sitios web de comercio electrónico), y así sucesivamente.
• Aplicaciones Multiplataforma: Tener conocimientos de React viene a la mano cuando se construyen aplicaciones móviles, simplificando la conexión entre aplicaciones web y aplicaciones móviles. Herramientas como React Native te ayudan a lograr este proceso.

Explorando Next.js

Next.js es un framework popular basado en React usado para construir aplicaciones web con el uso de componentes de React. Next.js provee estructura adicional, características, y optimización para tu aplicación web.

A diferencia de React, Next.js soporta renderizado del lado del servidor (SSR), por lo que las solicitudes se procesan y se generan desde el servidor y luego mostrado en el navegador (cliente).

Renderizado del lado del Servidor

El Renderizado del lado del servidor (SSR - en inglés "Server Side-Rendering") es una técnica en el desarrollo web donde un servidor genera el HTML para una página web en el servidor y lo envía al navegador (cliente). En otras palabras, el servidor maneja las estructuras y la lógica de la página y muestra una página totalmente renderizada en la pantalla.

En el renderizado del lado del servidor, una solicitud se envía primero al servidor (cliente), luego el servidor comienza a procesar la solicitud y cuando termina de procesar la solicitud, ejecuta la solicitud al generar y muestra un archivo HTML con el contenido en el navegador (lado del cliente). Cuando un cambio se hace o una nueva página se solicita, una nueva solicitud se envía nuevamente al servidor y es procesado nuevamente – un nuevo archivo HTML y totalmente renderizado será generado y mostrado en el navegador (cliente).

Para una mejor comprensión de CSR y SSR, agregué un vídeo de YouTube aquí.

Casos de Uso para Next.js en el desarrollo web

• Aplicaciones de una Sola Página (SPAs): Next.js puede ser usado en la creación de aplicaciones de una sola página, similar a React.
• Optimizado para SEO: Next.js ayuda en crear sitios web optimizados para SEO al renderizar un archivo HTML en el servidor y entregarlo al navegador. Esto mejora la visibilidad en el motor de búsquedas, incrementando las chances que tu sitio web aparezca en la parte superior de los resultados de búsqueda.
• Plataformas de Multi-Usuarios: Debido a la habilidad de Next.js de manejar el enrutamiento dinámico, el manejo de API, y así sucesivamente, es fácil de crear aplicaciones que sirven para diversos propósitos.

Diferencia clave entre Next.js y React

Métodos de renderizado: lado del cliente vs. lado del servidor

Cuando hablamos sobre el método de renderizado en React, React se base principalmente en el método de renderizado del lado del cliente (CSR). Por lo tanto tanto la lógica como la estructura de la página web será manejado por el navegador (cliente). Aunque este método se usa comúnmente, tiene algunos efectos secundarios como carga de página inicial más lenta.

Next.js por el otro lado, soporta tanto SSR como CSR ya que fue construido por encima de React. Las páginas web se renderizan en el servidor y tanto la lógica como la estructura de la página se manejan por el servidor. Esto permite una carga más rápida de la página web y también mejora el SEO.

Consideraciones de rendimiento

En términos de consideraciones de rendimiento, Next.js se prefiere frecuentemente porque ofrece múltiples opciones de renderizado, incluyendo renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG), Regeneración estático incremental (ISR), y renderizado del lado del cliente (CSR). En contraste, React primariamente provee un enfoque de renderizado único: renderizado del lado del cliente.

Implicaciones de SEO

React está menos optimizado para SEO porque los motores de búsqueda puede tener dificultades al indexar contenido que requiere ejecución de JavaScript para renderizar.

Del otro lado, Next.js está más optimizado para SEO que React porque renderiza contenido en el servidor, provee HTML totalmente renderizado para los motores de búsqueda para facilitar el indexado.

Escalabilidad y complejidad del Proyecto

En términos de escalabilidad y complejidad del proyecto, Next.js es generalmente mejor que React. Next.js provee funciones integradas que mejoran la escalabilidad de tu proyecto. Estos incluyen:

• Renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG) para mejor rendimiento y SEO.
• Una función de rutas API incorporada para crear funciones serverless sin problemas.
• Un sistema de enrutamiento basado en archivos que simplifica la organización de proyectos más grandes.

En contraste, con React, eres responsable de configurar y mantener la estructura para la escalabilidad. Para proyectos más grandes, esto frecuentemente requiere agregar herramientas adicionales tales como:

• Librerías de gestión de estado (por ejemplo, Redux, Recoil, y así sucesivamente)
• Librerías de enrutamiento (por ejemplo, React Router)

Estas herramientas son necesarias para mejorar la escalabilidad de React y abarcar la complejidad del proyecto, pero también incrementan la carga y esfuerzo necesario para configurar y gestionar la aplicación.

En resumen, aquí una tabla que lo desglosa:

Cuándo usar React o Next.js

Elegir la herramienta correcta para tu proyecto depende únicamente en la complejidad de la solución del proyecto que estás construyendo. Mientras que React y Next.js están relacionados cercanamente, cada uno tiene sus fortalezas y casos de uso óptimos.

Cuándo usar React

Aquí hay algunos casos donde es mejor usar React para tu proyecto:

• Cuando construyes aplicaciones altamente interactivas.
• Cuando tu proyecto requiere manejo manual de enrutamiento, gestión de estado o/e integración de API.
• Cuando tu proyecto requiere renderizado del lado del cliente (CSR)

Cuándo usar Next.js

Aquí hay algunos casos donde es mejor usar Next.js:

• Cuando tu proyecto requiere un mejor SEO.
• Cuando tu proyecto requiere renderizado del lado del servidor.
• Cuando tu proyecto requiere que construyas APIs junto con tu código de frontend.
• Cuando construyes sitios web basado en contenido como blogs o sitios e-commerce. Debido a su uso de renderizado del lado del servidor, ayuda en mejorar los tiempos de carga de los contenidos en la página.
• Next.js se usa mejor cuando quieres optimizar imágenes en tu proyecto.

Conclusión

A este punto creo que tienes una clara comprensión de React y de Next.js, los conceptos del renderizado del lado del servidor y del lado del cliente, los casos de uso tanto para React como para Next.js, y las diferencias claves entre ellos.

Gracias por tomarte el tiempo de leer este artículo. Espero que lo hayas encontrado útil.

Feliz codificación.

Construir aplicaciones web interactivas y accesibles es una habilidad crucial para los desarrolladores modernos. React, una de las bibliotecas de JavaScript más populares, ofrece una forma poderosa de crear interfaces de usuario dinámicas. Una gran manera de profundizar tu conocimiento de React mientras trabajas en un proyecto es crear un juego de memoria - un desafío atractivo que abarca conceptos clave del desarrollo, como la gestión del estado, el diseño de componentes y las interacciones del usuario.

Acabamos de publicar un curso en el canal de YouTube freeCodeCamp.org que te enseñará a construir un juego de memoria completamente interactivo en React, con un gran énfasis en accesibilidad. Este curso, desarrollado por Scrimba, te guía a través de todo el proceso de desarrollo, desde la obtención de datos de una API y el diseño de componentes reutilizables hasta la implementación de la lógica del juego y las mejores prácticas de accesibilidad. Al final del curso, tendrás un proyecto pulido y listo para mostrar tus habilidades.

El curso empieza cubriendo los aspectos fundamentales del juego, incluyendo la obtención y almacenamiento de datos de una API, la renderización de componentes dinámicos y la garantía de interacciones fluidas para el usuario. Aprenderás a recuperar y gestionar los datos de juego, barajar y aleatorizar los elementos, así como a manejar la lógica del juego, como la detección de coincidencias y el seguimiento del progreso.

La accesibilidad es un enfoque clave de este proyecto, garantizando que el juego sea inclusivo y fácil de usar. Explorarás técnicas esenciales de accesibilidad , incluyendo el uso de atributos ARIA , HTML semántico y navegación con teclado. Además, el curso profundiza en la gestión eficiente del estado de la aplicación, el manejo adecuado de errores y la refactorización de componentes para mejorar su mantenimiento.

Algunos de los temas claves que se abordan en este curso incluyen:

• Obtención y almacenamiento de datos de una API utilizando el estado de React.
• Renderización y gestión de componentes dinámicos del juego.
• Implementación de la lógica para seleccionar, emparejar y barajar elementos del juego.
• Construcción de componentes reutilizables, como un botón interactivo de emoji
• Mejora de la accesibilidad mediante atributos ARIA y consideraciones para tecnologías de asistencia.
• Manejo de errores y mejora de la experiencia del usuario con componentes de interfaz dedicados
• Gestión y refactorización de datos de formularios dentro del estado de React

Al final de este curso no solo tendrás un juego de memoria completamente funcional si no que también obtendrás un conocimiento mas profundo del desarrollo de React y sus principios sobre la accesibilidad. Ya sea que estes buscando mejorar tus habilidades en React, crear un proyecto para tu portafolio o aprender más sobre desarrollo web inclusivo, este tutorial es un recurso excelente.

¡Mira el curso completo en el canal de YouTube de freeCodeCamp.org y comienza hoy mismo a construir tu propio juego de memoria interactivo!

Si este artículo fue de ayuda, ¡Compártelo!

Aprende a programar gratis. El plan de estudios de código abierto de freeCodeCamp ha ayudado a más de 40,000 personas a conseguir empleo como desarrolladores. ¡Empieza hoy mismo!

En este artículo, voy a mostrarte como crear una app de chat en tiempo real usando React.js y Firebase.

En la app, vamos a permitir que los usuarios se logueen con su cuenta de Google usando el servicio de inicio de sesion de Firebase. También guardaremos y recuperaremos todos los mensajes usando el servicio Firestone de Firebase.

Prerrequisitos

Para este tutorial, deberás tener instalado Node.js en tu sistema, además deberás tener conocimientos intermedios de CSS, JavaScript y ReactJS y conocimientos sobre el uso de la terminal de líneas de comandos. No debes saber utilizar Firebase para hacer el mismo.

¿Que es Firebase?

Firebase es un BaaS (Backend as a Service), una plataforma de backend propiedad de Google que permite a desarrolladores construir aplicaciones para iOS, Android o aplicaciones web.

Nos provee con herramientas para el seguimiento de análisis, reportar y solucionar fallas de aplicaciones y crear pruebas de marketing y productos. Esto, ayuda a los desarrolladores a crear aplicaciones de calidad, hacer crecer su base de usuarios y obtener ganancias.

Para este tutorial, vamos a utilizar dos herramientas: Firebase Authentication y Cloud Firestone.

Firebase Authentication

Firebase Authentication (SDK) es una herramienta de Firebase que permite realizar autenticación de usuarios mediante varios métodos, como contraseñas, números de telefono, cuentas de Google, Facebook, Twitter, GitHub y mas. En este proyecto usaremos la autenticación a través de cuentas de Google.

Cloud Firestore

Cloud Firestones es un servicio de bases de datos no relacionales que nos permite guardar y sincronizar información. Este servicio guarda la información en documentos como pares de clave-valor, y estos documentos en colecciones.

Los documentos, a su vez pueden tener sub-colecciones, permitiéndonos anidar colecciones dentro de otras colecciones, además la información se sincroniza automáticamente entre todos los dispositivos que estén consultando esos datos.

Ahora que ya tienes una idea general de como trabajan Firebase y Cloud Firestone, vamos a trabajar en el proyecto.

Nota: para este proyecto, ya escribí el CSS y preconstruí los componentes para la aplicación de chat, puedes encontrar el código del proyecto final en GitHub y los componentes junto con el CSS en la carpeta "setup", y también puedes ver el proyecto final funcionando en este link

Como crear nuestra aplicación de React

Clona este repositorio de GitHub, borra la carpeta src en el directorio raíz y remplázala con la carpeta "src" que se encuentra en la carpeta "setup".

Alternativamente, puedes crear tu aplicación de React corriendo el comando create-react-app en la terminal.

npx create-react-app react-chat

react-chat  es el nombre de la aplicación. Una vez que finaliza correremos el comando  npm install firebase react-firebase-hooks para instalar firebase y react-firebase-hooks.

Una vez que finaliza, borra la carpeta src y reemplazala con la que descargaste de la carpeta setup para usar el archivo CSS y los componentes preconstruidos. (Opcionalmente, puedes escribir tus propios componentes y tu propio archivo CSS)

Ahora, tu carpeta src contiene los siguientes componentes:

• Una carpeta de componentes con un componente NavBar que contiene los botones de Google sign-in y Sign Out,
• Un componente que le da la Bienvenida al usuario que no está logueado,
• Un componente Chatbox que solo es visible cuando el usuario está logueado.
• El componente Message para mostrar los mensajes de los usuarios,y
• El componente SendMessage que usaremos para que el usuario pueda escribir y enviar sus mensajes.

Además, tenemos lo siguiente:

• Una carpeta img donde se guarda la imagen de Google sign-in y sign-out,
• un archivo CSS llamado App.css con el código CSS para la aplicación,
• un archivo llamado App.js con todos los componentes importados dentro,
• y un archivo llamado index.js.

Corre el comando npm start para ver la aplicación en el navegador, deberías ver algo como esto:

Ahora, creemos una cuenta de Firebase y configuremos nuestro proyecto.

Como configurar el proyecto en Firebase

Si todavía no tienes una cuenta de Firebase, puedes abrir una usando tu correo de Gmail (solo se puede usar el mail de Google).

En la página de inicio, haga clic en comenzar y luego en crear un proyecto.

Completa el formulario para crear el proyecto agregando un nombre de proyecto (en nuestro caso usaremos el nombre React-chat). Si quieres dejar habilitado Google Analytics para tu proyecto déjalo, sino deshabilítalo. Después, haz clic en crear proyecto

Una vez creado, presiona el botón Continuar.

Elige el tipo de aplicación al que quieres agregar Firebase, para este artículo elegiremos el icono de código porque estamos desarrollando una aplicación web.

Ingresa un sobrenombre para la aplicación y haz clic en el botón registrar app.

En el menú selecciona npm, copia el código (lo vamos a utilizar más tarde) y haz clic en ir a la consola.

Cómo configurar Firebase Authentication

Para configurar Firebase Authentication, ve al menú de la izquierda y presiona sobre Compilación y selecciona Authentication del desplegable.

Haz clic en comenzar y selecciona a Google en el menú proveedores de acceso.

Presiona sobre el botón de la derecha para habilitar el proyecto y selecciona un correo de soporte, luego haz clic en guardar.

Cómo configurar Cloud Firestone

Nuevamente. ve al menú de la izquierda, clickea en compilación y selecciona Firestone. Luego haz clic en crear base de datos y completa el formulario.

En el primer paso, selecciona la localización de la base de datos, por defecto el sistema asignará la ubicación más cercana a la que te encuentras, luego presiona siguiente.

Selecciona el modo de la base de datos, puedes elegir producción o modo de prueba.

El modo de prueba permite que cualquier cliente puede leer o escribir en la base de datos por 30 días. El modo producción significa que nadie puede leer o escribir en la base de datos, por lo que debes escribir tus reglas para brindar acceso a la base de datos.

Selecciona modo de producción y presiona el botón crear.

El siguiente paso será editar nuestras reglas, haz clic en la pestaña reglas.

Reemplaza la regla que esta en la pestaña por la siguiente y presiona el boton publicar.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read: if true;
      allow create, update, delete, write: if request.auth != null;
    }
  }
}

Analicemos el código, la primer parte,  allow read: if true; significa que cualquiera puede leer tu base de datos, mientras que el bloque de código siguiente allow create, update, delete, write: if request.auth != null; significa que solo los clientes autenticados pueden crear, actualizar, borrar y escribir datos en la base de datos.

Puedes comenzar agregando o creando una colección en tu base de datos o crear una automáticamente en la aplicación que estamos desarrollando, lo que haremos después. Si quieres crear una colección en Cloud Firestone, vuelve a la pestaña de datos presionando en la misma y presiona el botón iniciar coleccion.

Ingresa el nombre de la colección, por ejemplo "messages" y clickea en siguiente.

Ahora, crea el documento para la colección,

Clickea en ID automático, de esa forma el sistema generará el ID de forma automática, o si lo prefieres ingresa uno tu.

Luego, se crea el par clave->valor para el documento. El campo llamado "Campo" representa el nombre de la clave, el campo "Tipo" nos dice que valor almacena (cadena de texto, number, timeStamp, etc), y finalmente el campo "Valor" es lo que guardamos en esta clave.

Puedes seguir agregando más documentos presionando en el enlace "Agregar campo", sino presiona en Guardar para que se guarde la colección.

Nuestro proyecto de Firebase ya esta correctamente seteado, volvamos a la aplicación de React.

Cómo configurar Firebase en React

En la carpeta src, crea un archivo llamado firebase.js y pega el código que copiamos al configurar firebase.

Tambien importemos los servicios getAuth  y getFirestore desde Autenticación para Web y Firestore en la nube para web respectivamente. Puedes leer más sobre las bibliotecas disponibles para Firebase en la página de la documentación.

Nuestro archivo firebase.js debe verse asi:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: LA_CLAVE_PARA_LA_APLICACION_VA_AQUI(CLAVE_API),
  authDomain: EL_DOMINIO_DE_AUTENTICACION_PARA_LA_APP_VA_AQUI,
  projectId: EL_ID_DEL_PROYECTO_PARA_LA_APP_VA_AQUI,
  storageBucket: EL_BUCKET_PARA_LA_APLICACION_VA_AQUI,
  messagingSenderId: EL_ID_PARA_ENVIAR_LOS_MENSAJES_VA_AQUI,
  appId: EL_APP_ID_DE_LA_APLICACION_DE_REACT_VA_AQUI,
};

Cómo implementar Firebase dentro de nuestra aplicación React

Cómo autenticar usuarios con su cuenta de Google

Nosotros queremos que los usuarios tengan acceso a la aplicación de chat y que en caso de que estén autenticados puedan enviar mensajes, si no lo están queremos que vean la página de bienvenida para poder loguearse usando el botón de Google sign-in, y si esta logueado debe poder ver el botón de Sign-out para salir del chat.

Esta autenticación será controlada por el componente NavBar, que contiene ambos botones (sign-in y sign-out).

En nuestro componente NavBar, importaremos nuestra imagen de Google "sign-in", y la guardaremos como la constante llamada GoogleSignin. También tendremos un estado llamado user, seteado como falso, una función llamada googleSignIn que setea el estado de user como verdadero, y una función llamada signOut que setea el estado de user como falso.

También tenemos un elemento nav con un tag h1 que representa el título de nuestra app y dos botones que se renderizan condicionalmente en base al estado del componente user

import React, { useState } from "react";
import GoogleSignin from "../img/btn_google_signin_dark_pressed_web.png";

const NavBar = () => {
  const [user, setUser] = useState(false);
  const googleSignIn = () => {
    setUser(true);
  };
  const signOut = () => {
    setUser(false);
  };
  return (
    <nav className="nav-bar">
      <h1>React Chat</h1>
      {user ? (
        <button onClick={signOut} className="sign-out" type="button">
          Sign Out
        </button>
      ) : (
        <button className="sign-in">
          <img
            onClick={googleSignIn}
            src={GoogleSignin}
            alt="sign in with google"
            type="button"
          />
        </button>
      )}
    </nav>
  );
};
export default NavBar;

Hagamos un cambio en el componente NavBar, importando lo siguiente:

import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";

Reemplaza el estado del usuario con el siguiente código:

const [user] = useAuthState(auth);

Y edita las funciones googleSignIn y signOut:

const googleSignIn = () => {
  const provider = new GoogleAuthProvider();
  signInWithRedirect(auth, provider);
};
const signOut = () => {
  auth.signOut();
};

La función useAuthState se dispara en el momento que el usuario se loguea o desloguea, permitiéndonos acceder a los detalles del usuario. Actualmente, el estado del usuario es null, una vez que te logueas, el estado del usuario cambiará a la información suministrada por el método de autenticación (en este caso, Google).

En la función googleSignIn, le indicamos a Firebase que el el usuario quiere autenticarse con Google usando el GoogleAuthProvider(). También lo redirige a la página de inicio de sesión de Google.

Luego de el correcto inicio de sesión del usuario, sus datos son almacenados en auth, y el usuario es redireccionado a la app. La función signOut borra la información almacenada de autenticación, retornando ésta a null. El nuevo estado almacenado también determina qué botón debe renderizarse.

Agreguemos también autenticación a nuestro archivo App.js. Importa lo siguiente:

import { auth } from "./firebase";
import { useAuthState } from "react-firebase-hooks/auth";

Agrega el nuevo user state, para que podamos renderizar el componente Welcome si el usuario no está logueado o el componente Chatbox si el usuario ya se autenticó.

const [user] = useAuthState(auth);

El codigo final debe lucir así:

import { auth } from "./firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import "./App.css";
import NavBar from "./components/NavBar";
import ChatBox from "./components/ChatBox";
import Welcome from "./components/Welcome";

function App() {
  const [user] = useAuthState(auth);
  return (
    <div className="App">
      <NavBar />
      {!user ? <Welcome /> : <ChatBox />}
    </div>
  );
}
export default App;

Al probar nuestras nuevas funciones de sign-in y sign-out, veremos lo siguiente:

Ahora, hagamos lo mismo con el componente Welcome, que ahora tiene el siguiente código:

import React from "react";
import GoogleSignin from "../img/btn_google_signin_dark_pressed_web.png";

const Welcome = () => {
  const googleSignIn = () => {};

  return (
    <main className="welcome">
      <h2>Welcome to React Chat.</h2>
      <img src="/logo512.png" alt="ReactJs logo" width={50} height={50} />
      <p>Sign in with Google to chat with with your fellow React Developers.</p>
      <button className="sign-in">
        <img
          onClick={googleSignIn}
          src={GoogleSignin}
          alt="sign in with google"
          type="button"
        />
      </button>
    </main>
  );
};
export default Welcome;

Importaremos lo siguiente:

import { auth } from "../firebase";
import { GoogleAuthProvider, signInWithRedirect } from "firebase/auth";

y tambien editaremos la funcion googleSignIn:

const googleSignIn = () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
};

Ahora, podremos loguearnos desde el botón que se renderiza en el componente Welcome:

Como enviar y almacenar mensajes en Firebase:

Actualmente, estamos mostrando un mensaje de prueba de nuestro componente Message y, el botón Send no realiza ninguna acción. Cuando ingresamos un mensaje y pulsamos el botón Send, queremos que el mensaje se envíe de inmediato a la aplicación.

Así, que editemos el componente SendMessage:

Primero, importamos useState de React, auth y db  de nuestro archivo de configuración de firebase, y addDoc, collection y serverTimestamp de la librería Firestore.

import React, { useState } from "react";
import { auth, db } from "../firebase";
import { addDoc, collection, serverTimestamp } from "firebase/firestore";

Crearemos un estado llamado message que inicialmente esté definido como una cadena vacía y se pase como valor a la etiqueta input. La funcion onChange es también agregada a el input, que setea el estado del message en lo que el usuario tipee.

const SendMessage = () => {
  const [message, setMessage] = useState("");
    
  return (
    <form className="send-message">
      <input
        ...
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button type="submit">Send</button>
    </form>
  );
};

También creamos una función llamada sendMessage, y agregamos el atributo onSubmit en nuestro formulario, que ejecuta la función sendMessage cuando el usuario clickea en el botón Send (enviar). Nótese que el botón debe tener el tipo type="submit"  para que la función funcione.

 const sendMessage = async (event) => {
    event.preventDefault();
    if (message.trim() === "") {
      alert("Enter valid message");
      return;
    }
    const { uid, displayName, photoURL } = auth.currentUser;
    await addDoc(collection(db, "messages"), {
      text: message,
      name: displayName,
      avatar: photoURL,
      createdAt: serverTimestamp(),
      uid,
    });
    setMessage("");
  };
  
  return (
    <form onSubmit={(event) => sendMessage(event)} className="send-message">
...

La función sendMessage es una funcion asincrona. Primero chequea si el el usuario esta intentando enviar una cadena vacía o espacios vacíos como un mensaje y, en caso de que así sea alerta al usuario.

Si el mensaje no es una cadena vacía, toma del usuario los siguientes datos dela información proporcionada por auth al logguearse: uid, displayName y photoURL. Estos datos corresponden con el identificador único del usuario, su nombre y la URL de la foto del usuario, respectivamente.

Luego, usa la función addDoc() para crear un documento dentro de la colección messages de nuestra base de datos, a la que accede gracias al archivo que importamos. En caso de que la colección no exista, crea una por nosotros.

También crea un par de llave-valor, guardando nuestro mensaje en text, displayName en name, guardando el momento en el que el mensaje fue guardado en nuestra base de datos en la columna createAt, y el uid.

Estos pares de llave-valor, conforman los datos de nuestro documento. Una vez que se completa la acción, se restablece el estado del mensajea una cadena vacía.

Como recuperar mensajes de nuestra base de datos

Luego de enviar el mensaje del usuario, debemos mostrarlo en la pantalla. Vayamos a nuestro componente chatBox e importemos lo siguiente:

import { useEffect, useRef, useState } from "react";
import {
  query,
  collection,
  orderBy,
  onSnapshot,
  limit,
} from "firebase/firestore";
import { db } from "../firebase";

Creamos el hook useEffect que correra cada vez que se realizan cambios en el thatroom, por ejemplo enviar o borrar un mensaje.

useEffect(() => {
  const q = query(
    collection(db, "messages"),
    orderBy("createdAt", "desc"),
    limit(50)
  );
  const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
    const fetchedMessages = [];
    QuerySnapshot.forEach((doc) => {
      fetchedMessages.push({ ...doc.data(), id: doc.id });
    });
    const sortedMessages = fetchedMessages.sort(
      (a, b) => a.createdAt - b.createdAt
    );
    setMessages(sortedMessages);
  });
  return () => unsubscribe;
}, []);

En el hook useEffect, tenemos la constante q, una consulta de Firebase que busca los mensajes dentro de la base de la colección messages de nuestra base de datos, luego ordena los documentos obtenidos basados en la llave createAt y devuelve un máximo de 50 documentos (mensajes guardados)

La constante unsubscribe representa la función onSnapshot, que escucha los cambios en el documento, esta función tiene un arreglo vacío llamado messages.

El bucle forEach itera entre todos los documentos de la colección y guarda la información en un nuevo arreglo. Luego, asigna el arreglo inicial de mensajes al nuevo arreglo de mensajes.

También usamos el método map en nuestro arreglo de mensajes para  cada mensaje/documento en nuestro componente message.

{messages?.map((message) => (
  <Message key={message.id} message={message} />
))}

El codigo completo luce asi:

import React, { useEffect, useRef, useState } from "react";
import {
  query,
  collection,
  orderBy,
  onSnapshot,
  limit,
} from "firebase/firestore";
import { db } from "../firebase";
import Message from "./Message";
import SendMessage from "./SendMessage";

const ChatBox = () => {
  const [messages, setMessages] = useState([]);
  const scroll = useRef();

  useEffect(() => {
    const q = query(
      collection(db, "messages"),
      orderBy("createdAt", "desc"),
      limit(50)
    );

    const unsubscribe = onSnapshot(q, (QuerySnapshot) => {
      const fetchedMessages = [];
      QuerySnapshot.forEach((doc) => {
        fetchedMessages.push({ ...doc.data(), id: doc.id });
      });
      const sortedMessages = fetchedMessages.sort(
        (a, b) => a.createdAt - b.createdAt
      );
      setMessages(sortedMessages);
    });
    return () => unsubscribe;
  }, []);

  return (
    <main className="chat-box">
      <div className="messages-wrapper">
        {messages?.map((message) => (
          <Message key={message.id} message={message} />
        ))}
      </div>
      {/* when a new message enters the chat, the screen scrolls down to the scroll div */}
      <span ref={scroll}></span>
      <SendMessage scroll={scroll} />
    </main>
  );
};

export default ChatBox;

Vayamos a nuestro componente message, y rendericemos los datos recibidos en el navegador.

import React from "react";
import { auth } from "../firebase";
import { useAuthState } from "react-firebase-hooks/auth";
const Message = ({ message }) => {
  const [user] = useAuthState(auth);

  return (
    <div
      className={`chat-bubble ${message.uid === user.uid ? "right" : ""}`}>
      <img
        className="chat-bubble__left"
        src={message.avatar}
        alt="user avatar"
      />
      <div className="chat-bubble__right">
        <p className="user-name">{message.name}</p>
        <p className="user-message">{message.text}</p>
      </div>
    </div>
  );
};
export default Message;

Importamos auth y useAuthState, y almacenamos los datos del usuario en  user. Deconstruimos el prop message y asignamos el avatar al atributo src del componente img. También reemplazamos el nombre y el mensaje "de prueba" con el mensaje obtenido desde message.

También aplicamos una condición al estilo CSS según el uid del autor del mensaje, entonces si el uid del autor del mensaje es el mismo que el del usuario logueado, se aplica al div el estilo definido en el selector derecho; en caso contrario no se agrega ningún estilo adicional.

Actualmente, todos  los mensajes se posicionan a la izquierda, así que si el autor del mensaje es el usuario logueado, sus mensajes se posicionaran a la derecha. Veamos esa dinámica en acción en el navegador:

El mensaje es enviado y almacenado en nuestra base de datos, luego todos los mensajes se recuperan y la sala es actualizada en tiempo real con los mensajes nuevos.

El nombre y el avatar de cada usuario son  mostrados en cada tarjeta, pero también podemos ver que el chat no se desliza automáticamente hacia abajo cuando llega un nuevo mensaje. Vamos a arreglar eso.

Como hacer que el chat se desplace hasta el final

Vayamos al archivo ChatBox.js, importemos el hook useRef y creemos una constante llamada scroll:

import React, { useEffect, useRef, useState } from "react";
...
const scroll = useRef();

Crearemos un elemento span con un atributo ref conectado al valor de scroll,y , también pasamos el  scroll en nuestro componente message.

Luego, creamos un elemento span con un atributo ref cuyo valor es scroll, y también pasamos scroll a nuestro componente SendMessage:

<main className="chat-box">
   ...
   {/* when a new message enters the chat, the screen scrolls dowwn to the scroll div */}
   <span ref={scroll}></span>
   <SendMessage scroll={scroll} />
</main>

Luego vamos al componente Messages, accedemos a la constante scroll, y agregamos scroll.current.scrollIntoView({ behavior: "smooth" }) al final de nuestra función sendMessage.

Este código le indica al navegador que el scroll span debe ser visible después de enviar un mensaje. Por eso ponemos la etiqueta span al final de cada mensaje.

const SendMessage = ({ scroll }) => {

  const sendMessage = async (event) => {
   ...
    setMessage("");
    scroll.current.scrollIntoView({ behavior: "smooth" });
  };
  ...
};

Volviendo al navegador, deberíamos ver que el chat se desplaza automáticamente hasta el final cuando del usuario envía un mensaje.

Como agregar dominios autorizados

Cuando desplegamos nuestra aplicacion en React, es indispensable agregar nuestro dominio a la lista de dominios autorizados en Firebase. Este paso, asegura que nuestra app se comunique correctamente con los servicios de Firebase, veamos como hacerlo:

En la consola de Firebase, navega hasta la sección Autenticación y haz click en la pestaña de configuración. Deslízate hasta la parte de Dominios autorizados; a continuación clickea en el botón agregar un dominio. Luego agrega el o los dominios donde la aplicación será desplegada.

Por ejemplo, si desplegaras la aplicación en la dirección https://my-react-chat-app.com, ingresa my-react-chat-app.com como un dominio autorizado, y clickea el boton agregar para guardar los cambios.

Agregando el dominio donde desplegaras tu app a la lista de dominios autorizados, le brindas permisos a los servicios de Firestone para ser accedidos desde ese dominio. Si no hiciéramos esto, encontraríamos errores al intentar establecer conexión o realizar operaciones con Firebase.

Para terminar

Y, así es como llegamos al final de la construcción de esta aplicación de chat en tiempo real, ¡felicitaciones!.

En este tutorial, aprendimos a usar Firebase y React para crear una aplicacion de  chat en tiempo real. También autenticamos a los usuarios usando el método de logueo por cuenta de Google de Firetone y, guardamos los mensajes del chat usando Cloud Firestore. Finalmente, aprendimos a usar algunos servicios y librerías de Firestone.

Puedes encontrar el código de este proyecto en GitHub y puedes probar la aplicación desplegada usando el siguiente enlace.

Si disfrutaste este articulo, por favor compártelo para ayudar a otros desarrolladores, también puedes visitar mi blog para leer mas artículos o puedes seguirme en  Twitter o LinkedIn.

Hasta la próxima, byeeeeee!

En este tutorial, aprenderás cómo diseñar plantillas asombrosas de email con React Email y enviarlos usando Resend – una potente plataforma API de correo electrónico.

Pre-requisitos

Para aprovechar lo máximo de este tutorial, deberías tener un entendimiento básico de React o Next.js.

También haremos uso de las siguientes herramientas:

• React Email: Una librería que te permite crear plantillas de email diseñadas hermosamente usando componentes de React.
• Resend: Una poderosa y sencilla plataforma API para enviar emails desde tus aplicaciones.

Cómo construir la Aplicación con Next.js

En esta sección, crearás una aplicación sencilla de soporte de cliente. La aplicación incluirá un formulario para usuarios para enviar sus solicitudes, el cual dispara una notificación de email confirmando que un ticket de soporte ha sido creado.

Para comenzar, primero configuraremos la interfaz de usuario y un endpoint de la API.

Ejecuta el siguiente comando para crear un nuevo proyecto de Next.js con TypeScript:

npx create-next-app react-email-resend

Actualiza el archivo app/page.tsx para renderizar un formulario que recoge los detalles del cliente, incluyendo su nombre completo, la dirección de email, el asunto del ticket, y un mensaje con detalles describiendo el problema. Cuando el formulario se envía, los datos son registrados a la consola usando la función handleSubmit.

"use client";
import support from "@/app/images/support.jpg";
import { useState } from "react";
import Image from "next/image";

export default function Page() {
    //👇🏻 estados de las entradas
    const [name, setName] = useState<string>("");
    const [email, setEmail] = useState<string>("");
    const [subject, setSubject] = useState<string>("");
    const [content, setContent] = useState<string>("");

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        //👇🏻 registra las entradas del usuario
        console.log({ name, email, subject, content });
    };
return ({/** -- elementos de UI -- */})
}

Regresa los elementos UI del formulario que aceptan el nombre completo del usuario, la dirección de email, asunto del ticket, y un mensaje con los detalles describiendo el problema.

    return (
        <main className='w-full min-h-screen flex items-center justify-between'>
                <form className='w-full' onSubmit={handleSubmit}>
                    <label htmlFor='name' className='opacity-60'>
                        Full Name
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='name'
                        required
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                    />

                    <label htmlFor='email' className='opacity-60'>
                        Email Address
                    </label>
                    <input
                        type='email'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='email'
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                    />

                    <label htmlFor='subject' className='opacity-60'>
                        Subject
                    </label>
                    <input
                        type='text'
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='subject'
                        value={subject}
                        onChange={(e) => setSubject(e.target.value)}
                        required
                    />

                    <label htmlFor='message' className='opacity-60'>
                        Message
                    </label>
                    <textarea
                        rows={7}
                        className='w-full px-4 py-3 border-[1px] mb-3 border-gray-300 rounded-sm'
                        id='message'
                        required
                        value={content}
                        onChange={(e) => setContent(e.target.value)}
                    />

                    <button className='w-full bg-blue-500 py-4 px-3 rounded-md font-bold text-blue-50'>
                        SEND MESSAGE
                    </button>
                </form>
            </div>
        </main>
    );

Aquí está la página resultante del componente:

Luego, crea un endpoint de la API (/api/route.ts) que acepta las entradas del cliente.

cd app
mkdir api && cd api
touch route.ts

Copia el siguiente código en el archivo api/route.ts. El endpoint de la API registra la entrada del cliente a la consola después de recibirla.

import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
    const { name, email, subject, content } = await req.json();
    //👇🏻 registra los contenidos
    console.log({ name, email, subject, content });
    return NextResponse.json({
        message: "Email enviado con éxito",
        data,
 });
}

Actualiza la función handleSubmit para enviar los datos del cliente al endpoint de la API y regresa la respuesta JSON:

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
        const response = await fetch("/api", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ name, email, subject, content }),
        });
        const data = await response.json();
        alert(data.message);
    } catch (error) {
        console.error(error);
        alert("Un error ocurrió, por favor intenta nuevamente más tarde");
    }
    setName("");
    setEmail("");
    setSubject("");
    setContent("");
};

¡Felicidades! Has configurado la colección de datos y el envío. En las próximas secciones, te mostraré cómo crear y enviar plantillas de email con React Email y Resend.

Cómo crear Plantillas de Email usando React Email

React Email te permite construir y enviar componentes de email usando React y TypeScript. Soporta múltiples clientes de email, incluyendo Gmail, Mail de Yahoo, Outlook, y Mail de Apple.

React Email también provee múltiples componentes UI que te permiten personalizar las plantillas de email según tu diseño preferido usando componentes de React JSX/TSX.

Instala el paquete React Email y sus componentes al ejecutar el fragmento de código de abajo:

npm install react-email -D -E
npm install @react-email/components -E

Incluye este escript en tu archivo package.json. Dirige a React Email a dónde están localizados las plantillas de email en tu proyecto.

  "scripts": {
    "email": "email dev --dir src/emails"
  },

Una de las características de React Email es la habilidad de pre-visualizar tu plantilla de email en tu navegador durante el desarrollo, permitiéndote ver cómo aparecerá en el email del receptor.

Así que luego, crea una carpeta emails que contenga un archivo TicketCreated.tsx dentro de la carpeta src de Next.js y copia el siguiente fragmento de código en el archivo:

import * as React from "react";
import {
    Body,
    Container,
    Head,
    Heading,
    Hr,
    Html,
    Link,
    Preview,
    Text,
    Tailwind,
} from "@react-email/components";

interface TicketCreatedProps {
    username: string;
    ticketID: string;
}

const baseUrl = process.env.VERCEL_URL || "http://localhost:3000";

En el fragmento de código de arriba, importamos los componentes necesarios para construir la plantilla de email.

Luego, agrega el componente TicketCreated al archivo para renderizar la plantilla de email usando los componentes de React Email.

export const TicketCreated = ({ username, ticketID }: TicketCreatedProps) => {
    return (
        <Html>
            <Head />
            <Preview>Email de Confirmación del Ticket de Soporte 🎉</Preview>
            <Tailwind>
                <Body className='bg-white my-auto mx-auto font-sans px-2'>
                    <Container className='border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]'>
                        <Heading className='text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0'>
                            Tu Ticket ha sido creado
                        </Heading>
                        <Text className='text-black text-[14px] leading-[24px]'>
                        Hola {username},
                        </Text>
                        <Text className='text-black text-[14px] leading-[24px]'>
                            <strong>El Ticket de Soporte</strong> (<Link href={`${baseUrl}/ticket/${ticketID}`} className='text-blue-600 no-underline'>{`#${ticketID}`}</Link>) ha sido creado con éxito.
                        </Text>

                        <Text className='text-black text-[14px] leading-[24px]'>El Equipo de Soporte revisará tu ticket y volverán contigo en breve.
                        </Text>

                        <Hr className='border border-solid border-[#eaeaea] my-[26px] mx-0 w-full' />
                        <Text className='text-[#666666] text-[12px] leading-[24px]'>Este mensaje estaba dirigido a {" "} <span className='text-black'>{username}</span>. Si no creaste este ticket, por favor ignora este email.
                        </Text>
                    </Container>
                </Body>
            </Tailwind>
        </Html>
    );
};

Finalmente, expórtalo y agrega un valor predeterminado para las props:

TicketCreated.PreviewProps = {
    username: "alanturing",
    ticketID: "9083475",
} as TicketCreatedProps;

export default TicketCreated;

Ejecuta npm run email en tu terminal para pre-visualizar la plantilla de email.

Esta plantilla de email notifica a los clientes que su ticket de soporte ha sido creado y que alguien del equipo de soporte se comunicarán con ellos.

React Email ofrece una variedad de plantillas de email pre-diseñada, facilitando el crear email con estilos hermosos para distintos propósitos. Puedes revisar el demo disponible para ver ejemplos de lo que es posible.

Cómo enviar Emails con Resend

Resend es una API de email sencilla que te permite enviar emails dentro de tu aplicación de software. Soporta un montón de lenguajes de programación, incluyendo JavaScript (Next.js, Express, Node.js), Python, PHP, Go, and Rust, entre otros.

Resend y React Email pueden ser fácilmente integrados juntamente ya que el co-fundador de Resend, Bu Kinoshita, es también el creador de React Email.

Crea una cuenta en Resend. Una vez que iniciaste sesión, navega hacia la sección de claves de API en tu panel y copia tu clave de API en un archivo .env.local.

//👇🏻 archivo .env.local 
RESEND_API_KEY=<RESEND_API_KEY>

Actualiza el endpoint de la API para enviar un email usando la plantilla de React Email, como se muestra abajo:

import { NextRequest, NextResponse } from "next/server";
//👇🏻 función generado del ID del boleto
import { v4 as generateID } from "uuid";
//👇🏻 importa la plantilla de email
import TicketCreated from "@/emails/TicketCreated";
//👇🏻 imports Resend
import { Resend } from "resend";
const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: NextRequest) {
    //👇🏻 acepta la entrada del cliente desde el frontend
    const { name, email, subject, content } = await req.json();
    //👇🏻 los registra
    console.log({ name, email, subject, content });
    //👇🏻 envia una email usando la plantilla de email
    const { data, error } = await resend.emails.send({
        from: "Acme <onboarding@resend.dev>",
        to: [email],
        subject: "Email de Confirmación del Ticket 🎉",
        react: TicketCreated({ username: name, ticketID: generateID() }),
    });

    if (error) {
        return NextResponse.json(
            { message: "Hubo un error al enviar el email" },
            { status: 500 }
        );
    }

    return NextResponse.json({
        message: "El email se envió con éxito",
        data,
    });
}

¡Felicidades!🥳 Has completado este tutorial.

Aquí un breve demo de la aplicación:

Próximos Pasos

En este tutorial, aprendiste cómo crear plantillas de email con React Email y enviarlos usando Resend. Ambos paquetes te permiten integra la comunicación de email fácilmente con tus aplicaciones.

Ya sean simples las notificaciones de email, los boletines informativos, o campañas de marketing, React Email y Resend ofrecen una solución eficiente y personalizable para satisfacer tus necesidades.

Algunos recursos útiles incluyen:

• Componentes pre-construidas de React Email
• Documentación de React Email
• Cómo instalar Resend en aplicaciones de Next.js

¡Gracias por leer!

Este será un gran proyecto para aprender cómo armar las aplicaciones fullstack, y cómo crear una aplicación donde el back-end puede comunicarse con el front-end en tiempo real.

Normalmente, usando solicitudes HTTP, el servidor no puede enviar datos al cliente en tiempo real. Pero al usar Socket.io, el servidor es capaz de enviar información en tiempo real al cliente sobre algunos eventos que sucedieron en el servidor.

La aplicación que estaremos construyendo tiene dos páginas:

Una página join-a-chat-room:

Y una página chat-room:

Aquí está lo que estaremos usando para construir este aplicación:

• Front-end: React (Un framework de front-end de JavaScript para construir aplicaciones interactvias)
• Back-end: Node y Express (Express es un framework muy popular de NodeJS que nos permite crear fácilmente APIs y back-ends)
• Base de Datos: HarperDB (una plataforma de datos + aplicación que te permite solicitar datos usando SQL o NoSQL. HarperDB también tiene una API integrada, ahorrándonos el escribir mucho código de back-end)
• Comunicación en Tiempo Real: Socket.io (¡ve abajo!)

Aquí está el código fuente (recuerda de darle una estrella ⭐).

Tabla de Contenidos

1. ¿Qué es Socket.io?
2. Configuración del Proyecto
3. Cómo construir la Página "Join a Room"
4. Cómo configurar el Servidor
5. Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor
6. Cómo funcionan las Salas en Socket.io
7. Cómo construir la Página Chat
8. Cómo crear el componente Messages (B)
9. Cómo crear un Esquema y una Tabla en HarperDB
10. Cómo crear el Componente Send Message (C)
11. Cómo configurar las Variables de Entorno de HarperDB
12. Cómo permitir a los Usuarios que se envíen Mensajes con Socket.io
13. Cómo obtener los Mensajes desde HarperDB
14. Cómo mostrar los Últimos 100 Mensajes en el Cliente
15. Cómo mostrar la Sala y los Usuarios (A)
16. Cómo quitar a un Usuario de una Sala de Socket.io
17. Cómo agregar el Escucha de Evento Disconnect de Socket.io

¿Qué es Socket.io?

Socket.io permite al servidor enviar información al cliente en tiempo real, cuando los eventos ocurren en el servidor.

Por ejemplo, si estuvieras jugando un juego de múltiple jugador, un evento podría ser tu "amigo" que consiguió un gol espectacular en contra tuya.

Con Socket.io, sabrías (casi) instantáneamente sobre conceder un gol.

Sin Socket.io, el cliente tendría que hacer múltiples llamadas polling de AJAX para verificar que el evento ha ocurrido en el servidor. Por ejemplo, el cliente podría usar JavaScript para verificar un evento en el servidor cada 5 segundos.

Socket.io significa que el cliente no tiene que hacer múltiples llamadas polling de AJAX para verificar si algunos eventos han ocurrido en el servidor. Más bien, el servidor envía la información al cliente tan pronto como lo obtenga. Mucho mejor.👌

Así que, Socket.io nos permite construir fácilmente aplicaciones de tiempo real, tales comos aplicaciones de chat y juegos multijugador.

Configuración del Proyecto

1. Cómo configurar nuestras carpetas

Comienza un nuevo proyecto en tu editor de texto de prefrencia (VS Code para mí), y crea dos carpetas a nivel raíz llamados client y server.

Crearemos nuestra aplicación React Front-end  en la carpeta client, y nuestro backend con Node/express en la carpeta server.

2. Cómo instalar nuestras dependencias de client

Abre una terminal en la raíz del proyecto (en VS Code, puedes hacer esto al presionar Ctrl + ' o al ir a terminal->new terminal).

Luego, instalaremos React en nuestra carpeta client:

$ npx create-react-app client

Después de que React se haya instalado, ve hacia la carpeta client, e instala las siguientes dependencias:

$ cd client
$ npm i react-router-dom socket.io-client

React-router-dom nos permitirá configurar las rutas a nuestros distintos componentes de React – esencialmente creando diferentes páginas.

Socket.io-client es la versión cliente de socket.io, que nos permite "emitir" eventos al servidor. Una vez que el servidor lo recibe, podemos usar la versión del servidor de socket.io para hacer cosas como enviar mensajes a los usuarios en la misma sala como el emisor, o unirse con un usuario a una sala de socket.

Ganarás un mejor entendimiento de esto más tarde cuando lleguemos a implementar estas ideas con código.

3. Cómo iniciar la aplicación de React

Vamos a asegurarnos que todo está funcionando bien ejecutando el siguiente comando desde la carpeta client:

$ npm start

Webpack construirá la aplicación de React y lo servirá en `http://localhost:3000`:

Ahora configuremos nuestra base de datos de HarperDB que usaremos para guardar mensajes de forma permanente enviados por los usuarios.

Cómo configurar HarperDB

Primero, crea una cuenta con HarperDB.

Luego crea una nueva instancia en la nube de HarperDB.

Para hacer las cosas fáciles, selecciona la instancia cloud:

Selecciona el proveedor del cloud (Yo escojo AWS):

Brinda un nombre a tu instancia de la nube, y crea tus credenciales de la instancia:

HarperDB tiene una capa gratuita generosa que podemos usar para este proyecto, así que selecciona ese:

Verifica que tus detalles son correctos, luego crea la instancia.

Tomará unos pocos minutos para crear la instancia, así que continuemos y, ¡hagamos nuestro primer componente de React!

Cómo construir la Página "Join a Room"

Nuestra página principal va a terminar luciendo así:

El usuario ingresará un nombre de usuario, selecciona una sala de chat desde el despegable, luego haz clic en "Join Room". El usuario será dirigido a la página de la sala de chat.

Así que, hagamos esta página principal.

1. Cómo crear el formulario HTML y agregar estilos

Crea un nuevo archivo en src/pages/home/index.js.

Agregaremos estilos básicos a nuestra aplicación usando módulos de CSS, así que crea un nuevo archivo: src/pages/home/styles.module.css.

Nuestra estructura de carpeta debería ahora lucir así:

Ahora creemos el formulario básico HTML:

// client/src/pages/home/index.js

import styles from './styles.module.css';

const Home = () => {
  return (
    <div className={styles.container}>
      <div className={styles.formContainer}>
        <h1>{`<>DevRooms</>`}</h1>
        <input className={styles.input} placeholder='Username...' />

        <select className={styles.input}>
          <option>-- Select Room --</option>
          <option value='javascript'>JavaScript</option>
          <option value='node'>Node</option>
          <option value='express'>Express</option>
          <option value='react'>React</option>
        </select>

        <button className='btn btn-secondary'>Join Room</button>
      </div>
    </div>
  );
};

export default Home;

Arriba, tenemos un input de texto sencillo para capturar el nombre de usuario, y un despegable seleccionable con algunas opciones por defecto para que el usuario seleccione una sala de chat para unirse.

Ahora importemos este componente en App.js y configuremos una ruta para el componente usando el paquete react-router-dom. Este será nuestra página principal, así que la ruta será /:

// client/src/App.js

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/home';

function App() {
  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route path='/' element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Ahora agreguemos algunos estilos básicos para hacer que nuestra aplicación luzca mas presentable:

/* client/src/App.css */

html * {
  font-family: Arial;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: rgb(63, 73, 204);
}
::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}
.btn {
  padding: 14px 14px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
}
.btn-outline {
  color: rgb(153, 217, 234);
  border: 1px solid rgb(153, 217, 234);
  background: rgb(63, 73, 204);
}
.btn-primary {
  background: rgb(153, 217, 234);
  color: rgb(0, 24, 111);
}
.btn-secondary {
  background: rgb(0, 24, 111);
  color: #fff;
}

También agreguemos los estilos específicos a nuestro componente de la página principal:

/* client/src/pages/home/styles.module.css */

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(63, 73, 204);
}
.formContainer {
  width: 400px;
  margin: 0 auto 0 auto;
  padding: 32px;
  background: lightblue;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid rgb(63, 73, 204);
  font-size: 0.9rem;
}
.input option {
  margin-top: 20px;
}

También hagamos que el botón "Join Room" tenga el ancho completo agregando un atributo de estilo:

// client/src/pages/home/index.js

<button className='btn btn-secondary' style={{ width: '100%' }}>Join Room</button>

Nuestra página principal ahora se ve sólido:

2. Cómo agregar funcionalidad al formulario Join Room

Ahora tenemos un formulario básico y estilos, así que es tiempo de agregar algo de funcionalidad.

Esto es lo que queremos que suceda cuando el usuario haga clic en el botón "Join Room":

1. Verificar que el nombre de usuario y los campos de la sala sean rellenados.
2. Si es así, emitimos un evento de socket a nuestro servidor.
3. Redireccionar al usuario a la página Chat (el cual crearemos luego).

Vamos a necesitar crear algo de estado para almacenar los valores nombre de usuario y room. También necesitamos crear una instancia del socket.

Podríamos crear estos estados directamente dentro de nuestro componente home, pero nuestra página Chat también necesitará acceder al username, room y socket. Así que elevaremos el estado al App.js, donde podemos pasar estas variables a las páginas HomePage y Chat.

Así que, creemos nuestro estado y configuremos un socket en App.js, y pasemos estas variables como props al componente. También pasaremos la función setState de forma que podamos alterar el estado:

// client/src/App.js

import './App.css';
import { useState } from 'react'; // Add this
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client'; // Add this
import Home from './pages/home';

const socket = io.connect('http://localhost:4000'); // Add this -- our server will run on port 4000, so we connect to it from here

function App() {
  const [username, setUsername] = useState(''); // Add this
  const [room, setRoom] = useState(''); // Add this

  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route
            path='/'
            element={
              <Home
                username={username} // Add this
                setUsername={setUsername} // Add this
                room={room} // Add this
                setRoom={setRoom} // Add this
                socket={socket} // Add this
              />
            }
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Ahora podemos acceder a estos props en nuestro componente Home. Usaremos la destructuración para obtener estas props:

// client/src/pages/home/index.js

import styles from './style.module.css';

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    // ...
  );
};

export default Home;

Cuando el usuario ingrese su nombre de usuario o seleccione una sala, necesitamos actualizar las variables de estado username y room:

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  return (
    <div className={styles.container}>
      // ...
        <input
          className={styles.input}
          placeholder='Username...'
          onChange={(e) => setUsername(e.target.value)} // Add this
        />

        <select
          className={styles.input}
          onChange={(e) => setRoom(e.target.value)} // Add this
        >
         // ...
        </select>

        // ...
    </div>
  );
};

export default Home;

Ahora estamos capturamos los datos ingresados por el usuario, podemos crear una función callback joinRoom() para cuando el usuario haga clic en el botón "Join Room":

// client/src/pages/home/index.js

// ...

const Home = ({ username, setUsername, room, setRoom, socket }) => {

  // Add this
  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }
  };

  return (
    <div className={styles.container}>
      // ...

        <button
          className='btn btn-secondary'
          style={{ width: '100%' }}
          onClick={joinRoom} // Add this
        >
          Join Room
        </button>
      // ...
    </div>
  );
};

export default Home;

Arriba, cuando el usuario haga clic en el botón, un evento del socket llamado joinroom se emite, juntamente con un objeto conteniendo el nombre de usuario y la sala seleccionada. Este evento será recibido por nuestro servidor un poco más tarde cuando haremos algo de magia.

Para terminar nuestra página principal, necesitamos agregar una redirección al final de nuestra función joinRoom() para llevar al usuario a la página /chat:

// client/src/pages/home/index.js

// ...
import { useNavigate } from 'react-router-dom'; // Agrega esto

const Home = ({ username, setUsername, room, setRoom, socket }) => {
  const navigate = useNavigate(); // Agrega esto

  const joinRoom = () => {
    if (room !== '' && username !== '') {
      socket.emit('join_room', { username, room });
    }

    // Redirecciona a /chat
    navigate('/chat', { replace: true }); // Agrega esto
  };

 // ...

Pruébalo: escribe un nombre de usuario y selecciona una sala, luego haz clic en Join Room. Deberías ser dirigido a la ruta http://localhost:3000/chat – actualmente una página vacía.

Pero antes que creemos nuestra Página Chat, tengamos algo ejecutándose en el servidor.

Cómo configurar el Servidor

En el servidor, vamos a escuchar los eventos del socket que son emitidos desde el frontend. Actualmente, solamente tenemos un evento join_room siendo emitido desde React, así que agregaremos este escucha de evento primero.

Pero antes de eso, necesitamos instalar nuestras dependencias del servidor y tener el servidor activo y ejecutándose.

1. Cómo instalar las dependencias del servidor

Abre una nueva terminal (en VS Code: Terminal->Nueva Terminal), cambia la carpeta a nuestra carpeta de servidor, inicializa un archivo package.json, e instala las siguientes dependencias:

$ cd server
$ npm init -y
$ npm i axios cors express socket.io dotenv

• Axios es un paquete usado comunmente para hacer solicitudes fácilmente a APIs.
• Cors permite a nuestro cliente hacer solicitudes a otros orígenes – necesario para socket.io para que funcione de forma apropiada. Ve ¿Qué es el CORS? si no has escuchado de CORS antes.
• Express es un framework de Node.js que nos permite escribir nuestro backend más fácilmente con menos código.
• Socket.io es una librería que permite que el cliente y el servidor se comunique a tiempo real – el cual no es posible con solicitudes estándares de HTTP.
• Dotenv es un módulo que nos permite almacenar claves privadas y contraseñas de forma segura, y cargarlos en nuestro códio cuando sea necesario.

También instalaremos nodemon como una dependencia dev, así no tenemos que reiniciar nuestro servidor cada vez que hagamos un cambio al código – ahorrándonos tiempo y energía:

$ npm i -D nodemon

2. Cómo iniciar nuestro servidor

Crea un archivo index.js en la raíz de nuestra carpeta server, y agrega el siguiente código para iniciar el servidor:

// server/index.js

const express = require('express');
const app = express();
const http = require('http');
const cors = require('cors');

app.use(cors()); // Add cors middleware

const server = http.createServer(app);

server.listen(4000, () => 'Server is running on port 4000');

Abre el archivo package.json en nuestro servidor, y agrega un script que nos permitirá usar nodemon en desarrollo:

{
  ...
  "scripts": {
    "dev": "nodemon index.js"
  },
  ...
}

Ahora, iniciemos nuestro servidor al ejecutar el siguiente comando:

$ npm run dev

Podemos verificar rápidamente que nuestro servidor se está ejecutando correctamente al agregar un manejador de solicitudes get:

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');

app.use(cors()); // Agrega cors middleware

const server = http.createServer(app);

// Agrega esto
app.get('/', (req, res) => {
  res.send('Hello world');
});

server.listen(4000, () => 'El servidor está ejecutándose en el puerto 3000');

Ahora ve a http://localhost:4000/:

Nuestro servidor está activo y en ejecución. ¡Ahora es tiempo de hacer cosas de Socket.io en el servidor!

Cómo crear nuestro primer Escucha de Evento de Socket.io en el Servidor

Recuerda que cuando emitimos un evento joinroom desde el cliente? Bueno, pronto vamos a estar escuchar ese evento en el servidor y agregar el usuario a una sala del socket.

Pero primero, necesitamos escuchar cuando un cliente se conecte al servidor a través de socket.io-client.

// server/index.js

const express = require('express');
const app = express();
http = require('http');
const cors = require('cors');
const { Server } = require('socket.io'); // Agrega esto

app.use(cors()); // Agrega cors middleware

const server = http.createServer(app); // Agrega esto

// Agrega esto
// Crea un servidor io y permite CORS desde http://localhost:3000 con metodos GET y POST
const io = new Server(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST'],
  },
});

// Agrega esto
// Escucha cuando el cliente se conecta a traves de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Podemos escribir nuestro our socket event listeners in here...
});

server.listen(4000, () => 'El servidor está ejecutándose en el puerto 3000');

Ahora, cuando el cliente se conecta desde el frontend, el backend captura el evento de la conexión, y registrará User connected con el id único del socket para ese cliente particular.

Probemos si el servidor ahora está captrando el evento de la conección desde el cliente. Ve a tu aplicación de React en http://localhost:3000/ y refresca la página.

Deberías ver el siguiente registro en tu consola de terminal del servidor:

Genial, nuestro cliente se ha conectado a nuestro servidor a través de socket.io. Nuestro cliente y servidor ahora se pueden comunicar en, ¡tiempo real!

Cómo funcionan las Salas en Socket.io

Desde la documentación de Socket.io (no está disponible en español todavía):

"Una sala es un canal arbitrario al que sockets se puede unir (join) y abandonar (leave). Puede ser usado para emitir eventos a un subconjunto de clientes."

Así que, podemos unir el usuario a una sala, y luego el servidor puede enviar mensajes a todos los usuarios en esa sala – permitiendo a los usuarios enviarse mensajes en tiempo real. ¡Genial!

Cómo unir el usuario a una sala de Socket.io

Una vez que el usuario se ha conectado a través de Socket.io, podemos agregar nuestros escuchas de eventos del socket en el servidor para escuchar eventos emitidos desde el cliente. También, podemos emitir eventos en el servidor, y esucharlos en el cliente.

Ahora escuchemos por el evento joinroom, que capture los datos (nombre de usuario y sala), y agregue al usuario a una sala de socket:

// server/index.js

// Escuchar cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega esto
  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {
    const { username, room } = data; // Datos enviados desde el cliente cuando el evento join_room se emite
    socket.join(room); // Une el usuario a una sala de socket
  });
});

Cómo enviar un mensaje a los usuarios en una sala

Ahora enviemos un mensaje a todos los usuarios en la sala, aparte del usuario que se acaba de unir, para notificarlos que un nuevo usuario se ha unido:

// server/index.js

const CHAT_BOT = 'ChatBot'; // Agrega esto
// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {
    const { username, room } = data; // Datos enviados desde el cliente cuando el evento join_room se emite
    socket.join(room); // Une el usuario a una sala de socket

    // Agrega esto
    let __createdtime__ = Date.now(); // Marcas de tiempo actuales
    // Envía un mensaje a todos los usuario en la sala, aparte del usuario que se acaba de unir
    socket.to(room).emit('receive_message', {
      message: `${username} has joined the chat room`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Arriba, estamos emitiendo un evento receive_message a todos los clientes en la sala en el que el usuario se acaba de unir, juntamente con algo de dato: el mensaje, el nombre de usuario quien envió el mensaje, y el tiempo en que el mensaje fue enviado.

Agregaremos un escucha de evento en nuestra aplicación de React un poco después para capturar este evento, y muestra el mensaje en la pantalla.

También enviemos un mensaje de bienvenida al nuevo usuario recién unido:

// server/index.js

io.on('connection', (socket) => {
  // ...

    // Agrega esto
    // Envía el msg de bienvenida al usuario que se acaba de unir
    socket.emit('receive_message', {
      message: `Welcome ${username}`,
      username: CHAT_BOT,
      __createdtime__,
    });
  });
});

Cuando agregamos un usuario a una sala de Socket.io, Socket.io solamente almacena los ids de los sockets para cada usuario. Pero necesitaremos los nombres de usuario de todos en la sala, así también como el nombre de sala. Así que, almacenemos esos datos en variables en el servidor:

// server/index.js

// ...

const CHAT_BOT = 'ChatBot';
// Agrega esto
let chatRoom = ''; // Ej. javascript, node,...
let allUsers = []; // Todos los usuarios en la sala de chat actual

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
    // ...

    // Agrega esto
    // Guarda el nuevo usuario a la sala
    chatRoom = room;
    allUsers.push({ id: socket.id, username, room });
    chatRoomUsers = allUsers.filter((user) => user.room === room);
    socket.to(room).emit('chatroom_users', chatRoomUsers);
    socket.emit('chatroom_users', chatRoomUsers);
  });
});

Arriba, también estamos enviando un arreglo de todo el chatRoomUsers de nuevo al cliente a través del evento chatroomusers, así que podemos listar todos los nombres de usuario en el frontend.

Antes que agreguemos cualquier otro código a nuestro servidor, volvamos a nuestro frontend y creamos la página Chat – así podemos probar si estamos recibiendo los eventos receivemessage.

Cómo construir la Página Chat

En tu carpeta cliente, crea dos nuevos archivos:

1. src/pages/chat/index.js
2. src/pages/chat/styles.module.css

Agreguemos algunos estilos que usaremos en nuestra página Chat y componentes:

/* client/src/pages/chat/styles.module.css */

.chatContainer {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 20px;
}

/* Room and users component */
.roomAndUsersColumn {
  border-right: 1px solid #dfdfdf;
}
.roomTitle {
  margin-bottom: 60px;
  text-transform: uppercase;
  font-size: 2rem;
  color: #fff;
}
.usersTitle {
  font-size: 1.2rem;
  color: #fff;
}
.usersList {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 60px;
  color: rgb(153, 217, 234);
}
.usersList li {
  margin-bottom: 12px;
}

/* Messages */
.messagesColumn {
  height: 85vh;
  overflow: auto;
  padding: 10px 10px 10px 40px;
}
.message {
  background: rgb(0, 24, 111);
  border-radius: 6px;
  margin-bottom: 24px;
  max-width: 600px;
  padding: 12px;
}
.msgMeta {
  color: rgb(153, 217, 234);
  font-size: 0.75rem;
}
.msgText {
  color: #fff;
}

/* Message input and button */
.sendMessageContainer {
  padding: 16px 20px 20px 16px;
}
.messageInput {
  padding: 14px;
  margin-right: 16px;
  width: 60%;
  border-radius: 6px;
  border: 1px solid rgb(153, 217, 234);
  font-size: 0.9rem;
}

Ahora, veamos cómo terminará luciendo nuestra página Chat:

Agregando todo el código y lógica para esta página en un archivo podría volverse confuso y difícil de manejar, así que aprovechemos el hecho de que estamos usando un framework de frontend fabuloso (React) y dividir nuestra página en componentes:

Los componentes de la página chat:

A: Contiene el nombre de la sala, una lista de usuarios en esa sala, y un botón "Leave" que quitar al usuario desde la sala.

B: Los mensajes enviados. Al inicio de la renderización, los últimos 100 mensajes enviados en esa sala será solicitado desde la base de datos y mostrado al usuario.

C: Una entrada y botón para escribir y enviar un mensaje.

Primero crearemos el componente B, así podemos mostrar los mensajes al usuario.

Cómo crear el Componente Messages (B)

Crea un nuevo archivo en src/pages/chat/messages.js y agrega el siguiente código:

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  // Se ejecuta cuando sea que un evento del socket es recibido desde el servidor
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Quita la escucha del evento al desmontar el componente
    return () => socket.off('receive_message');
  }, [socket]);

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    <div className={styles.messagesColumn}>
      {messagesRecieved.map((msg, i) => (
        <div className={styles.message} key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className={styles.msgMeta}>{msg.username}</span>
            <span className={styles.msgMeta}>
              {formatDateFromTimestamp(msg.__createdtime__)}
            </span>
          </div>
          <p className={styles.msgText}>{msg.message}</p>
          <br />
        </div>
      ))}
    </div>
  );
};

export default Messages;

Ahora, tenemos un hook useEffect que se ejecuta cuando sea que el evento del socket se recibe. Luego recibimos los datos del mensaje en el escucha del evento receivemessage. Desde ahí, ponemos el estado messagesReceived, el cual es un arreglo de objetos de mensaje conteniendo el mensaje, nombre de usuario del emisor, y la fecha del mensaje que fue enviado.

Importemos nuestro nuevo componentes de mensajes en la página Chat, y luego creemos una ruta para la página Chat en App.js:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';

const Chat = ({ socket }) => {
  return (
    <div className={styles.chatContainer}>
      <div>
        <MessagesReceived socket={socket} />
      </div>
    </div>
  );
};

export default Chat;

// client/src/App.js

import './App.css';
import { useState } from 'react';
import Home from './pages/home';
import Chat from './pages/chat';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {
  const [username, setUsername] = useState('');
  const [room, setRoom] = useState('');

  return (
    <Router>
      <div className='App'>
        <Routes>
          <Route
            path='/'
            element={
              <Home
                username={username}
                setUsername={setUsername}
                room={room}
                setRoom={setRoom}
                socket={socket}
              />
            }
          />
          {/* Add this */}
          <Route
            path='/chat'
            element={<Chat username={username} room={room} socket={socket} />}
          />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Probemos esto, ve a la página principal y únete a una sala:

Deberíamos ser llevados a la página Chat, y recibir un mensaje de bienvenida del ChatBot:

Los usuarios ahora pueden ver los mensajes que reciben. ¡Genial!

Próximo: configurar nuestra base de datos así podemos guardar los mensajes permanentemente.

Cómo crear un Esquema y una Tabla en HarperDB

Vuelve a tu dashboard de HarperDB, y haz clic en "browser". Luego crea un nuevo esquemos llamado "realtime_chat_app". Un esquema es simplemente un grupo de tablas.

Dentro de ese esquema, crea una tabla llamada "messages", con un atributo hash de "id".

Ahora tenemos necestiamos donde almacenar los mensajes, así que creemos el componente SendMessage.

Cómo crear el componente Send Message (C)

Crea el archivo src/pages/chat/send-message.js y agrega el siguiente código:

// client/src/pages/chat/send-message.js

import styles from './styles.module.css';
import React, { useState } from 'react';

const SendMessage = ({ socket, username, room }) => {
  const [message, setMessage] = useState('');

  const sendMessage = () => {
    if (message !== '') {
      const __createdtime__ = Date.now();
      // Envia un mensaje al servidor. No podemos especificar a quien enviamos el mensaje desde el frontend. Solamente podemos enviar al servidor. El servidor por lo tanto puede enviar un mensaje al resto de los usuarios en la sala
      socket.emit('send_message', { username, room, message, __createdtime__ });
      setMessage('');
    }
  };

  return (
    <div className={styles.sendMessageContainer}>
      <input
        className={styles.messageInput}
        placeholder='Message...'
        onChange={(e) => setMessage(e.target.value)}
        value={message}
      />
      <button className='btn btn-primary' onClick={sendMessage}>
        Send Message
      </button>
    </div>
  );
};

export default SendMessage;

Arriba, cuando el usuario hace clic en el botón "Send Message", un evento del socket send_message se emite al servidor, junto con un objeto de mensaje. Manejaremos este evento en el servidor dentro de poco.

Importa SendMessage en nuestra página Chat:

// src/pages/chat/index.js

import styles from './styles.module.css';
import MessagesReceived from './messages';
import SendMessage from './send-message';

const Chat = ({ username, room, socket }) => {
  return (
    <div className={styles.chatContainer}>
      <div>
        <MessagesReceived socket={socket} />
        <SendMessage socket={socket} username={username} room={room} />
      </div>
    </div>
  );
};

export default Chat;

La página Chat ahora luce así:

Luego necesitamos configurar nuestras variables de entorno de HarperDB así podemos comenzar a interactuar con la base de datos.

Cómo configurar las Variables de Entorno de HarperDB

Para que seas capaz de guardar los mensajes en HarperDB, necesitarás tu URL de instancia de HarperDB, y tu contraseña API.

En tu dashboard de HarperDB, haz clic en tu instancia, luego ve a "config". Encontrarás tu URL de instancia, y la cabecera de Autenticación de API de tu instancia – eso es, tu contraseña "super_user" que te permite realizar cualquier solicitud a la base de datos – ¡PARA TUS OJOS SOLAMENTE!

Guardaremos estas variables en un archivo .env. Advertencia: ¡No empujes el archivo .env a Github! Este archivo no debería ser visible públicamente. Las variables se cargan a través del servidor por detrás.

Crea los siguientes archivos y agrega tu URL y contraseña de HarperDB:

// server/.env

HARPERDB_URL="<tu url va aqui>"
HARPERDB_PW="Basic <tu contraseña aqui>"

También crearemos un archivo .gitignore para evitar que el .env se suba a Github, juntamente con la carpeta node_modules:

// server/.gitignore

.env
node_modules

Nota: ser bueno en Git y Github es 100% imprescindible para todos los desarrolladores. Revisa mi artículo de los flujos de trabajo de Git si necesitas mejorar tu juego de Git.

O si constantemente te encuentras revisando los mismos comandos de Git, y quieres una forma rápida de verlos, y copiar/pegar los comandos – revisa mi hoja de trucos de los comandos de Git en PDF y mi póster de hoja de trucos de Git físico.

Finalmente, carguemos nuestras variables de entorno en nuestro servidor al agregar este código en la parte superior de nuestro archivo main:

// server/index.js

require('dotenv').config();
console.log(process.env.HARPERDB_URL); // quita esto despues que hayas visto que funcionó
const express = require('express');
// ...

Cómo permitir a los Usuarios que se envíen mensajes con Socket.io

En el servidor, escucharemos el evento sendmessage, luego enviaremos el mensaje a todos los usuarios dentro de la sala:

// server/index.js

const express = require('express');
// ...
const harperSaveMessage = require('./services/harper-save-message'); // Agrega esto

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('send_message', (data) => {
    const { message, username, room, __createdtime__ } = data;
    io.in(room).emit('receive_message', data); // Envia a todos los usuarios en la sala, incluyendo al emisor
    harperSaveMessage(message, username, room, __createdtime__) // Guarda el mensaje en la bd
      .then((response) => console.log(response))
      .catch((err) => console.log(err));
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Ahora necesitamos crear la función harperSaveMessage. Crea un nuevo archivo en server/services/harper-save-message.js, y agrega lo siguiente:

// server/services/harper-save-message.js

var axios = require('axios');

function harperSaveMessage(message, username, room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  var data = JSON.stringify({
    operation: 'insert',
    schema: 'realtime_chat_app',
    table: 'messages',
    records: [
      {
        message,
        username,
        room,
      },
    ],
  });

  var config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperSaveMessage;

Arriba, guardar los datos podria tomar un poco de tiempo, así que devolvemos una promesa el cual será resuelto si los datos se guardan satisfactoriamente, o rechazada si no se guardan.

Si te estás preguntando donde obtuve el código de arriba, HarperDB provee una sección increíble de "ejemplos de código" en su dashboard studio, el cual nos facilita la vida:

¡Tiempo de descanso! Únete a una sala como un usuario, luego envía un mensaje. Luego ve a HarperDB y haz clic en "browse", luego haz clic en la tabla "messages". Deberías ver tú mensaje en la base de datos:

Genial 😎. Así que, ¿ahora qué? Bueno, sería bueno si los últimos 100 mensajes enviados en la sala fueran cargados cuando un usuario se una a  una sala, ¿no?

Cómo obtener los mensajes desde HarperDB

En el servidor, creemos una función que solicite los últimos 100 mensajes enviados en una sala particular (fíjate cómo HarperDB también nos permite usar solicitudes de SQL 👌):

// server/services/harper-get-messages.js

let axios = require('axios');

function harperGetMessages(room) {
  const dbUrl = process.env.HARPERDB_URL;
  const dbPw = process.env.HARPERDB_PW;
  if (!dbUrl || !dbPw) return null;

  let data = JSON.stringify({
    operation: 'sql',
    sql: `SELECT * FROM realtime_chat_app.messages WHERE room = '${room}' LIMIT 100`,
  });

  let config = {
    method: 'post',
    url: dbUrl,
    headers: {
      'Content-Type': 'application/json',
      Authorization: dbPw,
    },
    data: data,
  };

  return new Promise((resolve, reject) => {
    axios(config)
      .then(function (response) {
        resolve(JSON.stringify(response.data));
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

module.exports = harperGetMessages;

Llamaremos a esta función cuando sea que un usuario se una a una sala:

// server/index.js

// ...
const harperSaveMessage = require('./services/harper-save-message');
const harperGetMessages = require('./services/harper-get-messages'); // Add this

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {
  console.log(`User connected ${socket.id}`);

  // Agrega un usuario a una sala
  socket.on('join_room', (data) => {

    // ...

    // Agrega esto
    // Obtiene los últimos 100 mensajes enviados en la sala chat
    harperGetMessages(room)
      .then((last100Messages) => {
        // console.log('ultimos mensajes', last100Messages);
        socket.emit('last_100_messages', last100Messages);
      })
      .catch((err) => console.log(err));
  });

 // ...

Arriba, si los mensajes se solicitan de forma exitosa, emitimos un evento de Socket.io llamado last_100_messages. Ahora escucharemos este evento en el frontend.

Cómo mostrar los últimos 100 mensajes en el Cliente

Abajo, agregamos un hook useEffect que contiene un escucha de evento de Socket.io para el evento last_100_messages. Desde ahí, los mensajes son ordenados en orden de fecha, con el más reciente al final, y el estado messagesReceived se actualiza.

Cuando messagesReceived se actualiza, un useEffect se ejecuta para desplazar el div messageColumn al mensaje más reciente. Esto mejora la experiencia de usuario de nuestra aplicación 👍.

// client/src/pages/chat/messages.js

import styles from './styles.module.css';
import { useState, useEffect, useRef } from 'react';

const Messages = ({ socket }) => {
  const [messagesRecieved, setMessagesReceived] = useState([]);

  const messagesColumnRef = useRef(null); // Add this

  // Se ejecuta cuando sea que un evento del socket se reciba desde el servidor
  useEffect(() => {
    socket.on('receive_message', (data) => {
      console.log(data);
      setMessagesReceived((state) => [
        ...state,
        {
          message: data.message,
          username: data.username,
          __createdtime__: data.__createdtime__,
        },
      ]);
    });

    // Quita el escucha de eventos al desmontarse el componente 
    return () => socket.off('receive_message');
  }, [socket]);

  // Agrega esto
  useEffect(() => {
    // Ultimos 100 mensajes enviados en la sala chat (solicitados desde la bd en el backend)
    socket.on('last_100_messages', (last100Messages) => {
      console.log('Last 100 messages:', JSON.parse(last100Messages));
      last100Messages = JSON.parse(last100Messages);
      // Ordena estos mensajes por __createdtime__
      last100Messages = sortMessagesByDate(last100Messages);
      setMessagesReceived((state) => [...last100Messages, ...state]);
    });

    return () => socket.off('last_100_messages');
  }, [socket]);

  // Agrega esto
  // Se desplaza al mensaje más reciente
  useEffect(() => {
    messagesColumnRef.current.scrollTop =
      messagesColumnRef.current.scrollHeight;
  }, [messagesRecieved]);

  // Agrega esto
  function sortMessagesByDate(messages) {
    return messages.sort(
      (a, b) => parseInt(a.__createdtime__) - parseInt(b.__createdtime__)
    );
  }

  // dd/mm/yyyy, hh:mm:ss
  function formatDateFromTimestamp(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleString();
  }

  return (
    // Agrega ref a este div
    <div className={styles.messagesColumn} ref={messagesColumnRef}>
      {messagesRecieved.map((msg, i) => (
        <div className={styles.message} key={i}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span className={styles.msgMeta}>{msg.username}</span>
            <span className={styles.msgMeta}>
              {formatDateFromTimestamp(msg.__createdtime__)}
            </span>
          </div>
          <p className={styles.msgText}>{msg.message}</p>
          <br />
        </div>
      ))}
    </div>
  );
};

export default Messages;

Cómo mostrar la Sala y los Usuarios (A)

Hemos hecho los componentes B y C, así que terminemos todo al hacer A.

En el servidor, cuando un usario se une a una sala, emitimos un evento chatroomusers que envía todos los usuarios de la sala a todos los clientes en esa sala. Escuchemos ese evento en un componente llamado RoomAndUsers.

Abajo, también hay un botón "Leave" que, cuando se presiona, hace la emisión de un evento leaveroom al servidor. Luego redirecciona el usuario devuelta a la página principal.

// client/src/pages/chat/room-and-users.js

import styles from './styles.module.css';
import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const RoomAndUsers = ({ socket, username, room }) => {
  const [roomUsers, setRoomUsers] = useState([]);

  const navigate = useNavigate();

  useEffect(() => {
    socket.on('chatroom_users', (data) => {
      console.log(data);
      setRoomUsers(data);
    });

    return () => socket.off('chatroom_users');
  }, [socket]);

  const leaveRoom = () => {
    const __createdtime__ = Date.now();
    socket.emit('leave_room', { username, room, __createdtime__ });
    // Redirecciona a la pagina principal
    navigate('/', { replace: true });
  };

  return (
    <div className={styles.roomAndUsersColumn}>
      <h2 className={styles.roomTitle}>{room}</h2>

      <div>
        {roomUsers.length > 0 && <h5 className={styles.usersTitle}>Users:</h5>}
        <ul className={styles.usersList}>
          {roomUsers.map((user) => (
            <li
              style={{
                fontWeight: `${user.username === username ? 'bold' : 'normal'}`,
              }}
              key={user.id}
            >
              {user.username}
            </li>
          ))}
        </ul>
      </div>

      <button className='btn btn-outline' onClick={leaveRoom}>
        Leave
      </button>
    </div>
  );
};

export default RoomAndUsers;

Importemos este componente en la página Chat:

// client/src/pages/chat/index.js

import styles from './styles.module.css';
import RoomAndUsersColumn from './room-and-users'; // Add this
import SendMessage from './send-message';
import MessagesReceived from './messages';

const Chat = ({ username, room, socket }) => {
  return (
    <div className={styles.chatContainer}>
      {/* Agrega esto */}
      <RoomAndUsersColumn socket={socket} username={username} room={room} />

      <div>
        <MessagesReceived socket={socket} />
        <SendMessage socket={socket} username={username} room={room} />
      </div>
    </div>
  );
};

export default Chat;

Cómo quitar a un Usuarío de una sala de Socket.io

Socket.io provee un método leave() que puedes usar para quitar a un usuario de una sala de Socket.io. También estamos manteniendo un registro de nuestros usuarios en un arreglo en la memoria del servidor, así que quitaremos al usuario de ese arreglo también:

// server/index.js

const leaveRoom = require('./utils/leave-room'); // Add this

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('leave_room', (data) => {
    const { username, room } = data;
    socket.leave(room);
    const __createdtime__ = Date.now();
    // Quita a un usuario de la memoria
    allUsers = leaveRoom(socket.id, allUsers);
    socket.to(room).emit('chatroom_users', allUsers);
    socket.to(room).emit('receive_message', {
      username: CHAT_BOT,
      message: `${username} has left the chat`,
      __createdtime__,
    });
    console.log(`${username} has left the chat`);
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Ahora necesitamos crear la función leaveRoom():

// server/utils/leave-room.js

function leaveRoom(userID, chatRoomUsers) {
  return chatRoomUsers.filter((user) => user.id != userID);
}

module.exports = leaveRoom;

¿Por qué poner esta función corta en una carpeta utils aparte, te preguntas? Porque lo estaremos usando luego y no queremos repetirnos (mantenemos nuestro código DRY).

Probémoslo, abre dos ventanas lado a lado, y únete a ambos chats:

Luego haz clic en el botón leave en la ventana 2:

El usuario se quita del chat, y un mensaje se envía a los otros usuarios – notificándolos que se ha ido. ¡Bien!

Cómo agregar el Escucha de Evento Disconnect de Socket.io

¿Qué pasa si el usuario de alguna manera se desconecta del servidor, como si su internet se cayera? Socket.io provee un escucha de evento adjunto disconnects para esto. Agreguémosle a nuestro servidor para quitar a un usuario de la memoria cuando se desconecta:

// server/index.js

// ...

// Escucha cuando el cliente se conecta a través de socket.io-client
io.on('connection', (socket) => {

  // ...

  // Agrega esto
  socket.on('disconnect', () => {
    console.log('El usuario se desconectó del chat');
    const user = allUsers.find((user) => user.id == socket.id);
    if (user?.username) {
      allUsers = leaveRoom(socket.id, allUsers);
      socket.to(chatRoom).emit('chatroom_users', allUsers);
      socket.to(chatRoom).emit('receive_message', {
        message: `${user.username} se ha desconectado del chat.`,
      });
    }
  });
});

server.listen(4000, () => 'El Servidor se está ejecutando en el puerto 3000');

Y ahí lo tienes – haz construido una aplicación de chat de tiempo real fullstack con un frontend de React, un backend de Node/Express, y una base de datos de HarperDB. ¡Buen trabajo!

Para la próxima, planeo en revisar nuestras Funciones Personalizadas de HarperDB, el cual permite a los usuarios definir sus propios endpoints de API dentro de HarperDB. Esto significa que podemos construir nuestra aplicación completa, ¡en un sólo lugar! Mira un ejemplo de cómo HarperDB está colapsando el stack en este artículo.

Un desafío para ti 💪

Si refrescas la página Chat, el nombre de usuario del usuario y la sala desaparecerán. Mira si puedes prevenir que esta información se pierda cuando el usuario refresque la página. Pista: ¡el local storage podría ser útil!

¡Gracias por leer!

Si te pareció útil este artículo, puedes:

• Suscribirte a mi canal de YouTube. Estaré subiendo tutoriales en profunidad y vídeos de proyectos sobre React/NextJS/Node/Express.
• Sígueme en Twitter donde comparto tweets sobre mi jornada de freelancing, proyectos propios, y aprendizajes actuales.
• Revisa mi almacén de Gumroad donde hago hojas de trucos y pósteres útiles y populares (8000 descargas al tiempo de escribir).
• Revisa mi blog

React nos ha proporcionado herramientas poderosas para desarrollar aplicaciones web interactivas y eficientes. Con la introducción de los hooks, se abrió un mundo de posibilidades para manejar estados, efectos y funciones de manera más declarativa. Más allá de los hooks básicos (useState, useEffect), existen otros más avanzados como useMemo, useCallback y useLayoutEffect, diseñados para abordar desafíos específicos relacionados con el rendimiento y la experiencia del usuario.

En este artículo, exploraremos estos tres hooks en profundidad, desde sus fundamentos teóricos hasta su implementación práctica en una aplicación React que simula un ecommerce.

1. useMemo: Optimizando cálculos innecesarios

¿Qué es?

useMemo es un hook que nos permite memorizar el resultado de una función costosa para evitar que se recalculen innecesariamente en cada renderizado. Es especialmente útil cuando trabajamos con grandes conjuntos de datos o funciones intensivas en computación.

¿Cómo funciona?

Cuando React renderiza un componente, todas las funciones dentro del componente se ejecutan. Si una función realiza cálculos pesados, esto puede afectar significativamente el rendimiento. Aquí es donde entra useMemo, que guarda ("memoriza") el resultado de una función y solo la vuelve a ejecutar si alguna de las dependencias cambia.

Características clave:

• Memoriza valores computados.
• Se usa principalmente para optimizar componentes que dependen de cálculos intensivos.
• Acepta dos argumentos: una función y un arreglo de dependencias.

Ejemplo básico:

const memoizedValue = useMemo(() => { 
	return computeExpensiveValue(a, b); 
}, [a, b]);

En este caso, computeExpensiveValue solo se recalculará cuando a o b cambien.

2. useCallback: Memoriza funciones

¿Qué es?

useCallback se utiliza para memorizar funciones, evitando que React cree nuevas instancias de la función en cada renderizado. Esto es útil cuando pasamos funciones como props a componentes hijos, ya que previene que estos se re-rendericen innecesariamente.

¿Por qué es importante?

En React, cuando un componente padre se vuelve a renderizar, React considera que cualquier función definida dentro de ese componente es "nueva". Esto puede llevar a que los componentes hijos que reciben esa función como prop también se re-rendericen, incluso si no es necesario.

Características clave:

• Memoriza la referencia de una función.
• Es útil en combinación con React.memo, que optimiza componentes para no renderizarse si sus props no cambian.
• Acepta dos argumentos: una función y un arreglo de dependencias.

Ejemplo básico:

const memoizedCallback = useCallback(() => { 
	doSomething(a, b); 
}, [a, b]);

Aquí, la función doSomething se volverá a definir únicamente si a o b cambian.

3. useLayoutEffect: Ajustes visuales antes del renderizado

¿Qué es?

useLayoutEffect es similar a useEffect, pero se ejecuta de manera síncrona después de que React ha realizado todas las modificaciones al DOM y antes de que el navegador pinte la pantalla. Esto permite realizar ajustes visuales inmediatos, como calcular dimensiones o reposicionar elementos.

¿Cuándo usarlo?

Se utiliza en situaciones donde necesitas leer o escribir directamente en el DOM y esos cambios deben reflejarse antes de que el usuario vea algo en pantalla.

Características clave:

• Se ejecuta antes del renderizado visual.
• Es útil para medir dimensiones, realizar cálculos de posición o sincronizar animaciones.
• Acepta dos argumentos: una función y un array de dependencias.

Ejemplo básico:

useLayoutEffect(() => { 
	const dimension = element.getBoundingClientRect();
    console.log(dimension); 
}, [element]);

Implementación Práctica

Para fortalecer el conocimiento, vamos a aplicar estos hooks en una aplicación React,  un ecommerce que hemos venido desarrollando. El objetivo es mejorar el rendimiento y la experiencia del usuario utilizando useMemo, useCallback y useLayoutEffect.

Contexto de la Aplicación:

• Es un ecommerce que ya utiliza hooks como useState y useEffect.
• Necesitamos agregar filtros y tooltips, los cuales pueden generar impacto en el performance.
• Queremos optimizar cálculos, evitar renders innecesarios y ajustar elementos visuales dinámicamente.

1. Aplicación de useMemo: Filtros dinámicos

En el componente ProductFilters.jsx, utilizamos useMemo para calcular las categorías y el rango de precios:

const categories = useMemo(() => { 
	return [...new Set(products.map((product) => product.category))]; }, [products]); 
    
const priceRange = useMemo(() => { 
	const prices = products.map((product) => product.price); 
    return { min: Math.floor(Math.min(...prices)), 
    		 max: Math.ceil(Math.max(...prices)), 
    }; 
 }, [products]);

Esto asegura que las categorías y los precios solo se recalculen cuando products cambie, mejorando el rendimiento en aplicaciones con grandes cantidades de datos.

2. Aplicación de useCallback: Optimización de funciones

En Home.jsx, usamos useCallback para manejar cambios en los filtros:

const handleCategoryChange = useCallback((category) => { 
	setCategory(category); 
}, []); 

const handlePriceChange = useCallback((price) => { 
	setMaxPrice(price); 
}, []);

Esto evita que las funciones sean recreadas en cada renderizado, reduciendo renders innecesarios en el componente ProductFilters.

3. Aplicación de useLayoutEffect: Tooltips ajustables

En el componente PriceTooltip.jsx, utilizamos useLayoutEffect para ajustar la posición de un tooltip dentro del viewport:

useLayoutEffect(() => { 
	if (showTooltip && tooltipRef.current && containerRef.current) { 
    	const containerRect = containerRef.current.getBoundingClientRect(); 
        const tooltipRect = tooltipRef.current.getBoundingClientRect(); 
        const newPosition = { 
        	top: -tooltipRect.height, 
        	left: containerRect.left + tooltipRect.width > window.innerWidth ? -(tooltipRect.width - containerRect.width) : 0, 
        }; 
       	setTooltipPosition(newPosition); 
    } 
}, [showTooltip]);

Esto asegura que los tooltips sean visibles y estén correctamente posicionados en todo momento.

Al finalizar la implementación de filtros y mejoras visuales, usando la combinación de useMemo, useCallback y useLayoutEffect, logramos mejorar el perfomance de nuestra aplicación y en general estos hooks permiten crear aplicaciones React más rápidas, eficientes y visualmente atractivas.

Estos hooks avanzados no solo mejoran el rendimiento, sino que también optimizan la experiencia del usuario, llevándote un paso más allá en el desarrollo frontend. ¡Ponlos en práctica y observa cómo tus aplicaciones alcanzan un nuevo nivel!

Los carruseles sirven tanto para destacar tu Interfaz de Usuario como para ahorrar espacio y así ofrecer una buena experiencia de usuario.

Los carruseles se han convertido en un elemento fundamental en el diseño UI, frecuentemente usados para mostrar imágenes, testimonios de clientes, entre otros. Son indispensables al momento de crear una interfaz llamativa y dinámica.

En este artículo, nos sumergiremos en el proceso de crear un carrusel de imágenes con React y Framer Motion, guiándote por cada paso para crear un componente visual llamativo e interactivo para tu aplicación.

¿Qué es Framer Motion?

Es una librería de animación de código abierto para aplicaciones React, que se utiliza para crear animaciones responsive y dinámicas para nuestra aplicación web.

Framer motion tiene muchas funcionalidades útiles, como por ejemplo:

1. Animation: Esto permite hacer transiciones fluidas para tus componentes.
2. Gestures: La librería ofrece soporte para movimientos táctiles y con el ratón. Esto permite dar cuenta de ciertos eventos.
3. Variants: Framer motion permite declarar componentes de forma declarativa y así mantener tu código ordenado y reutilizable.

Todas estas funcionalidades son muy útiles y pronto veremos cómo utilizarlas.

Para poder entender mejor cómo utilizar Framer Motion, se puede explorar su documentación y recursos [en inglés] aunque en este artículo nos vamos a concentrar en sus elementos fundamentales. Mientras los guío a través de los conceptos básicos de Framer Motion, mi objetivo principal es crear un carrusel atractivo e interactivo.

Cómo preparar tu entorno de desarrollo

Lo primero que vamos a hacer es preparar nuestro entorno de desarrollo. Esto incluye instalar los paquetes necesarios para poder crear tu aplicación, como Node.js y npm. Si ya los tienes instalados, no es necesario que lo hagas de nuevo.

Crear una aplicación React

A esta altura, voy a asumir que ya tienes instalados Node y npm. Para crear una aplicación React, solo debes ir a tu terminal e ir a la ubicación donde quieras alojar tu aplicación.

Luego, ejecuta este comando:

npx create-react-app react-image-carousel

Puedes elegir cualquier nombre para tu aplicación, pero a los fines de este artículo yo le pondré react-image-carousel.

Una vez que hayas creado exitosamente tu aplicación, abre la carpeta en tu editor de código. Deberías tener algunos archivos y estilos por defecto, además de verse así:

Como no vamos a necesitar los siguientes archivos, puedes borrarlos: app.test.js, y logo.svg, and reportWebVitals.js, setupTest.js. También puedes borrar los estilos que vienen por defecto en App.css.

Ahora que tu aplicación React ya está creada y preparada, el último paso para terminar de preparar tu entorno de desarrollo es instalar Framer Motion.

Para hacer esto, simplemente ve a tu terminal y asegúrate que estés en la carpeta de tu proyecto, y luego ejecuta este comando:

 npm install framer-motion

Esto debería instalar la última versión de Framer Motion. Con esto ya estarás listo. Solo ejecuta el comando npm run start e inicia el entorno de desarrollo en tu navegador.

Cómo diseñar el componente Image Carousel

Para empezar con el diseño, vamos a crear primero el componente Carousel.js. Dentro del componente Carousel, vamos a importar el hook useState de React, y luego las propiedades motion y AnimatePresence desde Framer Motion

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

Luego creamos nuestra función Carousel que lleva la prop images, un arreglo con los enlaces de las imágenes:

const Carousel = ({ images }) => {};

En nuestra función Carousel, vamos a inicializar un variable de estado con useState. Para hacer un seguimiento del índice de imagen actual, usamos setCurrentIndex, que es la función para actualizar el índice.

Luego, creamos tres funciones helper que serán las encargadas de manejar las interacciones de usuario. Estas incluyen:

• handleNext: Esto actualiza el currentIndex al siguiente índice y así poder cambiar la foto. Cuando llega al fin del arreglo, comienza de nuevo.
• handlePrevious: Hace lo mismo que handleNext, pero en orden inverso, lo que nos permite volver a una imagen.
• handleDotClick: Esta función lleva un índice como parámetro y actualiza currentIndex. Con esto podemos movernos entre las distintas imágenes solo haciendo clic en los puntos.

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };
  const handlePrevious = () => {
    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };
  const handleDotClick = (index) => {
    setCurrentIndex(index);
  };

Estas son las funciones helper que vamos a necesitar para nuestro componente.

Cómo crear nuestra plantilla

Nuestra plantilla es bastante simple y consiste de nuestra imagen, el deslizador [slide_directon] y los puntos [indicator]

  return (
    <div className="carousel">
        <img
          key={currentIndex}
          src={images[currentIndex]}
        /><div className="slide_direction">
        <div className="left" onClick={handlePrevious}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            viewBox="0 96 960 960"
            width="20"
          >
            <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
          </svg>
        </div>
        <div className="right" onClick={handleNext}>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            viewBox="0 96 960 960"
            width="20"
          >
            <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
          </svg>
        </div>
      </div>
      <div className="indicator">
        {images.map((_, index) => (
          <div
            key={index}
            className={`dot ${currentIndex === index ? "active" : ""}`}
            onClick={() => handleDotClick(index)}
          ></div>
        ))}
      </div>
    </div>
  );

Como pueden ver en esta plantilla, se muestra la imagen del índice actual. Luego, tenemos un div con la clase slider_direction que contiene otros dos divs con las clases left y right. Ambos serán los botones de navegación del carrusel y usan SVGs para mostrar los iconos de flechas. Sus funciones onClick están parametrizados con las funciones handlePrevious y handleNext, respectivamente.

También tenemos un div indicator que creamos para mostrar una serie de círculos que representan cada imagen del carrusel. La función recorre el arreglo de imágenes y crea un círculo para cada imagen. De esta forma, se parametriza la clase active para cada círculo al que le corresponda currentIndex.

Después agregamos un onClick para cada círculo que está parametrizado para hacer correr handleDotClick con el índice del círculo.

Por ahora, con esto ya armamos nuestra plantilla. Lo único que falta es exportar el componente Carousel, importarlo en el componente App.js y luego agregar algo de CSS. Luego de esto estaremos listos para empezar a animar.

Por eso, vamos a exportar nuestra función Carousel para nuestro componente Carousel.js.

export default Carousel;

Como usar el component Carousel

Ya hemos creado nuestro componente Carousel, pero para poder usarlo tenemos que importarlo dentro de nuestro componente Apps.js:

import Carousel from "./Carousel";

Después de hacer esto, ya podemos crear nuestro arreglo de imágenes en el que van a estar todos los enlaces a las imágenes:

const images = [
  "https://images.pexels.com/photos/169647/pexels-photo-169647.jpeg?auto=compress&cs=tinysrgb&w=600",
  "https://images.pexels.com/photos/313782/pexels-photo-313782.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/773471/pexels-photo-773471.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/672532/pexels-photo-672532.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/632522/pexels-photo-632522.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
  "https://images.pexels.com/photos/777059/pexels-photo-777059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
];

Todas estas son imágenes que obtuve de pexels y las que vamos a usar en este  proyecto.

Luego, agregamos nuestra función App que es donde va a estar la plantilla de nuestra aplicación:

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Carrusel de imagenes usando React y Framer Motion</h1>
      </header>
      <main>
        <Carousel images={images} />
      </main>
    </div>
  );
}
export default App;

Como puedes ver, en nuestro encabezado tenemos una descripción de lo que hace nuestra aplicación.

Luego, en la sección main está nuestro componente, Carousel que lleva una prop del arreglo de imágenes. Si recuerdas, esta es la prop que usamos en ese componente para mostrar la imágenes.

Por último, exportamos nuestro componente App así lo podemos usar en nuestro archivo index.js.

Para verla sin estilos, ejecuta el comando npm run start y la aplicación debería verse así:

Horrible ¿verdad? Estoy de acuerdo contigo, pero con algunas pocas líneas de CSS vamos a transformarlo. Así que vamos.

Cómo agregar CSS

Como no quiero crear una hoja de estilo separada para el componente Carousel, voy a hacer todo el CSS en el archivo App.css. No te olvides de luego importar tu hoja de estilo.

import "./App.css"

Este es nuestro CSS:

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap");
.App-header {
  font-size: 1rem;
  text-align: center;
  font-family: "Oswald", sans-serif;
  padding-bottom: 2rem;
}
.carousel-images {
  position: relative;
  border-radius: 10px;
  height: 400px;
  max-width: 650px;
  margin: auto;
  overflow: hidden;
}
.carousel-images img {
  width: 99%;
  height: 99%;
  border-radius: 8px;
  border: #ff00008e solid 2px;
}
.slide_direction {
  display: flex;
  justify-content: space-between;
}
.left,
.right {
  background-color: #fb666675;
  color: #fff;
  padding: 10px 8px 8px 13px;
  margin: 0 20px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 10px;
  height: 25px;
  width: 25px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.carousel-indicator {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.dot {
  background-color: #333;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.active {
  background-color: #fa2020;
}

Y este el resultado con nuestro CSS aplicado:

Seguramente coincidirás conmigo que así luce mucho mejor, además de ya ser completamente funcional.

Pasemos ahora a agregar animación con Framer Motion así le agregamos un lindo efecto de deslizador.

Cómo agregar animación al componente Carousel

Antes de empezar a animar con Framer Motion, hay algunos conceptos con los que deberás estar familiarizado porque los vamos a usar bastante dentro de esta sección. Estos conceptos incluyen:

• Variants son un grupo de propiedades cuyo propósito es definir cómo un elemento debería aparecer o animarse. Es posible crear distintos variants que representen diferentes estados visuales o animaciones para un elemento, como por ejemplo open, closed, hover y del estilo
• Initial es el estado que tu objeto tendrá antes de que la animación empiece.
• Animate es el estado animado de tu objeto. Es tan simple como eso.

Volviendo al proyecto, añadiremos nuestras animaciones al componente Carousel. Ya hemos importado las dos propiedades que vamos a necesitar – motion y AnimatePresence.

Voy a dividir esta sección en tres partes porque la animación la añadiremos a las tres partes de nuestro código: la imagen, la dirección del deslizador y el círculo que se usa como indicador.

Animación de la imagen

Para animar la entrada y salida de una imagen, necesitamos envolver nuestro elemento img con un componente AnimationPresence. Esto nos permite agregar animación cuando una imagen entra o sale. Luego añadimos un motion. a nuestra etiqueta:

 <AnimatePresence>
  <motion.img key={currentIndex} src={images[currentIndex]} />
</AnimatePresence>;

Luego nos posicionamos fuera de nuestra plantilla y declaramos nuestras variants:

  const slideVariants = {
    hiddenRight: {
      x: "100%",
      opacity: 0,
    },
    hiddenLeft: {
      x: "-100%",
      opacity: 0,
    },
    visible: {
      x: "0",
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.8,
      transition: {
        duration: 0.5,
      },
    },
  };

Como puedes ver, los sliderVariants tienen cuatro propiedades:

• hiddenRight: esto parametriza la opacidad de la imagen en 0 y la ubica del lado derecho del contenedor.
• hiddenLeft: hace lo mismo que hiddenRight pero la ubica del lado izquierdo.
• visible: esta es la propiedad que dispara la animación desde donde esté la imagen al centro del contenedor.
• exit: esta propiedad controla la salida de una imagen de la pantalla al mismo tiempo que otra imagen entra.

Ahora que ya declaramos nuestros variants, ¿cómo podemos prever desde dónde la imagen va a entrar? Para esto necesitamos parametrizar un estado de dirección y que ese estado se actualice de acuerdo con cuál de los slide_direction hizo clic el usuario.

const [direction, setDirection] = useState('left');

Entonces, vamos a establecer que la imagen entre desde la izquierda. Es lo lógico dado que la primera imagen que se mostrará es la primera de la lista. Luego, en nuestra función helper, vamos a establecer la dirección de acuerdo con la dirección clikeada:

  const handleNext = () => {
    setDirection("right");
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setDirection("left");

    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const handleDotClick = (index) => {
    setDirection(index > currentIndex ? "right" : "left");
    setCurrentIndex(index);
  };

Quizás hayas notado que no solo parametrizamos el estado para  handleNext y handlePrevious. También lo hicimos para handleDotClick. Así cuando se clickea un círculo anterior o siguiente, la dirección se actualizará correctamente.

Pero recuerda: la función de direction es la de establecer el estado inicial de la imagen para que el deslizador funcione correctamente.

Ya parametrizado direction, vamos a usar nuestros variants con nuestro elemento img:

<AnimatePresence>
          <motion.img
            key={currentIndex}
            src={images[currentIndex]}
            variants={slideVariants}
            initial={direction === "right" ? "hiddenRight" : "hiddenLeft"}
            animate="visible"
            exit="exit"
          />
        </AnimatePresence>

Agregamos la prop variants y la parametrizamos igual que a los slideVariants que creamos. Luego, agregamos la prop initial, con la misma sintaxis que un operador ternario. Esto establece que el estado inicial de la imagen sea hiddenRight o hiddenLeft cuando el usuario hace clic en el círculo indicador de la imagen o en el slider_direction.

Después de esto, agregamos la propiedad animate que se encarga de animar la imagen desde su posición inicial hasta la posición establecida en la propiedad visible.

Por último, agregamos nuestra propiedad exit y la establecemos en exit. Esto va a animar la imagen para que salga de la nueva pantalla cuando entra una nueva.

Hay muchas props que puede usar con Framer Motion. Puedes leer la documentación [en inglés] para aprender más sobre ellas.

Ya con esto, nuestra carrusel de imágenes debería funcionar correctamente.

Animación del deslizador y de los círculos indicadores de la imagen

Podríamos detenernos aquí, pero quiero agregar un poco de animación a las direcciones del deslizador y a los los círculos indicadores de la imagen.

  const slidersVariants = {
    hover: {
      scale: 1.2,
      backgroundColor: "#ff00008e",
    },
  }; 
const dotsVariants = {
    initial: {
      y: 0,
    },
    animate: {
      y: -10,
      scale: 1.3,
      transition: { type: "spring", stiffness: 1000, damping: "10" },
    },
    hover: {
      scale: 1.1,
      transition: { duration: 0.2 },
    },
  };

Empezamos creando nuestros variants. Para los slidersVariants, una propiedad hover. Para los dotsVariants tenemos tres propiedades: initial, animate y hover.

Así como lo hicimos como en el elemento img, para poder usar Framer Motion vamos a agregar motion. como prefijo al nombre del elemento.

<div className="slide_direction">
  <motion.div
    variants={slidersVariants}
    whileHover="hover"
    className="left"
    onClick={handlePrevious}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      viewBox="0 96 960 960"
      width="20"
    >
      <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
    </svg>
  </motion.div>
  <motion.div
    variants={slidersVariants}
    whileHover="hover"
    className="right"
    onClick={handleNext}
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      height="20"
      viewBox="0 96 960 960"
      width="20"
    >
      <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
    </svg>
  </motion.div>
</div>;

Como pueden ver, hemos añadido nuestros variants y los hemos parametrizados igual a slidersVariants. Luego, usamos una nueva propiedad whileHover y la parametrizamos igual que a la propiedad over que especificamos en nuestro objeto slidersVariants.

<motion.div
  key={index}
  className={`dot ${currentIndex === index ? "active" : ""}`}
  onClick={() => handleDotClick(index)}
  initial="initial"
  animate={currentIndex === index ? "animate" : ""}
  whileHover="hover"
  variants={dotsVariants}
></motion.div>;

Aquí no solo agregamos una propiedad whileHover. También agregamos la propiedad initial y la propiedad animate que anima el círculo de la imagen seleccionada así se destaca.

En nuestro objeto slidersVariants, hemos agregado una transición a la animación que hace que haya un pequeño salto cuando ocurre la transición.

Con todo esto junto, nos queda un carrusel de imágenes prolijo. Aquí el resultado final:

Para referencia, aquí tienes el código completo del componente carrusel:

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [direction, setDirection] = useState(null);

  const slideVariants = {
    hiddenRight: {
      x: "100%",
      opacity: 0,
    },
    hiddenLeft: {
      x: "-100%",
      opacity: 0,
    },
    visible: {
      x: "0",
      opacity: 1,
      transition: {
        duration: 1,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.8,
      transition: {
        duration: 0.5,
      },
    },
  };
  const slidersVariants = {
    hover: {
      scale: 1.2,
      backgroundColor: "#ff00008e",
    },
  };
  const dotsVariants = {
    initial: {
      y: 0,
    },
    animate: {
      y: -10,
      scale: 1.2,
      transition: { type: "spring", stiffness: 1000, damping: "10" },
    },
    hover: {
      scale: 1.1,
      transition: { duration: 0.2 },
    },
  };

  const handleNext = () => {
    setDirection("right");
    setCurrentIndex((prevIndex) =>
      prevIndex + 1 === images.length ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setDirection("left");

    setCurrentIndex((prevIndex) =>
      prevIndex - 1 < 0 ? images.length - 1 : prevIndex - 1
    );
  };

  const handleDotClick = (index) => {
    setDirection(index > currentIndex ? "right" : "left");
    setCurrentIndex(index);
  };

  return (
    <div className="carousel">
        <div className="carousel-images">
        <AnimatePresence>
          <motion.img
            key={currentIndex}
            src={images[currentIndex]}
            initial={direction === "right" ? "hiddenRight" : "hiddenLeft"}
            animate="visible"
            exit="exit"
            variants={slideVariants}
          />
        </AnimatePresence>
        <div className="slide_direction">
          <motion.div
            variants={slidersVariants}
            whileHover="hover"
            className="left"
            onClick={handlePrevious}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="20"
              viewBox="0 96 960 960"
              width="20"
            >
              <path d="M400 976 0 576l400-400 56 57-343 343 343 343-56 57Z" />
            </svg>
          </motion.div>
          <motion.div
            variants={slidersVariants}
            whileHover="hover"
            className="right"
            onClick={handleNext}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              height="20"
              viewBox="0 96 960 960"
              width="20"
            >
              <path d="m304 974-56-57 343-343-343-343 56-57 400 400-400 400Z" />
            </svg>
          </motion.div>
        </div>
      </div>
      <div className="carousel-indicator">
        {images.map((_, index) => (
          <motion.div
            key={index}
            className={`dot ${currentIndex === index ? "active" : ""}`}
            onClick={() => handleDotClick(index)}
            initial="initial"
            animate={currentIndex === index ? "animate" : ""}
            whileHover="hover"
            variants={dotsVariants}
          ></motion.div>
        ))}
      </div>
    </div>
  );
};
export default Carousel;

Dale una mirada al repositorio en GitHub.

Aquí está el sitio en Netlify.

Solo para que estén al tanto, este código tiene algunos problemas de accesibilidad por lo que no debería ser usado en un ambiente de producción.

Recursos

Entiendo que puede haber algunos términos o sintaxis que no estén del todo claro, sobretodo si eres nuevo a React o usando Framer Motion. Por eso, aquí tienes algunos recursos que recomiendo si quieres aprender más:

• Documentación de React
• Framer Motion Documentation [en inglés]
• Framer Motion Course [en inglés]

Conclusión

En este artículo, vimos el proceso de diseñar un carrusel de imágenes responsive e interactivo, combinando React y Framer Motion, una librería de animación.

Al incorporar componentes como motion y AnimationPresence, fuimos paso a paso costruyendo un carrusel visualmente atractivo, que muestra nuestras imagenes y con transiciones impecables y animaciones interesantes para una experiencia de usuario enriquecedora.

La API OpenAI es una potente herramienta que permite a los desarrolladores aprovechar el poder de los algoritmos avanzados de aprendizaje automático para crear aplicaciones inteligentes.

Acabamos de publicar un curso en el canal de YouTube de freeCodeCamp.org que te enseñará a utilizar la API OpenAI con React para crear una potente aplicación capaz de responder preguntas, traducir texto, convertir código de un idioma a otro y mucho más.

Nishant Singh ha desarrollado este curso. Nishant ha creado muchos tutoriales populares basados en texto y vídeo.

El curso está diseñado para desarrolladores con experiencia en React, pero no se requiere experiencia previa con la API OpenAI. El curso comienza introduciendo los conceptos básicos de la API OpenAI, incluyendo cómo configurar su cuenta y autenticarse con la API.

A continuación, aprenderá a utilizar la API OpenAI para responder preguntas, utilizando el modelo GPT-3. Aprenderás cómo enviar solicitudes a la API y recuperar los resultados, y cómo mostrar los resultados en tu aplicación React.

A continuación, aprenderás a utilizar la API OpenAI para traducir texto. Aprenderás a enviar texto a la API y a recuperar el texto traducido. También aprenderás a mostrar el texto traducido en tu aplicación React.

A continuación, aprenderás a utilizar la API OpenAI para convertir código de un idioma a otro. Aprenderás cómo enviar código a la API y recuperar el código convertido, y cómo mostrar el código convertido en tu aplicación React.

Por último, aprenderás a crear una aplicación completa utilizando la API OpenAI y React. Aprenderás a utilizar los conceptos y técnicas que has aprendido a lo largo del curso para crear una aplicación funcional que pueda responder preguntas, traducir texto y convertir código.

Al final de este curso, tendrás una sólida comprensión de cómo utilizar la API OpenAI con React para crear aplicaciones potentes. Podrás utilizar los conocimientos adquiridos para crear tus propias aplicaciones con funcionalidades similares a ChatGPT.

Ve el curso completo en el canal de YouTube de freeCodeCamp.org (1 hora).

Hay muchas formas de recuperar datos de una API externa en React. Pero, ¿cuál debería utilizar para sus aplicaciones en 2021?

En este tutorial, revisaremos cinco de los patrones más utilizados para recuperar datos con React realizando una solicitud HTTP a una API REST.

No solo cubriremos cómo recuperar datos, sino también cómo manejar mejor la carga y el estado de error al recuperar nuestros datos.

¡Empecemos!

Para todos estos ejemplos, usaremos un endpoint del popular JSON Placeholder API, pero puedes usar su propia API que haya creado (como una API de Node con Express) o cualquier otra API pública.

1. Cómo Recuperar Datos en React Usando la API Fetch

La forma más accesible de recuperar datos con React es utilizar la API Fetch.

Fetch API es una herramienta integrada en la mayoría de los navegadores modernos en el objeto window ( window.fetch) y nos permite realizar solicitudes HTTP muy fácilmente utilizando promesas de JavaScript.

Para realizar una solicitud GET simple con fetch solo necesitamos incluir la URL del endpoint al que queremos realizar nuestra solicitud. Queremos realizar esta solicitud una vez que nuestro componente React se haya montado.

Para hacerlo, realizamos nuestra solicitud dentro del hook useEffect y nos aseguramos de proporcionar un arreglo de dependencias vacía como segundo argumento, de modo que nuestra solicitud solo se realice una vez (asumiendo que no depende de ningún otro dato en nuestro componente).

En el primer callback .then(), verificamos si la respuesta fue correcta ( response.ok). Si es así, devolvemos nuestra respuesta para pasar a la siguiente, luego volvemos a llamar como datos JSON, ya que esos son los datos que obtendremos de nuestra API de usuario aleatorio.

Si no es una respuesta correcta, asumimos que hubo un error al realizar la solicitud. Al usar fetch, necesitamos manejar los errores nosotros mismos, por lo que lo arrojamos responsecomo un error para que nuestro callback catch lo maneje.

Aquí, en nuestro ejemplo, colocamos nuestros datos de error en el estado con setError. Si hay un error, devolvemos el texto "¡Error!".

Tenga en cuenta que también puede mostrar un mensaje de error del objeto de error que pusimos en estado usando error.message.

Usamos el callback .finally() como función que se llama cuando nuestra promesa se resolvió exitosamente o no. En él, lo configuramos loadingen falso, para que ya no veamos nuestro texto de carga.

En su lugar, vemos nuestros datos en la página si la solicitud se realizó correctamente o si hubo un error al realizar la solicitud.

2. Cómo Recuperar Datos en React Usando Axios

El segundo enfoque para realizar solicitudes con React es utilizar la librería axios.

En este ejemplo, simplemente revisaremos nuestro ejemplo de Fetch instalando primero axiosusando npm:

npm install axios

Luego lo importaremos en la parte superior de nuestro archivo de componente.

Lo que axios nos permite hacer es usar exactamente la misma sintaxis de promesa que fetch, pero en lugar de usar nuestra devolución de llamada primero y luego para determinar manualmente si la respuesta es correcta y arrojar un error, axios se encarga de eso por nosotros.

Además, nos permite en esa primera devolución de llamada obtener los datos JSON de response.data.

Lo conveniente de usar axios es que tiene una sintaxis mucho más corta que nos permite reducir nuestro código e incluye muchas herramientas y características que Fetch no tiene en su API.

Todas estas razones son las que se han convertido en la librería HTTP de referencia para los desarrolladores de React.

3. Cómo recuperar datos en React Usando la Sintaxis async/await

En ES7, fue posible resolver promesas utilizando la sintaxis async / await.

El beneficio de esto es que nos permite eliminar los callback .then(), .catch()y .finally() simplemente recupera nuestros datos resueltos asincrónicamente como si estuviéramos escribiendo código síncrono sin ninguna promesa.

En otras palabras, no tenemos que depender de devoluciones de llamada cuando usamos async/await con React.

Tenemos que ser conscientes del hecho de que cuando usamos useEffect, la función de efecto (el primer argumento) no puede convertirse en una async función.

Si echamos un vistazo al error de linting que nos da React si estábamos usando Create React App para construir nuestro proyecto, se nos dirá que esta función no puede ser asincrónica para evitar condiciones de carrera.

Como resultado, en lugar de hacer que esa función sea asíncrona, simplemente podemos crear una función asíncrona separada en nuestro componente, a la que podemos llamar sincrónicamente. Es decir, sin la palabra clave await  delante.

En este ejemplo, creamos una función asíncrona llamada getData. Al llamarlo sincrónicamente dentro de useEffect, podemos recuperar nuestros datos como esperábamos.

4. Cómo Recuperar Datos en React Usando un Hook de React Personalizado (useFetch)

Con el tiempo, es posible que te des cuenta de que se vuelve un poco tedioso y lleva mucho tiempo seguir escribiendo el hook useEffect con todo su texto estándar dentro de cada componente en el que desea recuperar datos.

Para reducir nuestro código reutilizado, podemos usar un hook personalizado como una abstracción especial, que podemos escribir nosotros mismos desde una librería de terceros (como estamos aquí, usando la librería react-fetch-hook).

Un hook personalizado que realiza nuestra solicitud HTTP nos permite hacer que nuestros componentes sean mucho más concisos. Todo lo que tenemos que hacer es llamar a nuestro hook en la parte superior de nuestro componente.

En este caso, recuperamos todos los datos, la carga y el estado de error que necesitamos para poder usar la misma estructura para nuestro componente que antes, pero sin tener que hacerlo con useEffect. Además, ya no necesitamos escribir imperativamente cómo resolver nuestra promesa de nuestra solicitud GET cada vez que queremos realizar una solicitud.

5. Cómo Recuperar Datos en React Usando la Librería React Query

El uso de hooks personalizados es una excelente manera de escribir solicitudes HTTP mucho más concisas para obtener nuestros datos y todo su estado relacionado. Pero una librería que realmente lleva la recuperación de datos con hooks al siguiente nivel es React Query.

React Query no solo nos permite usar hooks personalizados que podemos reutilizar en nuestros componentes de manera concisa, sino que también nos brinda una gran cantidad de herramientas de administración de estado para poder controlar cuándo, cómo y con qué frecuencia se obtienen nuestros datos.

En particular, React query nos proporciona un caché, que puede ver a continuación a través de React Query Devtools. Esto nos permite gestionar fácilmente las solicitudes que hemos realizado según el valor clave que especificamos para cada solicitud.

Para las solicitudes siguientes, nuestra consulta de datos de usuario aleatorios se identifica mediante la cadena 'random-user' (proporcionada como primer argumento de useQuery).

Al hacer referencia a esa clave, podemos hacer cosas poderosas como recuperar, validar o restablecer nuestras diversas consultas.

Si confiamos en nuestra solución de hook personalizada o useEffect, recuperaremos nuestros datos cada vez que se monte nuestro componente. En la mayoría de los casos, hacer esto es innecesario. Si nuestro estado externo no ha cambiado, idealmente no deberíamos tener que mostrar el estado de carga cada vez que mostramos nuestro componente.

React Query mejora enormemente nuestra experiencia de usuario al intentar servir nuestros datos desde su caché primero y luego actualizar los datos en segundo plano para mostrar los cambios si el estado de nuestra API ha cambiado.

También nos brinda un arsenal de herramientas poderosas para administrar mejor nuestras solicitudes de acuerdo con cómo cambian nuestros datos a través de nuestra solicitud.

Por ejemplo, si nuestra aplicación nos permitió agregar un usuario diferente, es posible que queramos recuperar esa consulta una vez que se agregó el usuario. Si supiéramos que la consulta se cambia con mucha frecuencia, es posible que deseemos especificar que se actualice aproximadamente cada minuto. O para actualizarse cada vez que el usuario enfoque la pestaña de su ventana.

En resumen, React Query es la solución ideal no solo para realizar solicitudes de manera concisa, sino también para administrar de manera eficiente y efectiva los datos que se devuelven para nuestras solicitudes HTTP en todos los componentes de nuestra aplicación.

¿Quiere conservar esta guía para consultarla en el futuro?

Aquí hay 3 ganancias rápidas que obtienes cuando obtienes la versión descargable:

• Obtendrá toneladas de fragmentos de código copiables para reutilizarlos fácilmente en sus propios proyectos.
• Es una excelente guía de referencia para fortalecer tus habilidades como desarrollador de React y para entrevistas de trabajo.
• Puede llevar, utilizar, imprimir, leer y releer esta guía literalmente donde quiera.

Conviértete en un Desarrollador Profesional de React

React es difícil. No deberías tener que resolverlo tú mismo.

He reunido todo lo que sé sobre React en un solo curso para ayudarte a alcanzar tus objetivos en un tiempo récord:

Presentamos: El Bootcamp de React

Es el único curso que desearía tener cuando comencé a aprender React.

Haga clic a continuación para probar React Bootcamp usted mismo:

Haga clic para comenzar

En este artículo, veremos cómo hacer un menú acordeón en React, completamente desde cero, paso por paso y sin usar librerías externas.

Usaremos la sintaxis de React Hooks para hacer esta aplicación en React. Por lo que si no estás muy familiarizado con React Hooks, puedes dar un vistazo a mi artículo Introducción a React Hooks [en inglés] para aprender los fundamentos de Hooks.

Puedes ver la demo de la aplicación aquí.

Empecemos.

Configuración inicial del proyecto

Crea un nuevo proyecto create-react-app.

npx create-react-app react-accordion-demo

Una vez que el proyecto está creado, borra todos los archivos de la carpeta src y crea los archivos index.js, App.js y styles.css dentro de ella. También crea aquí una nueva carpeta llamada utils.

Abre el archivo styles.css y copia este código en ese archivo.

Cómo crear las primeras páginas

Abre el archivo src/App.js y añade el siguiente código dentro de él:

import React from 'react';

const App = () => {
  const accordionData = {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
  };

  const { title, content } = accordionData;

  return (
    <React.Fragment>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        <div className="accordion-item">
          <div className="accordion-title">
            <div>{title}</div>
            <div>+</div>
          </div>
          <div className="accordion-content">{content}</div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default App;

Aquí usamos las propiedades del objeto accordionData para mostrar el contenido del acordeón.

Para la propiedad content, usamos la sintaxis de la plantilla literal de ES6 (``) así podemos escribir en varias líneas. También usamos un texto lorem ipsum de ejemplo.

Luego, abre el archivo src/index.js y añade el siguiente contenido:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles.css';

ReactDOM.render(<App />, document.getElementById('root'));

Si ejecutas la aplicación usando el comando yarn start desde la terminal, verás la siguiente pantalla:

Cómo abrir y cerrar el menú acordeón

Como has podido ver arriba, pudimos mostrar un única sección como parte del menú acordeón. Por defecto el acordeón está abierta, pero no podemos cerrarlo. Así que vamos a agregar esa funcionalidad para abrirlo y cerrarlo.

Añade un nuevo estado dentro del componente como se muestra a continuación:

const [isActive, setIsActive] = useState(false);

Aquí hemos definido el estado isActive. Con esto, ocultaremos o mostraremos el contenido del acordeón.

También importa el hook useState al comienzo del archivo:

import React, { useState } from 'react';

Luego, para el div con la clase accordion-title, añade el handler onClick de la siguiente manera:

<div className="accordion">
  <div className="accordion-item">
    <div
      className="accordion-title"
      onClick={() => setIsActive(!isActive)}
    >
      <div>{title}</div>
      <div>{isActive ? '-' : '+'}</div>
    </div>
    {isActive && <div className="accordion-content">{content}</div>}
  </div>
</div>

Aquí estamos invirtiendo el valor del estado isActive cuando hacemos clic en el div accordion-title. Si el valor de isActive es false, lo ponemos en true y al revés.

Mostramos el signo + o - de acuerdo con el valor de isActive a través de un operador ternario.

Y si el valor del estado isActive es true entonces sólo vamos a mostrar el contenido del acordeón como en el ejemplo de abajo:

{isActive && <div className="accordion-content">{content}</div>}

Si actualizas la aplicación, verás la siguiente pantalla:

Al hacer clic en el título, el acordeón se abre y podemos volver a hacer clic sobre él para cerrarlo.

Cómo añadir varias secciones a un menú acordeón

Si tenemos varias secciones, copiar y pegar una y otra vez el mismo código JSX no funcionará tan bien como si tenemos un solo una sección.

Entonces, lo que vamos a hacer es crear un componente separado solamente para mostrar el acordeón. Luego, de acuerdo con la cantidad de secciones que tengamos, vamos a usar un bucle para recorrer el componente y así hacer que muestre varias secciones.

Crea un nuevo archivo llamado Accordion.js dentro de la carpeta src y luego añade el siguiente código dentro de este:

import React, { useState } from 'react';

const Accordion = ({ title, content }) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className="accordion-item">
      <div className="accordion-title" onClick={() => setIsActive(!isActive)}>
        <div>{title}</div>
        <div>{isActive ? '-' : '+'}</div>
      </div>
      {isActive && <div className="accordion-content">{content}</div>}
    </div>
  );
};

export default Accordion;

Aquí, lo que hemos hecho es mover el estado y el div accordion-item del archivo App.js al archivo Accordion.js. Luego, pasamos las propiedades dinámicas title y content usando la sintaxis de desestructuración de ES6:

const Accordion = ({ title, content }) => {

Ahora, abrimos el archivo App.js y reemplazamos el código con este:

import React from 'react';
import Accordion from './Accordion';

const App = () => {
  const accordionData = [
    {
      title: 'Section 1',
      content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
      laborum cupiditate possimus labore, hic temporibus velit dicta earum
      suscipit commodi eum enim atque at? Et perspiciatis dolore iure
      voluptatem.`
    },
    {
      title: 'Section 2',
      content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
      reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
      quaerat iure quos dolorum accusantium ducimus in illum vero commodi
      pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
      quidem maiores doloremque est numquam praesentium eos voluptatem amet!
      Repudiandae, mollitia id reprehenderit a ab odit!`
    },
    {
      title: 'Section 3',
      content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
      quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
      dolor ut sequi minus iste? Quas?`
    }
  ];

  return (
    <div>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        {accordionData.map(({ title, content }) => (
          <Accordion title={title} content={content} />
        ))}
      </div>
    </div>
  );
};

export default App;

Lo que hicimos fue convertir el objeto accordionData en un arreglo de objetos. Luego, lo recorremos con un bucle usando el método map, además de pasarle las propiedades title y content al componente Accordion.

Si actualizas la aplicación, verás que se muestran las tres secciones y que podemos abrir y cerrar cada una de ellas:

Cómo refactorizar el código

Como has visto, con solo mover la sección del acordeón a un componente separado y pasar el contenido dinámico mediante props, pudimos crear un acordeón desde cero y que funciona.

Como es una buena práctica dejar la información estática en un archivo separado, vamos a mover el arreglo accordionData a un archivo distinto y luego importarlos desde App.js

Crea un nuevo archivo llamado content.js dentro de la carpeta utils y copia el siguiente código dentro de este:

export const accordionData = [
  {
    title: 'Section 1',
    content: `Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis sapiente
    laborum cupiditate possimus labore, hic temporibus velit dicta earum
    suscipit commodi eum enim atque at? Et perspiciatis dolore iure
    voluptatem.`
  },
  {
    title: 'Section 2',
    content: `Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia veniam
    reprehenderit nam assumenda voluptatem ut. Ipsum eius dicta, officiis
    quaerat iure quos dolorum accusantium ducimus in illum vero commodi
    pariatur? Impedit autem esse nostrum quasi, fugiat a aut error cumque
    quidem maiores doloremque est numquam praesentium eos voluptatem amet!
    Repudiandae, mollitia id reprehenderit a ab odit!`
  },
  {
    title: 'Section 3',
    content: `Sapiente expedita hic obcaecati, laboriosam similique omnis architecto ducimus magnam accusantium corrupti
    quam sint dolore pariatur perspiciatis, necessitatibus rem vel dignissimos
    dolor ut sequi minus iste? Quas?`
  }
];

Ahora, abre App.js y reemplaza el código de ese archivo con este:

import React from 'react';
import Accordion from './Accordion';
import { accordionData } from './utils/content';

const App = () => {
  return (
    <div>
      <h1>React Accordion Demo</h1>
      <div className="accordion">
        {accordionData.map(({ title, content }) => (
          <Accordion title={title} content={content} />
        ))}
      </div>
    </div>
  );
};

export default App;

Con esto hemos importado la información estática desde un archivo externo y luego lo borramos del archivo App.js.

Entonces ahora el código se ve prolijo y fácil de leer, además de que continúa funcionando:

Cierre

Con esto, hemos terminado de hacer nuestra app.

Puedes encontrar el código completo de esta aplicación en este repositorio de GitHub.

¡Gracias por leer!

Si quieres aprender en detalle todo lo nuevo de ES6+, incluyendo let y const, promesas, distintos métodos de promesas, desestructuración de objetos y arreglos, funciones flecha, async/await, importar y exportar, y mucho más desde cero, dale un vistazo a mi libro Mastering Modern JavaScript. Este libro cubre todo lo necesario para aprender React y ayudarte a mejorar tanto en JavaScript como en React.

Acabamos de publicar un curso de 5 horas en el canal de YouTube en español de freeCodeCamp.org que te enseñará React paso a paso. Comenzarás instalando y configurando React con create-react-app y Vite y gradualmente aprenderás temas más avanzados, incluyendo componentes, JSX, enlaces, eventos, formularios y más.

Carpi Coder creó este curso. Carpi desarrollador web y ha aprendido de muchas comunidades, incluyendo freeCodeCamp. En 2020, creó su canal de YouTube para compartir sus conocimientos y ahora comparte su curso completo con la comunidad freeCodeCamp.

Antes de ver el contenido del curso en más detalle, veamos qué es React y por qué deberías aprenderlo...

React for Beginners

React es una de las bibliotecas de desarrollo web front-end más populares en la comunidad de desarrollo web. Puedes verlo en los resultados de la Stack Overflow Developer Survey 2023.

Al responder a esta pregunta:

¿Con qué frameworks y tecnologías web has realizado un trabajo de desarrollo extenso durante el año pasado y con cuáles deseas trabajar durante el próximo año?

El 40,58% de ellos escogió React.

React y Node.js fueron las tecnologías web más utilizadas por todos los encuestados.

Las ventajas clave de React incluyen:

• Arquitectura basada en componentes. Las aplicaciones de React se crean dividiendo interfaces de usuario complejas en componentes más pequeños, simples e independientes.
• DOM virtual. React utiliza una representación virtual del DOM real de la aplicación web para realizar actualizaciones. Con este DOM virtual, React puede actualizar de manera eficiente solo las partes de la interfaz de usuario que deben actualizarse.
• Sintaxis JSX. Con JSX, puedes definir la estructura de los componentes de React con una sintaxis muy similar a HTML combinado con JavaScript.

React también tiene una comunidad muy grande y activa de desarrolladores y bibliotecas para muchos propósitos diferentes. Es muy útil para crear aplicaciones web fáciles de mantener y fáciles de usar.

💡 Dato: El logo oficial de React es un átomo. 👇

Curso de React en Español

Genial. Ahora que ya sabes más sobre React, veamos lo que aprenderás durante el curso:

• Cómo instalar React con create-react-app y con Vite.
• JSX
• Componentes
• Props
• Hooks
• Ciclo de vida de los componentes
• Promesas
• Eventos
• Formularios
• Y más...

💡 Dato: este curso es ideal para principiantes. Si estás dando tus primeros pasos en React, Carpi Coder te guiará paso a paso.

También aprenderás técnicas más avanzadas, como:

• Obtener y mostrar datos de una API.
• Integrar su aplicación React con una base de datos de Firebase.
• Hacer el deploy de tu aplicación React en Netlify, una plataforma en la nube que te permite implementar y administrar aplicaciones web y sitios web.

💡 Dato: Durante el curso, crearás la base de datos de Firebase paso a paso, así que puedes tomar el curso incluso si no tienes conocimientos previos de Firebase.

Te invitamos a ver el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Carpi Coder.

• YouTube: @carpicoder
• Instagram: carpicoder
• TikTok: @carpicoder
• Sitio Web: https://carpicoder.com/
• X: @carpicoder
• GitHub: carpicoder
• LinkedIn: linkedin.com/in/matiascoletta

Entrada (Input del usuario) --> Procesamiento --> Salida (Presentación de resultados).

Veamos como realizamos esta tarea en ReactJS, partiendo de la forma básica, para ello vamos a crear un componente llamado Formulario el cual va a permitirle al usuario indicar sus datos y luego estos serán enviados a una API para ser procesados y guardados.

Recordemos que con ReactJS implementamos SPAs (Single Page Applications), por lo tanto, la gestión del formulario va a variar un poco con relación a un form tradicional de HTML.

Formulario como componente con useState

Para este componente formulario, nos vamos a apoyar en el hook useState, de forma tal que podamos capturar los valores introducidos por el usuario, toda vez que haga algún cambio en él alguna de las entradas disponibles. El código de ese componente será el siguiente:

import React, { useState } from 'react';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

const Formulario = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    name: '',
    country: '',
    phone: '',
    photo: null
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePhotoChange = (e) => {
    setFormData({ ...formData, photo: e.target.files[0] });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form data submitted:', formData);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <h2>Datos de Acceso</h2>
        <div>
          <label>Email:</label>
          <input type="email" name="email" value={formData.email} onChange={handleChange} required />
        </div>
        <div>
          <label>Clave:</label>
          <input type="password" name="password" value={formData.password} onChange={handleChange} required />
        </div>
        <div>
          <label>Confirmar Clave:</label>
          <input type="password" name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} required />
        </div>
        <h2>Datos Personales</h2>
        <div>
          <label>Nombre:</label>
          <input type="text" name="name" value={formData.name} onChange={handleChange} required />
        </div>
        <div>
          <label>País:</label>
          <select name="country" value={formData.country} onChange={handleChange} required>
            <option value="">Seleccione un país</option>
            {countries.map(country => (
              <option key={country} value={country}>{country}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Teléfono:</label>
          <input type="tel" name="phone" value={formData.phone} onChange={handleChange} required />
        </div>
        <div>
          <label>Foto:</label>
          <input type="file" name="photo" accept="image/*" onChange={handlePhotoChange} required />
        </div>
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
};

export default Formulario;

El componente tiene 3 funciones, las cuales explicamos:

• handleChange, encargada de capturar el evento onChange de las cajas y listas del formulario, con ello actualizamos el estado definido al inicio que contendrá los valores indicados por el usuario.
• handlePhotoChange, la cual nos ayudará a capturar la información de la foto solicitada en el formulario, siendo que el tipo de input file se maneja de forma diferente, por ello es importante separar esta funcionalidad.
• handleSubmit, en esta función implementaremos lo necesario para enviar los datos a la capa de backend.

Enviando la foto en formato base64

Es común que el envío de archivos implique realizar algunos procesos adicionales, por ejemplo, tomar el contenido y codificarlo en base64 para transformarlo en un string y así poderlo enviar de forma más fácil a la capa de backend, para ello agregamos una función responsable de esa tarea en el código:

const toBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });

Observa, que por ser una operación que implica tiempo no determinado, JavaScript la maneja como una promesa, es decir, cuando finalice la conversión, nos va a llamar y nos dará el resultado.

Además de hacer esa transformación, es importante que enviemos los datos de nombre original de archivo, su tamaño y su tipo de contenido, ya que en la capa de backend esos datos serán necesarios, para ello mejoramos la función handlePhotoChange, dejándola de esta forma:

  const handlePhotoChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      setFormData({
        ...formData,
        photo: file,
        photoName: file.name,
        photoType: file.type,
        photoSize: file.size
      });
    }
  };

Ahora con este proceso podemos mejorar nuestra función handleSubmit incorporando la conversión de la foto y el envío de los datos a la capa de backend.

const handleSubmit = async (e) => {
    e.preventDefault();

    // Convertir la foto a base64
    let base64Photo = '';
    if (formData.photo) {
      base64Photo = await toBase64(formData.photo);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      name: formData.name,
      country: formData.country,
      phone: formData.phone,
      photo: {
        base64: base64Photo,
        name: formData.photoName,
        type: formData.photoType,
        size: formData.photoSize
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

Recuerda, React trabaja como SPA, por lo tanto, el envío de datos es asíncrono, es por ello que lo primero que realizamos en la función de submit es evitar que el navegador nos haga un envío de datos o POST con la línea: e.preventDefault();

Trabajando con TypeScript

El código anteriormente implementado es totalmente váildo cuando trabajamos en JavaScript, solo que actualmente, ha tenido un gran auge, el uso del SuperJavascript, o mejor conocido como TypeScript.

Vamos a convertir nuestro componente a lenguaje typescript, para ello vamos a definir los tipos de datos correctamente, vamos a cambiar la extensión del componente para Formulario.tsx y con ello vamos a aprovechar las bondades que TypeScript, nos da, la principal para mí, poder determinar errores en tiempo de compilación.

El código del componente ahora quedará:

import React, { useState, ChangeEvent, FormEvent } from 'react';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  country: string;
  phone: string;
  photo: File | null;
  photoName: string;
  photoType: string;
  photoSize: number | string;
}

const Formulario: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: '',
    confirmPassword: '',
    name: '',
    country: '',
    phone: '',
    photo: null,
    photoName: '',
    photoType: '',
    photoSize: ''
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePhotoChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files ? e.target.files[0] : null;
    if (file) {
      setFormData({
        ...formData,
        photo: file,
        photoName: file.name,
        photoType: file.type,
        photoSize: file.size
      });
    }
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    // Convertir la foto a base64
    let base64Photo = '';
    if (formData.photo) {
      base64Photo = await toBase64(formData.photo);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      name: formData.name,
      country: formData.country,
      phone: formData.phone,
      photo: {
        base64: base64Photo,
        name: formData.photoName,
        type: formData.photoType,
        size: formData.photoSize
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const toBase64 = (file: File) => new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <h2>Datos de Acceso</h2>
        <div>
          <label>Email:</label>
          <input type="email" name="email" value={formData.email} onChange={handleChange} required />
        </div>
        <div>
          <label>Clave:</label>
          <input type="password" name="password" value={formData.password} onChange={handleChange} required />
        </div>
        <div>
          <label>Confirmar Clave:</label>
          <input type="password" name="confirmPassword" value={formData.confirmPassword} onChange={handleChange} required />
        </div>
        <h2>Datos Personales</h2>
        <div>
          <label>Nombre:</label>
          <input type="text" name="name" value={formData.name} onChange={handleChange} required />
        </div>
        <div>
          <label>País:</label>
          <select name="country" value={formData.country} onChange={handleChange} required>
            <option value="">Seleccione un país</option>
            {countries.map(country => (
              <option key={country} value={country}>{country}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Teléfono:</label>
          <input type="tel" name="phone" value={formData.phone} onChange={handleChange} required />
        </div>
        <div>
          <label>Foto:</label>
          <input type="file" name="photo" accept="image/*" onChange={handlePhotoChange} required />
        </div>
        <button type="submit">Enviar</button>
      </form>
    </div>
  );
};

export default Formulario;

Observa que aparecen los tipos de datos de cada propiedad, de casda evento e incluso del componente React, algo que es fundamental para la mantenibilidad y legibilidad del código.

Luego nuestro código podrá ser incoporado en proyectos que usen TypeScript como base, lo cual está sucediendo con más frecuencia cada día.

Mejorando la visual del formulario

Hasta ahora nuestro código apenas tiene HTML y no usa nada de las bondades de CSS, por lo tanto, será funcional, pero no será agradable a la vista. Para ello vamos a incorporarle estilos del framework para CSS tailwind, específicamente del plugin daisyui.

Para instalar Tailwind en una aplicación react con vite, puedes seguir estas instrucciones:

How to Setup React and Tailwind CSS with Vite in a Project

Tailwind CSS is a popular CSS framework, and React is one of the most popularJavaScript libraries. And Tailwind CSS and React are a great combo to use if you’re building afrontend project. In this article, you will learn how to setup your coding environment with Vite,install React and Tailwind …

freeCodeCamp.orgSegun Ajibola

Luego de instalado Tailwind, debemos instalar daisyui, esto lo logramos con las siguientes instrucciones:

npm install daisyui

Incluso es posible usar un paquete que ya genera los componentes para react, llamado react-daisyui (no lo usamos aquí, pero es interesante conocerlo), el cual podemos instalar con el siguiente comando:

npm install react-daisyui

Ahora corresponde realizar el ajuste en nuestro componente, de forma que podamos aprovechar la visual de daisyui, quedando nuestro componente como sigue:

import React, { useState, ChangeEvent, FormEvent } from 'react';
import 'daisyui/dist/full.css';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  country: string;
  phone: string;
  photo: File 
  photoName: string;
  photoType: string;
  photoSize: number | string;
}

const Formulario: React.FC = () => {
  const [formData, setFormData] = useState<FormData>({
    email: '',
    password: '',
    confirmPassword: '',
    name: '',
    country: '',
    phone: '',
    photo: null,
    photoName: '',
    photoType: '',
    photoSize: ''
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handlePhotoChange = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files ? e.target.files[0] : null;
    if (file) {
      setFormData({
        ...formData,
        photo: file,
        photoName: file.name,
        photoType: file.type,
        photoSize: file.size
      });
    }
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();

    // Convertir la foto a base64
    let base64Photo = '';
    if (formData.photo) {
      base64Photo = await toBase64(formData.photo);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: formData.email,
      password: formData.password,
      confirmPassword: formData.confirmPassword,
      name: formData.name,
      country: formData.country,
      phone: formData.phone,
      photo: {
        base64: base64Photo,
        name: formData.photoName,
        type: formData.photoType,
        size: formData.photoSize
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const toBase64 = (file: File) => new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

  return (
    <div className="App container mx-auto p-4">
      <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow-md w-full max-w-lg mx-auto">
        <h2 className="text-2xl font-bold mb-4">Datos de Acceso</h2>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Email:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
            className="input input-bordered w-full"
          />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Clave:</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            required
            className="input input-bordered w-full"
          />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Confirmar Clave:</label>
          <input
            type="password"
            name="confirmPassword"
            value={formData.confirmPassword}
            onChange={handleChange}
            required
            className="input input-bordered w-full"
          />
        </div>
        <h2 className="text-2xl font-bold mb-4">Datos Personales</h2>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Nombre:</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            className="input input-bordered w-full"
          />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">País:</label>
          <select
            name="country"
            value={formData.country}
            onChange={handleChange}
            required
            className="select select-bordered w-full"
          >
            <option value="">Seleccione un país</option>
            {countries.map(country => (
              <option key={country} value={country}>{country}</option>
            ))}
          </select>
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Teléfono:</label>
          <input
            type="tel"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            required
            className="input input-bordered w-full"
          />
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Foto:</label>
          <input
            type="file"
            name="photo"
            accept="image/*"
            onChange={handlePhotoChange}
            required
            className="file-input file-input-bordered w-full"
          />
        </div>
        <button type="submit" className="btn btn-primary w-full">Enviar</button>
      </form>
    </div>
  );
};

export default Formulario;

Observa que el código anterior ahora:

1. Importa DaisyUI CSS: import 'daisyui/dist/full.css'; asegurando que DaisyUI está incluido.
2. Uso de Clases de DaisyUI: Se aplicaron clases de DaisyUI como input input-bordered, select select-bordered, y btn btn-primary para estilizar los componentes del formulario.
3. Estructura del Formulario: La estructura del formulario incluye contenedores como div y form con clases de TailwindCSS y DaisyUI para un diseño limpio y responsive.

Con ello logramos una apariencia mucho más linda y agradable.

Puedes observar en el siguiente video, lo que hemos realizado y lo que explicaremos más adelante, con lo cual vas a reforzar los conocimientos.

Incorporando a react-hook-form

En el código anterior, la gestión de los valores la hicimos, usando a useState, no tenemos gestión de errores y tampoco tenemos validaciones. Podemos realizar esto de forma manual, sí, pero si nos aprovechamos de un paquete que ya realiza esto, y que además es altamente usado por la comunidad, es decir, está probado y es código que los desarrolladores ya conocemos, ¿mejor aún cierto?

Para instalar a react-hook-form, solo debemos hacer lo siguiente:

npm install react-hook-form

Luego incorporamos los hooks del paquete de esta forma:

const { register, handleSubmit, watch, formState: { errors } } = useForm<FormData>();
const photoFile = watch('photo');

• register, nos permite indicarle al hook qué campos del formulario vamos a utilizar.
• handleSubmit, es la función propia de react-hook-form que va a manejar los valores de los campos (esto antes lo haciamos nosotros manualmente), y luego podemos indicar un callback para llamar nuestro backend.
• watch, nos permite colocar una referencia para saber en todo momento el valor de un campo, en nuestro caso observamos la foto porque debemos convertirla a base64.
• formState, nos indica en que estado está el formulario, por enviar, enviando o enviado y nos permite obtener los errores que se produjeron al momento de validar los campos (sí! Validaciones 😃)

Y que tal agregar algunas validaciones, como por ejemplo que la contraseña sea a la confirmación, y que la contraseña además tenga 8 caracteres, un número y un carácter especial. Queremos adicionalmente que la foto venga en formato png o jpg. Todo esto es posible haciendo uso de react-hook-form.

Veamos algunos de los ajustes que debemos realizar para que nuestro formulario sea fácilmente administrable con react-hook-form:

<input
            type="email"
            {...register('email', { required: "Email es requerido" })}
            className="input input-bordered w-full"
          />
          {errors.email && <span className="text-red-500 text-sm">{errors.email.message}</span>}

Observa que agregamos el uso de register y colocamos una validación, que sea obligatorio el valor, luego si hay error lo mostramos en pantalla.

Ahora veamos un caso más complejo, la contraseña:

<input
            type="password"
            {...register('password', {
              required: "Clave es requerida",
              minLength: { value: 8, message: "La clave debe tener al menos 8 caracteres" },
              pattern: {
                value: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
                message: "La clave debe contener al menos un número y un caracter especial"
              }
            })}
            className="input input-bordered w-full"
          />
          {errors.password && <span className="text-red-500 text-sm">{errors.password.message}</span>}

Se puede identificar que cuando usamos el register, podemos indicar si es obligatorio (required), el mensaje de error (message) y el tamaño del valor mínimo aceptable (minLength) y el patrón (pattern) del valor para obligar colocar un número y un carácter especial.

Con solo eso ya hemos hecho validaciones complejas de ese campo.

Veamos como queda el componente luego de todos los cambios realizados:

import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';
import 'daisyui/dist/full.css';

const countries = [
  "Argentina", "Bolivia", "Brasil", "Chile", "Colombia",
  "Ecuador", "Guyana", "Paraguay", "Perú", "Surinam",
  "Uruguay", "Venezuela"
];

interface FormData {
  email: string;
  password: string;
  confirmPassword: string;
  name: string;
  country: string;
  phone: string;
  photo: FileList;
}

const Formulario: React.FC = () => {
  const { register, handleSubmit, watch, formState: { errors } } = useForm<FormData>();
  const password = watch('password');
  const photoFile = watch('photo');

  const onSubmit: SubmitHandler<FormData> = async (data) => {
    // Convertir la foto a base64
    let base64Photo = '';
    const file = data.photo[0];
    if (file) {
      base64Photo = await toBase64(file);
    }

    // Crear el objeto con los datos del formulario
    const dataToSend = {
      email: data.email,
      password: data.password,
      confirmPassword: data.confirmPassword,
      name: data.name,
      country: data.country,
      phone: data.phone,
      photo: {
        base64: base64Photo,
        name: file.name,
        type: file.type,
        size: file.size
      }
    };

    // Enviar la solicitud POST a la API
    try {
      const response = await fetch('https://leonardojose.dev/api/usuarios', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(dataToSend)
      });

      if (!response.ok) {
        throw new Error('Error en la solicitud');
      }

      const result = await response.json();
      console.log('Form data submitted:', result);
    } catch (error) {
      console.error('Error:', error);
    }
  };

  const toBase64 = (file: File) => new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });

  return (
    <div className="App container mx-auto p-4">
      <form onSubmit={handleSubmit(onSubmit)} className="bg-white p-6 rounded shadow-md w-full max-w-lg mx-auto">
        <h2 className="text-2xl font-bold mb-4">Datos de Acceso</h2>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Email:</label>
          <input
            type="email"
            {...register('email', { required: "Email es requerido" })}
            className="input input-bordered w-full"
          />
          {errors.email && <span className="text-red-500 text-sm">{errors.email.message}</span>}
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Clave:</label>
          <input
            type="password"
            {...register('password', {
              required: "Clave es requerida",
              minLength: { value: 8, message: "La clave debe tener al menos 8 caracteres" },
              pattern: {
                value: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
                message: "La clave debe contener al menos un número y un caracter especial"
              }
            })}
            className="input input-bordered w-full"
          />
          {errors.password && <span className="text-red-500 text-sm">{errors.password.message}</span>}
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Confirmar Clave:</label>
          <input
            type="password"
            {...register('confirmPassword', {
              required: "Confirmar clave es requerido",
              validate: value => value === password || "Las claves no coinciden"
            })}
            className="input input-bordered w-full"
          />
          {errors.confirmPassword && <span className="text-red-500 text-sm">{errors.confirmPassword.message}</span>}
        </div>
        <h2 className="text-2xl font-bold mb-4">Datos Personales</h2>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Nombre:</label>
          <input
            type="text"
            {...register('name', { required: "Nombre es requerido" })}
            className="input input-bordered w-full"
          />
          {errors.name && <span className="text-red-500 text-sm">{errors.name.message}</span>}
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">País:</label>
          <select
            {...register('country', { required: "País es requerido" })}
            className="select select-bordered w-full"
          >
            <option value="">Seleccione un país</option>
            {countries.map(country => (
              <option key={country} value={country}>{country}</option>
            ))}
          </select>
          {errors.country && <span className="text-red-500 text-sm">{errors.country.message}</span>}
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Teléfono:</label>
          <input
            type="tel"
            {...register('phone', {
              required: "Teléfono es requerido",
              pattern: {
                value: /^[0-9()-]+$/,
                message: "Solo se permiten números, paréntesis y guiones"
              }
            })}
            className="input input-bordered w-full"
          />
          {errors.phone && <span className="text-red-500 text-sm">{errors.phone.message}</span>}
        </div>
        <div className="mb-4">
          <label className="block text-sm font-medium mb-1">Foto:</label>
          <input
            type="file"
            {...register('photo', {
              required: "Foto es requerida",
              validate: {
                acceptedFormats: files => files[0] && ['image/jpeg', 'image/png'].includes(files[0]?.type) || "Solo se permiten fotos en formato PNG o JPG"
              }
            })}
            accept="image/*"
            className="file-input file-input-bordered w-full"
          />
          {errors.photo && <span className="text-red-500 text-sm">{errors.photo.message}</span>}
        </div>
        <button type="submit" className="btn btn-primary w-full">Enviar</button>
      </form>
    </div>
  );
};

export default Formulario;

En el código anterior hemos realizado lo siguiente:

1. Validación del Email: required: "Email es requerido".
2. Validación de la Clave:

• Mínimo 8 caracteres.
• Al menos un número y un carácter especial.

3. Validación de Confirmar Clave: Verificamos que coincida con la clave.

4. Validación del País: Obligatorio.

5. Validación del Teléfono: Obligatorio y solo números

6. Validación de la Foto:

• Obligatorio.
• Formatos permitidos: PNG o JPG.

En el video indicado anteriormente vas a poder visualizar en detalle cada paso realizado y podrás ver como evolucionamos en el uso de formulario en la aplicación que tomamos de ejemplo.

Para cualquier duda o comentario, me puedes enviar un mensaje en mis redes:

• YouTube: @LeonardoCastillo79
• LinkedIn: Leonardo José Castillo Lacruz
• Twitter: @ljcl79
• GitHub: @ljcl79

A medida que te vuelves más proficiente programando en React, el rendimiento se convertirá en un punto focal importante en tu proceso de desarrollo.

Como con cualquier herramienta o metodología de programación, el caché juega un rol enorme cuando se trata de optimizar aplicaciones de React.

Caché en React típicamente va por el término de memoización. Se usa para mejorar el rendimiento al reducir la cantidad de veces que un componente se renderiza debido al estado o a las mutaciones del prop.

React provee dos APIs para la caché: useMemo y useCallback. useCallback es un hook que memoiza una función, mientras que useMemo es un hook que memoiza un valor. Estos dos hooks son frecuentemente usados en conjunción con la API Context para mejorar aún más la eficiencia.

Aquí hay una lista básica de tópicos que estaremos cubriendo en este artículo:

1. Comportamiento predeterminado de almacenamiento en caché en React.
2. El hook useMemo.
3. El hook useCallback.

Para seguir adelante, necesitarás un entendimiento bastante bueno de React y de componentes con estado.

Comportamiento predeterminado de almacenamiento en caché en React

Por defecto, React usa una técnica llamada "comparación superficial" para determinar si un componente debería ser re-renderizado. Esto significa básicamente que si las propiedades o estado de un componente no han cambiado, React asumirá que la salida del componente tampoco ha cambiado y no lo re-renderizará.

Mientras que este comportamiento de almacenamiento en caché predeterminado es muy efectivo por sí mismo, no siempre es suficiente para optimizar componentes complejos que requieren una gestión de estado avanzado.

Para lograr más control sobre la caché de tus componentes y el comportamiento de la renderización, React ofrece los hooks useMemo y useCallback.

Caché en React con el hook useMemo

useMemo es útil cuando necesitas hacer un cálculo costoso para devolver un valor, y quieres asegurarte que el cálculo solamente se ejecute cuando sea necesario. Al memoizar el valor usando useMemo, puedes asegurarte que el valor se ejecute solamente cuando sus dependencias cambien.

En un componente de React, puedes tener múltiples propiedades que forman tu estado. Si una pieza del estado cambia, el cual no tiene nada que ver con nuestro valor costoso, ¿por qué volver a ejecutarlo si este no ha cambiado?

Aquí hay un bloque de código de ejemplo que refleja una implementación básica de useMemo:  

import React, { useState, useMemo } from 'react';

function Example() {
	const [txt, setTxt] = useState(“Algo de texto”);
	const [a, setA] = useState(0);
	const [b, setB] = useState(0);
    
	const sum = useMemo(() => {
	console.log('Calculando suma...');
	  return a + b;
	}, [a, b]);

	return (
	  <div>
		<p>Texot: {txt}</p>
		<p>a: {a}</p>
		<p>b: {b}</p>
		<p>sum: {sum}</p>
		<button onClick={() => setTxt(“Nuevo Texto!”)}>Escribir Texto</button>
		<button onClick={() => setA(a + 1)}>Incrementar a</button>
		<button onClick={() => setB(b + 1)}>Incrementar b</button>
	  </div>
	);
}

En nuestro componente Ejemplo de arriba, asumimos que la función sum() ejecuta un cálculo costoso. Si el estado txt se actualiza, React va a re-renderizar nuestro componente, pero como memoizamos el valor devuelto de sum, esta función no se ejecutará esta vez nuevamente.

La única vez que la función sum() se ejecutará es si el estado a o b ha sido mutado (cambiado). Este una mejora excelente sobre el comportamiento predeterminado, el cual re-ejecutará este método sobre cada re-renderizado.

Caché en React con el hook useCallback

useCallback es útil cuando necesitas pasar una función como una propiedad a un componente hijo, y quieres asegurarte que la referencia de la función no cambia innecesariamente. Al memoizar la función usando useCallback, puedes asegurarte que la referencia de la función sigue siendo siempre el mismo y cuando sus dependencias no cambien.

Sin entrar demasiado en profundidad en las referencias de función de JavaScript, vamos a ver cómo pueden afectar la renderización de tu aplicación de React. Cuando una referencia de una función cambia, cualquier componente hijo que recibe la función como una propiedad se re-renderizará, inclusive si la lógica de la función misma no ha cambiado.

Esto se debe a que, como ya mencionamos, React hace una comparación superficial de los valores de las propiedades para determinar si un componente debería re-renderizarse, y una nueva referencia de una función siempre será considerada como un valor diferente al anterior.

En otras palabras, el simple acto de re-declarar una función (inclusive la misma función exacta), causa que la referencia cambie, y causará que el componente hijo que recibe la función como una propiedad se renderice innecesariamente.

Aquí hay un bloque de código de ejemplo que refleja una implementación básica de useCallback:

import React, { useState, useCallback } from 'react';

function ChildComponent({ onClick }) {
  console.log('ChildComponent se renderiza');
  return (
	<button onClick={onClick}>Hazme clic</button>
  );
}

function Example() {
  const [count, setCount] = useState(0);
  const [txt, setTxt] = useState(“Algo de texto…”);
  const incrementCount = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [setCount]);

  return (
	<div>
	  <p>Texto: {txt}</p>
	  <p>Contador: {count}</p>
	  <button onClick={setTxt}>Escribir Texto</button>
	  <button onClick={setCount}>Incrementar</button>
	  <ChildComponent onClick={incrementCount} />
    </div>
  );
}

Como puedes ver en el ejemplo de arriba, pasamos el método incrementCount en vez del método setCount al componente hijo. Esto se debe a que incrementCount es memoizado, y cuando ejecutamos nuestro método setTxt, no hará que el componente hijo innecesariamente  re-renderice.

La única manera que nuestro componente hijo se vuelva a renderizar en este ejemplo es si el método setCount se ejecuta, porque le pasamos como un parámetro de dependencia a nuestra memoización useCallback.

Conclusión

Almacenar en la caché es una técnica importante para optimizar aplicaciones de React. Al reducir re-renderizados innecesarios, el almacenamiento en caché puede ayudar en mejorar el rendimiento y eficiencia de tu aplicación.

React provee un comportamiento de almacenamiento en caché predeterminado al usar un DOM virtual para comparar los cambios en el estado y las props, y actualizar los componentes solamente después de que una comparación superficial refleje cambios. Este es una gran técnica de optimización que es suficiente en muchos escenarios, pero a veces se desea más control detallado.

Los hooks useMemo y useCallback fueron creados para alcanzar este control detallado.

useMemo se usa para memoizar los resultados de una llamada de función, y es útil cuando la función es costosa para ejecutar y el resultado no cambia con frecuencia.

useCallback se usa para memoizar la referencia actual de una función en vez del valor devuelto, y se usa cuando la función se pasa como una prop a componentes hijos que pueden causar re-renderizados innecesarios.

¿Quieres aprender más? Para aprender más visita mi Blog OhMyCrawl para más consejos de programación para SEO.

La gestión del estado es una parte esencial del desarrollo de aplicaciones en React. Una forma común de gestionar el estado es pasando props. Pasar props significa enviar datos de un componente a otro. Es una buena manera de asegurarse de que los datos lleguen al lugar correcto en una aplicación React.

Pero puede resultar molesto pasar props cuando tienes que enviar los mismos datos a muchos componentes o cuando los componentes están muy lejos unos de otros. Esto puede hacer que una aplicación sea más lenta y más difícil de trabajar.

Afortunadamente, React proporciona una función incorporada conocida como Context API que ayuda a "teletransportar" datos a los componentes que los necesitan sin pasar props.

En este artículo, exploraremos cómo funciona Context API y cómo usarla de manera efectiva en sus aplicaciones React.

El problema al pasar props

En React, pasar props es un concepto fundamental que permite que un componente principal comparta datos con sus componentes secundarios, así como con otros componentes dentro de una aplicación.

En muchos casos, pasar props puede ser una forma eficaz de compartir datos entre diferentes componentes de su aplicación. Pero pasar props a lo largo de una cadena de múltiples componentes para llegar a un componente específico puede hacer que su código sea demasiado engorroso.

Según el diagrama anterior, para pasar datos al componente "Hijo B", debemos pasarlos a través de todos los componentes intermedios, incluso si esos componentes en realidad no usan los datos por sí mismos. Esto es lo que se conoce como "prop drilling".

El prop drilling puede hacer que tu código sea más difícil de leer y mantener, y también puede dificultar la refactorización de tus componentes más adelante.

Aquí es donde entra en juego Context API. Con Context API, puede almacenar datos en el nivel superior del árbol de componentes y ponerlos a disposición de todos los demás componentes que los necesiten sin pasar props.

¿Cómo funciona Context API?

Context API permite pasar datos a través de un árbol de componentes sin tener que pasar props manualmente en cada nivel. Esto facilita el intercambio de datos entre componentes.

Por ejemplo, digamos que tiene una aplicación de compras con un componente que muestra el carrito de compras de un usuario y otro componente que muestra el historial de pedidos del usuario.

Con Context API, puede crear un "contexto" que contenga la información de compras del usuario, como su carrito y su historial de pedidos. Luego, puede usar ese contexto tanto en el carrito de compras como en el componente del historial de pedidos, sin tener que pasar la información a través de props.

Es como tener una caja grande que contiene todo lo que necesitas para tu viaje de compras. Puedes sacar cosas de la caja cuando las necesites y volver a guardarlas cuando hayas terminado.

Básicamente, Context API consta de dos componentes principales: el proveedor de contexto y el consumidor de contexto. El proveedor es responsable de crear y gestionar el contexto que contiene los datos que se compartirán entre los componentes. Por otro lado, el consumidor se utiliza para acceder al contexto y sus datos desde dentro de un componente.

En el ejemplo dado, el proveedor creará el contexto que contiene la información de compras del usuario, mientras que los componentes del consumidor (carrito de compras e historial de pedidos) accederán a ese contexto para recuperar los datos que necesitan. Esto evita la necesidad de transmitir la información a través de props, lo que hace que su código sea más eficiente y más fácil de administrar.

¿Cómo empezar a usar context API?

Para comenzar a utilizar Context API en sus aplicaciones, deberá seguir unos sencillos pasos:

Crear un objeto de contexto

Primero, necesita crear un objeto de contexto usando la función createContext que viene de manera nativa en React. Este objeto de contexto contendrá los datos que desea compartir en su aplicación.

Cree un nuevo archivo llamado MiContexto.js en la carpeta src y agregue el siguiente código para crear un objeto de contexto:

import { createContext } from 'react';

export const MiContexto = createContext("");

En el código anterior, importamos createContext desde React y lo usamos para crear un nuevo objeto de contexto llamado "MiContexto". Luego, exportamos el objeto de contexto para poder usarlo en otras partes de nuestra aplicación.

Envolver componentes con un Proveedor

Una vez que haya creado un objeto de contexto, debe envolver los componentes que necesitan acceso a los datos compartidos con un componente de proveedor. El componente Proveedor acepta una propiedad value que contiene los datos compartidos, y cualquier componente que sea hijo del componente Proveedor puede acceder a esos datos compartidos.

Es importante tener en cuenta que el componente Proveedor debe incluirse alrededor del componente de nivel superior en una aplicación para garantizar que todos los componentes secundarios tengan acceso a los datos compartidos.

A continuación se muestra un ejemplo que demuestra cómo empaquetar componentes con un Proveedor usando Context API:

// Creamos un componente padre que envuelva los componentes hijos con un Proveedor
import { useState, React } from "react";
import { MiContexto } from "./MiContexto";
import MiComponente from "./MiComponente";

function App() {
  const [texto, setTexto] = useState("");

  return (
    <div>
      <MiContexto.Provider value={{ texto, setTexto }}>
        <MiComponente />
      </MiContexto.Provider>
    </div>
  );
}

export default App;

En este ejemplo, tenemos un componente principal llamado App. Este componente tiene una variable de estado llamada "texto", que inicialmente se establece en una cadena vacía. También hemos definido una función llamada setTexto que se puede usar para actualizar el valor del texto.

Consumir el contexto

Ahora que hemos creado el componente proveedor, necesitamos consumir el contexto en otros componentes. Para hacer esto, usamos el hook "useContext" de React.

import { useContext } from 'react';
import { MiContexto } from './MiContexto';

function MiComponente() {
  const { texto, setTexto } = useContext(MiContexto);

  return (
    <div>
      <h1>{texto}</h1>
      <button onClick={() => setTexto('Hola mundo!')}>
        Click me
      </button>
    </div>
  );
}

export default MiComponente;

En este ejemplo, hemos utilizado el hook useContext para acceder a las variables "texto" y "setTexto" que se definieron en el componente del proveedor.

Dentro de la declaración de retorno de "MiComponente", hemos representado un elemento de párrafo que muestra el valor del texto. También hemos representado un botón que, al hacer clic, llamará a la función setTexto para actualizar el valor del texto a "¡Hola, mundo!".

¡Y eso es! Así es como puedes usar la Context API en tu aplicación React.

Al crear un objeto de contexto, definir un componente de proveedor y consumir el contexto en otros componentes, puede compartir datos en su aplicación de una manera simple y eficiente.

Casos de uso de context API

A continuación se muestran algunos casos de uso reales de Context API:

1. Temas: puede utilizar Context API para almacenar el tema actual de su aplicación y ponerlo a disposición de todos los componentes. De esta manera, cada vez que el usuario cambie el tema (como habilitar el modo oscuro), todos los componentes se actualizarán con el nuevo tema.
2. Autenticación de usuario: también puede utilizar Context API para almacenar el estado de autenticación de un usuario y transmitirlo a todos los componentes que lo necesitan. De esta manera, puede restringir fácilmente el acceso a ciertas partes de su aplicación según el estado de autenticación del usuario.
3. Soporte multilingüe: puede almacenar el idioma actual de su aplicación en el contexto y transmitirlo a todos los componentes que lo necesiten. De esta manera, puede cambiar fácilmente entre diferentes idiomas sin tener que pasar el idioma como props a todos los componentes.
4. Acceso a datos de fuentes externas: finalmente, puede utilizar Context API para almacenar datos recuperados de fuentes externas, como API o bases de datos, y ponerlos a disposición de todos los componentes. Esto puede simplificar su código y facilitar la administración de datos en su aplicación.

En resumen

En este artículo, exploramos Context API de React, una poderosa herramienta para administrar el estado en aplicaciones React.

Hemos analizado los conceptos básicos Context API, incluida la creación de un contexto, la creación de un componente de proveedor para pasar datos a componentes secundarios y el consumo de datos en otro componente mediante el hook useContext.

Conclusión

Si está interesado en explorar cómo implementar un tema de modo claro/oscuro en sus propios proyectos de React usando Context API, he creado un sitio web simple que demuestra cómo hacerlo. Puedes encontrar el código del proyecto en mi GitHub.

Al explorar el código y experimentar con sus propias modificaciones, estará bien encaminado para dominar Context API y desbloquear todo su potencial en sus propios proyectos.

¡Muchas gracias por leer!