Forem: Lenin Mendoza

🧵 Gestión de Múltiples Cuentas de GitHub en un Solo Sistema (Ubuntu)

Lenin Mendoza — Wed, 25 Jun 2025 22:36:57 +0000

🚀 Objetivo

¿Te has encontrado en la situación de tener que manejar proyectos de trabajo, personales y de freelance desde la misma máquina? Este tutorial surge de una necesidad real: separar completamente los entornos de trabajo para evitar conflictos y mantener la privacidad de cada contexto.

En este tutorial aprenderás a configurar múltiples cuentas de GitHub (personal, trabajo, freelance, etc.) en un mismo sistema Ubuntu de manera organizada, segura y automatizada. Utilizaremos claves SSH específicas, configuraciones locales de Git y un script que simplificará todo el proceso.

💡 ¿Por qué es importante esto?

Privacidad: Evita que los commits de trabajo aparezcan en tu perfil personal
Organización: Mantén cada proyecto en su contexto correspondiente
Seguridad: Usa claves SSH diferentes para cada cuenta
Profesionalismo: No mezcles repositorios corporativos con proyectos personales
Flexibilidad: Cambia fácilmente entre cuentas según el proyecto

🎯 Ideal para:

Desarrolladores que trabajan remotamente, Freelancers que manejan múltiples clientes, Empleados que también desarrollan proyectos personales Consultores que trabajan con diferentes organizaciones
Cualquier persona que necesite separar sus identidades digitales

📋 Lo que aprenderás:

Generar y configurar múltiples claves SSH
Configurar el archivo ~/.ssh/config para automatizar conexiones
Establecer configuraciones locales de Git por proyecto
Crear un script para cambiar automáticamente entre cuentas
Verificar que todo funcione correctamente

Al finalizar este tutorial, podrás trabajar de forma fluida con múltiples cuentas GitHub sin preocuparte por configuraciones manuales o mezclar contextos, te lo digo por experiencia propia 😬.

Comencemos:

🪖 Requisitos previos

Tener Git instalado (sudo apt install git)
Tener una cuenta o varias cuentas activas en GitHub

🧹 Paso 0: Limpieza y reinicio de configuración previa (opcional)

Si quieres comenzar completamente desde cero:

# Elimina configuraciones globales de Git
rm ~/.gitconfig

# Elimina claves SSH existentes (cuidado si tienes otras claves en uso)
rm -rf ~/.ssh

# Limpia credenciales en caché
git credential-cache exit

⚠️ Esto borra todas las configuraciones previas de Git y SSH. Haz un respaldo si es necesario.

🔑 Paso 1: Crear claves SSH por cada cuenta

El primer paso es crear un par de claves SSH (pública y privada) para cada una de tus cuentas. Esto le permite a GitHub autenticarte de forma segura sin necesidad de
contraseñas:

# Cuenta personal
ssh-keygen -t ed25519 -C "tu_correo_personal@ejemplo.com" -f ~/.ssh/id_ed25519_personal

# Cuenta de trabajo
ssh-keygen -t ed25519 -C "tu_correo_trabajo@empresa.com" -f ~/.ssh/id_ed25519_trabajo

# Cuenta freelance (opcional)
ssh-keygen -t ed25519 -C "tu_correo_freelance@otro.com" -f ~/.ssh/id_ed25519_freelance

No es obligatorio agregar passphrase, pero es recomendable por seguridad.

🔧 Paso 2: Para activar el agente y agregar claves al ssh-agent

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519_personal
ssh-add ~/.ssh/id_ed25519_trabajo
ssh-add ~/.ssh/id_ed25519_freelance

📂 Paso 3: Configura tu archivo ~/.ssh/config

Esto permite a Git usar la clave correcta según el repo:

# Cuenta personal
Host github-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_personal

# Cuenta de trabajo
Host github-trabajo
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_trabajo

# Cuenta freelance (opcional)
Host github-freelance
  HostName github.com
  User git
  IdentityFile ~/.ssh/id_ed25519_freelance

