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.

En la actualidad, muchas de las aplicaciones que se hacen para el móvil tienen que ver con el trabajo exterior a la empresas y casi siempre es relacionado con el Cliente, de tal forma que es muy habitual la recogida de la firma del Cliente, como garantía de la aceptación del servicio.

En este caso, el ejemplo se basa en mostrar lo sencillo que es la recepción de la firma (Cliente, Técnico, etc.) en esta plataforma de React.

Objetivo

Mostrar un ejemplo básico de una aplicación realizada en React para la captura de la firma manuscrita del (Cliente, Técnico, etc.)

DEMO: https://fhumanes.com/signature-test/

(1)  (2)  (3)  Pasos a seguir en el ejemplo

He hecho un programa PHPRunner para que podáis comprobar que el contenido está almacenado en la base de datos. https://fhumanes.com/signature-php

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

Como os había indicado, aquí está un ejemplo completo de utilización de la biblioteca FullCalendar utilizada desde React.

He tardado en publicar el ejemplo porque he estado probando distintas formas de hacer la funcionalidad de List, Add, Edit, View y Delete. Verás que las 3 tablas que contiene el ejemplo, tienen 3 formas distintas de visualización/construcción de estas funcionalidades, más si se tiene en cuenta su funcionamiento en pantallas pequeñas como la de los móviles.

También, me ha costado «afinar» el funcionamiento del Calendario, en los siguientes apartados:

• Utilización de los Tooltip, para mostrar información del caso/evento sin tener que hacer clic para visualizarlo. He encontrado poca información y me he ayudado de la IA de DeepSeek, muchas veces me ha dado soluciones incorrectas, pero siempre me ha ayudado para explorar otras alternativas y por fin, di con la solución. Es una buena solución si estás sólo y no puedes consultar con nadie.
• Para las acciones de «Delete» he estado utilizando Sweetalert, desde las páginas de «List», pero al utilizarlas desde página de diálogo, como «View», teniendo que «cerrar» esa página, me daba y da, muchos problemas, porque destruyo el registro antes de terminar el diálogo de Sweetalert, ya que es asíncrono y da control a otra parte del programa sin haberse terminado el diálogo. Lo he cambiado por la función «Dialog» de «Material UI»

Objetivo

Tener un ejemplo completo de React y FullCalendar con similares características que este ejemplo que había hecho en PHPRunner, Guía 64. También, disponer de la parte de SERVER sin depender/conectarse con PHPRunner.

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

Si estas interesado en este tema, sigue leyendo el artículo en este enlace.

Esta biblioteca de JavaScript para definir la información de Calendario es un clásico y la hemos usado mucho en los desarrollos de PHPRunner.

En React, está toda ella disponible y sirve todo lo que hemos aprendido de su uso en PHPRunner y es, todavía, más sencillo explotar todas sus funcionalidades desde el entorno de React.

En este artículo facilito 2 ejemplos (de la propia biblioteca), pero adaptados a la última versión de React.

Aunque espero que ya conozcáis cómo se puede saber las librerías instaladas utilizando el fichero «package.json«, voy a explicar qué es lo que he instalado en cada caso.

Objetivo

Comprobar la integración de FullCalendar en el entorno de React.

Demo1:    https://fhumanes.com/fullcalendar-react/

Demo2: https://fhumanes.com/scheduler-react/

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

Como había indicado en la Guía anterior he realizado este ejemplo utilizando la funcionalidad de este otro artículo de mostrar la integración de AnyChart con los Snippet de PHPRunner.

El ejemplo es muy sencillo, porque así entiendo que es más sencillo para la comprensión de los desarrolladores que empiezan a utilizar React, pero creo que explica con detalle la integración y potencia de la utilización de esta biblioteca gráfica de JavaScript (AnyChart).

Objetivo

Integrar en una misma página varios gráficos producidos por AnyChart ( Semi-donut y Mapas Temáticos), produciendo los cambios de datos por la selección de un campo Lookup.

DEMO: (versión React) https://fhumanes.com/map_anychart-react
DEMO: (versión PHPRunner) https://fhumanes.com/map_anychart

Si estas interesado en este artículo, mediante este enlace tendrás la explicación y los fuentes.