Guía R-011 – Utilización de Plantillas

He estado revisando algunas plantillas disponibles (FREE) para React y son excelente y hay una gran cantidad de ellas.

¿Por qué utilizar plantillas? Porque de entrada, te facilitan una gran labor de «presentación» de tu aplicación, además de tener una estructura de directorios y ficheros que te explican cómo se debe construir un proyecto grande y ordenado, y además,  te facilita una gran cantidad de código de calidad para tu aplicación.

¿Qué problemas tiene? Esta es mi conclusión, por lo que puede que para otro perfil pueda tener otros.

  • Normalmente, hay muchas plantillas de alta calidad que utilizan los componentes que ellos mismos han producido y eso te «obliga» a que tu proyecto se basen, principalmente, en esos componentes. A mi me gustan los componentes y soluciones de Material UI. Son los que he utilizado en artículos anteriores.
  • El código que te entrega es de alta calidad y por lo tanto, necesitas tener buen conocimiento de React y del conjunto de componentes que utilizan en la Plantilla. Casi todos los casos disponen de una documentación que explica cómo está construido.
  • No son aplicaciones completas (lógicamente), por lo que falta toda la parte del Server y siempre o casi siempre, te venden una versión PRO que es mucho más completa y relativamente barata.

DEMO: https://fhumanes.com/mantis-react/

Si te interesa este tema, sigue leyendo el artículo en este enlace.

Guía R-010 – Aplicaciones REACT multi-idiomas

Una de las cosas (y son muchas) que PHPRunner tiene muy bien resuelta es la construcción de aplicaciones multi-idioma.

Este artículo es la búsqueda de una de las soluciones que dispone React de producir aplicaciones multi-idiomas. He utilizado para el ejemplo la solución de i18next y más concretamente el componente react-i18next, que es una solución muy sencilla y elegante, por lo que recomiendo su utilización.

Objetivo

Poder desarrollar aplicaciones multi-idioma, los que se deseen, detectando el idioma por el navegador o sistema operativo, en donde funcione la aplicación.

DEMO: https://fhumanes.com/i18n-react/

Si te interesa este tema, sigue leyendo el artículo en este enlace.

Guía R-009 – Gráficos de Gantt

El gráfico de Gantt utilizado en mi ejemplo de Gestión de Proyectos, es muy potente, pero gráficamente se le ve muy antiguo.

En esta nueva plataforma de desarrollo he estado revisando y probando aquellas soluciones de gráficos de Gantt que son FREE y después de mucho probar he seleccionado «gantt-task-react«, en su versión 0.3.9.

Objetivo

Seleccionar un componente free, para hacer gráficos de Gantt que tenga las siguientes características:

  • Que se pueda adaptar a diferentes idiomas.
  • Que se pueda establecer en cada tareas (color, tipo, fecha de inicio, fecha final, dependencia, agrupación y recursos asignados).
  • Que se pueda colapsar y extender las tareas de grupo.
  • Que disponga de tooltip para mostrar información adicional de la tarea
  • Que se pueda interactuar con el gráfico, por ejemplo, para consulta o actualización de la tarea.

DEMO: https://fhumanes.com/gantt-react/

Si estás interesado en este tema, sigue leyendo el artículo en este enlace.

Guía R-008 – Download de fichero del Server a través de React

Tengo muchos ejemplos de elaboración de informes en formato PDF, Word, Excel, etc., que podré utilizar en este tipo de aplicaciones con el Front-End de React.

Como habitualmente hago en los últimos tiempos, consulté con IA Deep Seek sobre este tema y me ofreció, con las múltiples preguntas y reflexiones que le hice, 3 alternativas que paso a mostraros.

Objetivo

Producir descarga de ficheros elaborados en el server PHP y entregado por React.

En este caso, la funcionalidad es:

  • En REACT se establece un botón, que al ser pulsado hace una petición al Server- PHP.
  • En PHP, valida que la petición es correcta y elabora un fichero PDF con el software TCPDF. Una vez acabado, lo entrega, en formato binario al Front-End- React.
  • En React, se obtiene el fichero, se crea dinámicamente un enlace de descarga y se hace «click» sobre dicho enlace.

DEMO: https://fhumanes.com/download_f/

Si te interesa este tema, sigue leyendo el artículo en este enlace.

Guía R-007 – Hacer informes con PDFMAKE

En esta búsqueda de completar las funcionalidades de los desarrollos de React me faltaba disponer de una solución para generar informes.

Siempre pensé que de todas las soluciones que dispongo para realizar informes en PHP (publicado para PHPRunner), serían suficientes y así en parte lo es, porque todas ellas se pueden utilizar, pero deseaba disponer de alguna en React, sencilla, fácil de utilizar y muy rápida, y creo que la he conseguido. Este ejemplo es un caso sencillo de hacer la simulación de una factura con el producto PDFMake.

Objetivo

Disponer de una solución para crear informes, documentos, etc., principalmente en PDF desde el entorno de React.

DEMO:  https://fhumanes.com/factura-pdfmake/

Si te interesa este tema, sigue leyendo el artículo en este enlace.