🤝 Paso 4: Asociar claves con GitHub

Ahora, debes asociar la parte pública de cada clave con su cuenta de GitHub correspondiente.

Copia tu clave pública, por ejemplo:
cat ~/.ssh/id_ed25519_personal.pub
Pégala en GitHub: Settings > SSH and GPG Keys > New SSH Key

Repite el proceso para cada cuenta.

🔍 Paso 5: El Script Interactivo para Gestionarlo Todo:

Guarda este código en un archivo llamado git_manager.sh en tu Escritorio o donde prefieras.

 #!/bin/bash

# --- CONFIGURACIÓN DE CUENTAS DE GITHUB ---
# IMPORTANTE: Edita estas variables con tus datos correctos.

# Cuenta 1: Personal
USER_PERSONAL="mendozalz"
EMAIL_PERSONAL="mendoza124302@gmail.com"
HOST_PERSONAL="github-personal"

# Cuenta 2: Trabajo
USER_TRABAJO="trabajo"
EMAIL_TRABAJO="flavioanez@gmail.com"
HOST_TRABAJO="github-trabajo"

# Cuenta 3: Tati
USER_TATI="tatim79"
EMAIL_TATI="tatianagomez3219@gmail.com"
HOST_TATI="github-tati"

# --- FIN DE LA CONFIGURACIÓN ---


# --- LÓGICA DEL SCRIPT ---

# Colores para la salida
GREEN="\033[0;32m"
YELLOW="\033[0;33m"
CYAN="\033[0;36m"
NC="\033[0m" # No Color

# Verificar si estamos dentro de un repositorio de Git
if ! git rev-parse --is-inside-work-tree > /dev/null 2>&1; then
  echo -e "${YELLOW}ERROR: No estás en un repositorio de Git.${NC}"
  echo "Por favor, ejecuta este script desde la carpeta raíz de tu proyecto."
  exit 1
fi

# Función para configurar el repositorio local
configurar_repositorio() {
    echo -e "${CYAN}--- Configurar Repositorio Local ---${NC}"
    echo "Selecciona la cuenta de GitHub que deseas usar para este repositorio:"
    echo "1) Personal ($USER_PERSONAL)"
    echo "2) Trabajo ($USER_TRABAJO)"
    echo "3) Tati ($USER_TATI)"
    read -p "Opción: " choice

    local user=""
    local email=""
    local host=""

    case $choice in
        1) user=$USER_PERSONAL; email=$EMAIL_PERSONAL; host=$HOST_PERSONAL ;;
        2) user=$USER_TRABAJO; email=$EMAIL_TRABAJO; host=$HOST_TRABAJO ;;
        3) user=$USER_TATI; email=$EMAIL_TATI; host=$HOST_TATI ;;
        *) echo -e "${YELLOW}Opción no válida.${NC}"; return ;;
    esac

    echo -e "\nConfigurando Git localmente para ${GREEN}$user${NC}..."

    # 1. Configurar usuario y email localmente
    git config user.name "$user"
    git config user.email "$email"
    echo "Usuario y email configurados para este repositorio."

    # 2. Actualizar la URL del remote 'origin' para usar el Host y Usuario de SSH correctos
    if git remote -v | grep -q "origin"; then
        local current_url=$(git remote get-url origin)
        # Extraer solo el nombre del repositorio (ej: mi-proyecto.git)
        local repo_name=$(basename "$current_url")
        # Construir la nueva URL con el host y el usuario seleccionados
        local new_url="git@$host:$user/$repo_name"

        git remote set-url origin "$new_url"
        echo "URL del remote 'origin' actualizada a: ${GREEN}$new_url${NC}"
    else
        echo -e "${YELLOW}ADVERTENCIA: No se encontró un remote llamado 'origin'.${NC}"
        echo "Asegúrate de agregar un remote para poder hacer push/pull."
    fi

    echo -e "\n${GREEN}¡Configuración completada!${NC}"
    echo "Configuración local actual:"
    git config --local -l | grep user
    git remote -v
}

# Funciones para comandos de Git
git_add() {
    echo -e "\n${CYAN}--- Git Add ---${NC}"
    git add .
    echo "Se han añadido todos los cambios al staging area."
}

git_commit() {
    echo -e "\n${CYAN}--- Git Commit ---${NC}"
    read -p "Mensaje del commit: " message
    git commit -m "$message"
}

git_push() {
    echo -e "\n${CYAN}--- Git Push ---${NC}"
    git push
}

git_pull() {
    echo -e "\n${CYAN}--- Git Pull ---${NC}"
    git pull
}

git_status() {
    echo -e "\n${CYAN}--- Git Status ---${NC}"
    git status
}


# Menú principal
while true; do
    echo -e "\n${CYAN}===== GESTOR DE CUENTAS GIT =====${NC}"
    echo "Repositorio actual: $(basename "$(pwd)")"
    echo "Usuario Git local: ${GREEN}$(git config user.name || echo "No configurado")${NC}"
    echo "Email Git local: ${GREEN}$(git config user.email || echo "No configurado")${NC}"
    echo -e "${CYAN}-----------------------------------${NC}"
    echo "Elige una opción:"
    echo "1) ${YELLOW}Configurar Repositorio${NC} (¡Primer paso obligatorio!)"
    echo "2) Git Add ."
    echo "3) Git Commit"
    echo "4) Git Push"
    echo "5) Git Pull"
    echo "6) Git Status"
    echo "7) Salir"
    read -p "Opción: " main_choice

    case $main_choice in
        1) configurar_repositorio ;;
        2) git_add ;;
        3) git_commit ;;
        4) git_push ;;
        5) git_pull ;;
        6) git_status ;;
        7) echo "Saliendo..."; exit 0 ;;
        *) echo -e "${YELLOW}Opción no válida.${NC}" ;;
    esac
done

📃 Paso 6: Cómo Usar el Script.

Dale permisos de ejecución (solo necesitas hacerlo una vez):
chmod +x /ruta/a/tu/git_manager.sh
Navega a tu repositorio en la terminal:
cd /ruta/a/mi-proyecto
Ejecuta el script:
/ruta/a/tu/git_manager.sh
Usa el menú:
- La primera vez en un repo, elige la Opción 1 para seleccionar qué cuenta (Personal, Trabajo o Tati) quieres usar. El script ajustará el user.name, user.email y la URL remota automáticamente.
- Una vez configurado, puedes usar las demás opciones (add, commit, push, pull, status) directamente desde el menú.

🌍 Paso 7: El Método Manual (Alternativa)

Si prefieres no usar un script, siempre puedes configurar un repositorio manualmente.

# 1. Sitúate en tu proyecto
cd /ruta/a/mi-proyecto

# 2. Configura el usuario y email para ESTE proyecto
git config user.name "Tu Nombre de Usuario de Trabajo"
git config user.email "tu_correo_de_trabajo@empresa.com"

# 3. Cambia la URL remota para que use el Host correcto de tu .ssh/config
# La sintaxis es: git@<HOST_DEL_SSH_CONFIG>:<usuario_github>/<repo>.git
git remote set-url origin git@github-trabajo:usuario_trabajo/proyecto-cliente.git

# 4. Verifica que todo esté correcto
git remote -v
git config user.name

🧪 Ejemplo real de error y solución

Si ves este error:

ERROR: Repository not found.
fatal: No se pudo leer del repositorio remoto.

Pero al ejecutar:
ssh -T git@github-freelance

Obtienes:
Hi Freelance! You've successfully authenticated, but GitHub does not provide shell access.

Entonces el problema no es de autenticación, sino que:

✅ El error está en el nombre del repositorio mal especificado en el remote.

Por ejemplo, si configuraste esto incorrectamente:
git remote set-url origin git@github-freelance:Freelance/repositorio.git

Y el nombre real del repo es finanzas-2025, debes corregirlo así:
git remote set-url origin git@github-freelance:Freelance/finanzas-2025.git

Luego verifica con:

git remote -v
git push

📄 Tips adicionales

Usa git config --global --unset user.name y --unset user.email para limpiar la configuración global.
Puedes usar gh (GitHub CLI) si quieres automatizar la creación de repos desde la terminal.
Evita usar tokens personales si trabajas con varias cuentas; el sistema SSH es más seguro y escalable.

📝 Créditos y utilidad

Este material fue diseñado como base para un tutorial en Dev.to o LinkedIn que facilite el trabajo colaborativo en entornos con múltiples identidades.

Ideal para:

Freelancers
Desarrolladores con proyectos open source y clientes
Empresas que gestionan identidades separadas para sus equipos

🚀 Licencia

Este proyecto es libre de usar. Puedes compartirlo, clonarlo o modificarlo sin restricciones.

Conclusión:

Con esta configuración, puedes trabajar en múltiples proyectos con diferentes identidades de GitHub sin conflictos. El script interactivo simplifica enormemente el
proceso, permitiéndote cambiar de contexto con un solo comando y asegurando que cada commit y push se atribuya a la cuenta correcta.

✉️ Si te fue útil, considera compartirlo para que otros lo encuentren también.

Cómo Cambiar el Favicon Basado en el Esquema de Color del Sistema sin JavaScript

Lenin Mendoza — Wed, 22 May 2024 21:41:59 +0000

Introducción:
En este tutorial, aprenderemos cómo cambiar el favicon de un sitio web basado en el esquema de color del sistema del usuario. Esto significa que el favicon se mostrará de manera diferente según si el sistema está en modo claro u oscuro. Lo mejor de todo es que lo haremos sin necesidad de usar JavaScript.

Requisitos:
Un editor de texto (como Visual Studio Code).
Conocimientos básicos de HTML.

Paso 1: Preparación de los Favicones
Antes de comenzar, necesitaremos tener dos favicones: uno para el modo claro y otro para el modo oscuro. En mi caso el diseñador me paso una imagen en modo oscuro, es decir solo para la preferencia a modo claro y como desarrolladores con habilidades recursivas debemos ayudar a agilizar este tipo de cosas sin depender de que el diseñador se desocupe para nosotros llevar a acabo este tipo de tareas tan sencillas.

En mi caso utilice esta herramienta online:
https://pinetools.com/es/colorizar-imagen

Paso 2: Estructura Básica del Documento HTML
Creamos un nuevo archivo HTML y escribimos la estructura básica del documento HTML en mi caso lo incluí en el Layout ya que estaba trabajando sobre ASTRO, esto también aplica para aplicaciones de NextJs (en esta caso es un poco distinto debido a la naturaleza del servidor de renderizado y la gestión del ciclo de vida en Next.js, pero si es posible) esta comprobado:



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cambio Dinámico de Favicon</title>
    <!-- Aquí añadiremos las etiquetas <link> para los favicones -->
</head>
<body>
    <h1>Lorem ipsum</h1>
</body>
</html>

Paso 3: Incluir los Favicones en el Documento HTML
Ahora, vamos a incluir los favicones en el documento HTML utilizando las etiquetas con el atributo media:



<head>
    <!-- Incluimos el favicon para el modo claro -->
    <link href="/fav_negro.ico" rel="icon" media="(prefers-color-scheme: light)">
    <!-- Incluimos el favicon para el modo oscuro -->
    <link href="/fav_blanco.ico" rel="icon" media="(prefers-color-scheme: dark)">
</head>

Paso 4: Explicación
Utilizamos la etiqueta con el atributo media para especificar el favicon que se debe utilizar según el esquema de color del sistema.
(prefers-color-scheme: light) indica que el favicon se utilizará cuando el sistema esté en modo claro.
(prefers-color-scheme: dark) indica que el favicon se utilizará cuando el sistema esté en modo oscuro.

Paso 5: Verificación
Guarda el archivo HTML y ábrelo en tu navegador. Cambia el tema de tu sistema entre claro y oscuro para ver cómo el favicon se actualiza automáticamente.

Y este fue mi caso:

Conclusión:
¡Felicidades! Has aprendido cómo cambiar dinámicamente el favicon de tu sitio web basado en el esquema de color del sistema del usuario sin necesidad de usar JavaScript. ¡Ahora tu sitio será aún más personalizado y atractivo para tus visitantes!

Redirigir después de enviar datos en formulario dentro de Astro y TypeScript con componentes de React (Mi solución)

Lenin Mendoza — Tue, 14 May 2024 03:17:01 +0000

Recientemente me encontré con un problema en la que tuve que usar un componente de React para controlar un formulario con react-hook-form y usarlo dentro de astro, mi problema era como re-dirigirlo luego de enviar los datos y llevarlo a la pagina de Gracias! pues la documentación de astro te propone usar "Astro.redirect" pero este no funciona con componente de react cuando necesitamos escuchar un evento y en mi caso dentro del componente de react yo necesitaba escuchar el evento window.dispatchEvent y pasando formSubmitted como detalle, así que me puse a investigar y buscar en la documentación o tirando de Claude o ChatGPT para dar con algo y sé que no sera la mejor solución pero seguro que a otros les resultará útil este enfoque y no pasar dos horas tirando del hilo para ser más productivos en sus trabajos asi que de manera breve y espero se entienda aquí les dejo mi solución:

1. Crear el formulario de componente React
Primero, necesitamos tener un formulario en nuestra aplicación web en mi caso fue un componente de react para poder usar los beneficios que nos ofrece react-hook-form. Puede ser cualquier formulario que desees, en este caso practico pongo un caso donde el usuario debe dejar los datos como nombre, apellido y correo:

// components/Form.tsx

import { useRef, useState } from "react";
import { useForm } from "react-hook-form";

const Form: React.FC = () => {
  const { register, handleSubmit, reset } = useForm();
  const formRef = useRef<HTMLFormElement>(null);
  const [btnEnviando, setBtnEnviando] = useState("Dejar datos");

  const enviar = (data: any) => {
    setBtnEnviando("Enviando datos...");
    const formData = new FormData(formRef.current!);
    // Aquí iría tu lógica de envío del formulario, por ejemplo, con fetch, en este caso, supondremos que estamos enviando los datos a una hoja de Google Sheet.

const formDatab = new FormData(formRef.current!);
    fetch(
      "https://script.google.com/macros/s/la-id-de-tu-hoja-de-google-UTQwKC-B-py/exec",
      {
        method: "POST",
        body: formDatab
      }
    )

    .then((res) => {
      const contentType = res.headers.get("Content-Type");
      if (contentType && contentType.includes("application/json")) {
        return res.json();
      } else {
        return res.text();
      }
    })
    .then((data) => {
      console.log(data);
      reset(); 
      setBtnEnviando("Dejar datos");
        // Después de enviar el formulario con éxito, puedes disparar un evento personalizado.

    const formSubmitted = true; // Suponiendo que el envío fue exitoso
    window.dispatchEvent(new CustomEvent('formSubmitted', { detail: formSubmitted }));
  };
    })
    .catch((error) => {
      console.log(error);
      setBtnEnviando("Dejar datos")
    });



  return (
    <form ref={formRef} onSubmit={handleSubmit(enviar)}>
      {/* Campos del formulario */}
      <input type="submit" value={btnEnviando} />
    </form>
  );
};

export default Form;

2. Escuchar el evento de envío del formulario
En el script de tu página o componente (es este caso es el index.astro), escucha el evento personalizado formSubmitted que se dispara cuando el formulario se envía con éxito.

// index.astro o componente principal

<script>
window.addEventListener('formSubmitted', (event: Event) => {
  const customEvent = event as CustomEvent<boolean>;
  const formSubmitted = customEvent.detail;

  if (formSubmitted) {
// Al puro estilo y uso de vanilla JS
    window.location.href = '/thank-you-page'; // Redirige al usuario a la página de agradecimiento
  }
});
</script>

Con estos pasos, hemos podido crear un sistema para redirigir al usuario a una página específica (Ej. la pagina de agradecimiento) después de enviar datos en un formulario de componente React en tu aplicación web Astro usando TypeScript.

Claro, aquí tienes una conclusión que resalta la utilidad de la solución y anima a otros desarrolladores a contribuir con sus propias soluciones:

Conclusión:

En resumen, aunque enfrenté algunos desafíos al intentar redirigir a los usuarios después de enviar un formulario en Astro con un componente de React, encontré una solución efectiva al escuchar el evento personalizado formSubmitted y utilizando window.location.href para la redirección. Si bien esta solución puede no ser la más elegante o convencional, ha demostrado ser efectiva en mi caso y espero que también sea útil para otros desarrolladores que enfrenten problemas similares.

Es importante recordar que el mundo del desarrollo web está lleno de desafíos y soluciones creativas. No siempre existe una única manera "correcta" de hacer las cosas, y es precisamente esta diversidad de enfoques lo que hace que nuestra comunidad sea tan vibrante y enriquecedora. Por lo tanto, te animo a que, si encuentras una solución ingeniosa a un problema, la compartas con la comunidad. ¡Quién sabe, tu solución podría ser la ayuda que alguien más necesita!

Recuerda, ¡todos podemos contribuir con nuestras propias ideas y soluciones para hacer que el desarrollo web sea aún mejor!

Cómo Integrar un Componente React en WordPress con Elementor: Mi Experiencia y Solución (Actualización 23.5.24)

Lenin Mendoza — Wed, 31 Jan 2024 19:13:30 +0000

Presentación:
Un saludo mi nombre es Lenin Mendoza y en este post quiero compartir con ustedes algo que no lo había en internet hasta este post, lo cierto es que en una prueba técnica se me solicito que se implementara un componente de React (Contador de calorías) dentro de Wordpress con Elementor, en el repositorio de wordpress existen 3 complementos que uno de ellos tiene su ultima actualización hace 5 años, el otro se debe integrar el componente en un servidor aparte (la idea es que todo el código quede en local), y llamarlo como si fuese un iframe lo que no es muy recomendado, y el ultimo no me permitía renderizar el componente pues solo trabaja con el theme Twenty Twenty-One.

En fin la única alternativa que tuve fue implementar mi propio método y vaya que si me resulto.

Advertencia:
Es mi primera ves al crear un articulo, si ven que algo me he saltado o hace falta para que el contenido sea mas claro y preciso por favor no duden en escribirme en la caja de comentarios que con todo gusto aceptare sus recomendaciones, el fin de esto es ir mejorando de a poco.

Se entiende:
En este apartado doy por entendido que conoces como manipular código dentro de wordpress, y sabes construir un complemento (buildear) este mismo.

Comprendido lo ultimo mencionado pues vayamos al lio:

Este código en React tiene como objetivo cargar y mostrar el contenido de un archivo HTML utilizando shortcodes en WordPress, tal como lo hacemos al querer cargar estilos, fuentes o JavaScript. No lo cree como un plugins pues como era a modo de pruebas lo integre directamente en el archivo functions.php del theme (luego me animo y creo un complemento).
Aquí está una explicación detallada de cada parte y como lo hice:

Lo primero que debes hacer es tener tu componente de React definido, es decir que lógica quieres implementar dentro de Wordpress, en mi caso era un contador de calorías, donde le indicaba al usuario la cantidad de calorías quemadas según la distancia recorrida, estatura, edad y genero, aqui una imagen de lo que describo:

Ahora debes construir tu componente de React, es decir buildearla, en mi caso utilice VIT la cual te genera una carpeta “dist” esta carpeta dist asi mismo la subiremos por ftp si tienes tu Wordpress en un servidor en la nube, en mi caso yo utilizo localwp lo que me facilita muchas cosas, debes copiar y pegar esa carpeta dist en app\public\wp-content\themes\hello-elementor-child (es recomendable utilizar un child-theme pues en una actualización podrías perder el código), aqui una captura de donde deberás agregar tu carpeta dist:

En esa ruta pegaras tu carpeta dist con todo su contenido sin alterar nada y debería verse asi:

Ahora cumplido esos pasos vayamos a el archivo functions.php que podrías bien editarlo directamente basado en la ruta en VSC o como fue mi caso directamente en la ruta theme de tu dashboard de Wordpress lo cual lo consigues en Appearance > Theme File Editor > Select theme to edit: Hello Elementor > Theme Functions (functions.php):

El código:



// React

function cargar_archivo_html() {
    ob_start();
    include_once(get_template_directory() . '/dist/index.html'); 
    return ob_get_clean(); 
}

function registrar_shortcode_html() {
    add_shortcode('mostrar_archivo_html', 'cargar_archivo_html');
}

function enqueue_react_assets() {
    wp_enqueue_script('react-app', get_template_directory_uri() . '/dist/assets/index.js', array(), null, true);
    wp_enqueue_style('react-app-css', get_template_directory_uri() . '/dist/assets/index.css', array(), null);
}

add_action('wp_enqueue_scripts', 'enqueue_react_assets');

add_action('init', 'registrar_shortcode_html');

Explicando el código:

Función cargar_archivo_html():

Implementa ob_start() para iniciar el almacenamiento en búfer (espacio de memoria temporal) de salida, sin esto se inyectaría directamente el código sin procesar y te daría problemas al renderizar el componente asi que no puedes omitirlo.
Incluye el contenido del archivo HTML ubicado en la ruta /dist/index.html del tema actual (recuerda que estamos dentro de la carpeta dist que creaste en tu componente de React).
Agrega la ruta de tu script de tipo módulo que esta dentro de la carpeta /dist/assets/index-6qsmj8p8.js donde (/index-6qsmj8p8.js) es el archivo construido de manera automática al momento de build y entiéndase que este nombre puede variar según sea el proceso de construcción y te recomiendo que para fines prácticos lo renombres y lo dejes solo como index.js tal como se ve en el codigo de arriba, si lo renombras es probable que tengas que hacer cambios dentro de index.html por si no te funciona (en mi caso no fue necesario).
Tambien debes agregar un enlace a una hoja de estilo CSS desde la ruta /dist/assets/index-fXWzvgFu.css que igual al caso del scrip.js donde (/index-fXWzvgFu.css) este puede variar, una vez más te recomiendo renombrarlo a index.css.
Utiliza ob_get_clean() para obtener y limpiar el contenido almacenado en el búfer y lo devuelve.

Función registrar_shortcode_html():

Registra un shortcode llamado 'mostrar_archivo_html' que está vinculado a la función cargar_archivo_html().

add_action('init', 'registrar_shortcode_html'):

Registra la función registrar_shortcode_html() para que se ejecute durante la fase de inicialización de WordPress.

Observación en esta actualización 23.5.24 se ha cambiado el código para registrar los archivos index.js y index.css tal como lo recomienda WORDPRESS.

Atención:
Antes de cualquier implementación siempre, siempre debes crear un respaldo de seguridad de tu sitio como buenas practicas.

Repito para implementar esto en tu proyecto, debes copiar y pegar este código en el archivo functions.php de tu tema de WordPress. Luego, puedes usar el shortcode [mostrar_archivo_html] en tus publicaciones o páginas para mostrar el contenido del archivo HTML y violà felicitaciones ya tienes tu componente de React dentro de Wordpress con Elementor sin ningún problema, libre de dependencias externas y posibles fallos en el futuro, pero es recomendado crearte tu propio plugins de manera tal que no quede inyectado directamente en el functions.php y para que tu tengas el control de ello al momento de querer depurar. Un saludo y espero que esto les sea de mucha utilidad.

PD: He trabajado los estilos con Tailwind CSS es posible que si no logras ver los estilos es por que deberías trabajarlo como lo hice yo...

Saludos y gracias a Rigoberto Nava por reportar el caso.