Os voy a enseñar un recurso, si por lo que sea, amigos, utilizáis React, ojo a este pedazo de recursos, porque está muy interesante, React Scan.
A ver, seguro si habéis utilizado React, pues conocéis la React Developer Tools, y por ejemplo, la React Developer Tools, no está mal, está bastante bien,
tienen esto de profiler, aquí, que pueden, aquí, en general, aquí, que cada vez que hagan alguna cosa, veis que aparece como unos cuadrados,
y eso es como todo lo que se está reactualizando en React, que esto es como lo que se vuelve a re-renderizar.
No está mal, pero te obliga a tener una extensión.
Y ojo con esta, porque me ha parecido muy interesante, que se llama React Scan, que es de los creadores de Million.deb,
que esto, al final, se ha quedado un poco de aquella manera.
Million.deb es una serie de herramientas, ya digo serie de herramientas porque hay un montón de cosas.
Lo que hace es escanear tu proyecto de React y te va a decir qué partes podrías optimizar.
Entonces, tienes la parte del Inter, pero también tienes una biblioteca, tienes una herramienta que te convierte el código,
también tienes la parte del Virtual DOM, o sea, que tienes como diferentes cosas que te van a ayudar como a mejorar el rendimiento de tus proyectos de React.
O sea, que está bastante interesante.
Y una de esas herramientas que han sacado ahora, que es totalmente gratuita, es esta de React Scan.
Y lo interesante es que no necesitas instalar absolutamente nada.
Simplemente, ves aquí, script, esto lo copias, lo pones arriba en cualquier proyecto, ya sea de Next.js o lo que sea, o sea, simplemente lo pones ahí,
y ya te lo pones. De hecho, lo podrías utilizar en cualquier proyecto, este de Airbnb, para que veáis.
Voy a desactivar aquí la extensión de React Developer Tools, ¿vale?
La voy a desactivar para que desaparezca, que veo que no desaparece.
A ver ahora. Ahora. Ya no tengo la React Developer Tools.
Pues fijaos, que esto además es un trucazo para un montón de otras cosas.
Fijaos, voy a editar el HTML, voy a poner aquí los Overwrites, los voy a activar,
y vamos a actualizar el HTML.
Los Overwrites es para poder hacerle cambios a la página, como por ejemplo al HTML.
A ver si soy capaz aquí, ¿vale?
Y poder ponerle aquí un script.
Le ponemos el script.
Ahí se pone el script.
Ah, espérate, porque no me lo ha activado los Overwrites.
A ver, ti, ti, ti.
A ver, ahora sí. Vale, ahora sí que me los ha activado los Overwrites.
Vale, pues vamos por aquí.
Bueno, voy a quitar todo esto para que se vea más limpio.
Vale, tú, tú, tú.
Airbnb, Index HTML.
Pues lo bueno de los Overwrites es que lo que podéis hacer es editar el HTML,
meterle un script, guardar los cambios, actualizar, y ahora, ¿veis?
Ahora está cargando la página con ese script, que está bastante chulo.
Y veis que se va actualizando.
Y está bastante bien, ¿eh?
Porque, fijaos, ahora si abres aquí, deberíamos ver...
Mira, lo voy a hacer más grande para que lo veáis bien.
Si le doy aquí, ¿veis que ha aparecido toda la parte que se ha ido actualizando?
Si le doy aquí, pues podéis ver que lo que estaría enfocando es como lo que se actualiza,
lo que se está volviendo a renderizar.
Y mola porque además aparecen como los nombres.
Obviamente con esto puedes encontrar un montón de errores o cosas que deberías optimizar.
Porque fíjate que le estoy dando a este botón y se está volviendo a renderizar los botones de atrás,
que no tiene ningún tipo de sentido.
O todo esto se está renderizando todo cada vez que cambio esto.
No tiene mucho sentido, ¿no?
Se podría mejorar bastante el rendimiento de esta página con esto.
Están trabajando en una extensión que, si no me equivoco, ya la podéis instalar.
También se puede instalar.
Ya, pero esto es lo que hemos hecho, ¿no?
O sea, esto es lo que hemos hecho.
Ah, también se puede instalar de esta forma.
Claro, pero no tengo acceso a Airbnb para instalarla.
Están trabajando en una extensión que lo pone por aquí.
¿Ves? Está por aquí.
Midu, pruébalo con un WordPress para ver cómo se actualiza.
Pero lo que necesitas es que tenga React.
Si no tiene React, pues no va a funcionar.
¿Vale?
Lo interesante es que la extensión es opcional.
O sea, que podéis importar tanto el script, ponerlo arriba del todo.
Añadir el script.
Lo ponéis en un momento.
Lo podéis poner solo en modo desarrollo.
O podéis importar también y crear con este componente.
Pues poner este scan, ponerlo por ahí y ya lo tendríais.
O sea, muy interesante para ver qué es lo que se está renderizando en vuestros proyectos.
Y funciona muy bien y se ve visualmente muy interesante.
Así que os lo recomiendo un montón.
Y además os lleváis ahí el truquillo de cómo inyectar código en vuestras páginas web.
Y otro recurso que me ha parecido brutal.
Porque esto, es que esto seguro que te ha pasado alguna vez en la vida.
Seguro que alguna vez te ha pasado en la vida.
Que has querido crear un formulario con más de un paso.
¿Sabéis formularios que tienen más de un paso?
Que son formularios que quedan muy bonitos.
Como por ejemplo este, ¿no?
Que pones aquí.
Vale, pues este es mi nombre.
La edad, 33.
Le das a Next.
Y aquí hay otro paso del formulario, ¿no?
O puedes ir para atrás y que vuelva a aparecer el formulario de antes, ¿no?
Bueno, esto yo lo he tenido que hacer y programar mil millones de veces.
Fíjate, como que hay diferentes pasos.
Le das aquí, Next.
Y fíjate lo que te da esto de resultado.
Te da el objeto con toda la información que has tenido, ¿vale?
Pues todo lo que habéis visto.
Y si os digo que lo que habéis visto está programado con JSON.
Pues es que Formity, aquí lo tenéis.
Además lo podéis hacer dinámico, con variables, con condicionales.
Es tremendo, ¿eh?
Fijaos, tenéis que crear el esquema.
En el esquema tenéis el formulario que le tenéis que poner los valores por defecto.
Por ejemplo, valor por defecto trabajando que sea true.
Vale, por eso este paso, si está trabajando, ya por defecto está hasta el true.
Tienes cómo se debería renderizar, a dónde debería ir en el siguiente paso, cómo es el layout.
Y todo esto son JSONs.
Las condiciones, por ejemplo, si estás trabajando, entonces en el siguiente paso voy a preguntarle en qué empresa estoy trabajando.
Si no está trabajando, en el siguiente paso le voy a preguntar si está buscando trabajo.
¿Habéis visto? Como condiciones, tremendo.
Es genial porque como podéis ver está todo basado en JSON.
Y cada una de las cosas le dices, vale, esto debe devolver cuál es el siguiente paso y tal.
Y una vez que terminas, le das al Next, pues tienes todos los valores del formulario de los multipasos como lo has hecho.
Obviamente esto tú lo puedes guardar una vez que terminas.
Puedes traerte la información porque es dinámico.
Por lo tanto, puedes traerte el esquema de un backend, lo podrías traer, y también lo puedes guardar a un backend.
Esto yo realmente hacer formularios multipasos llevo la vida haciéndolo.
Pero el problema es que normalmente con JSON también lo hacía.
Pero el problema normalmente es que tienes que ponerte de acuerdo con el formato de hacerlo.
Tienes que programar tú todas las condiciones y tal.
Y esto, que parece bastante fácil, son muchas, pero muchas, muchas líneas de código.
Y la verdad es que me ha gustado muchísimo el cómo está, que lo puedes utilizar con React o sin React.
No es obligatorio al final que lo puedes utilizar con React.
Aunque tiene algunos componentes que están hechos para React.
Puedes utilizar tus propios componentes, por ejemplo.
¿Ves? Aquí tendrías algunos componentes...
Bueno, estos componentes que se ven son suyos propios.
De hecho, aquí tenéis templates incluso.
Templates hechos con React y con Tailwind.
Pero de nuevo, es opcional utilizar React y Tailwind.
Estos son los templates que ellos ya tienen hechos.
Con botones, con los selects, con estos inputs.
Incluso algunos ya preestablecidos.
Para que si por lo que sea no queréis empezar desde cero y queréis hacer un ejemplo,
pues también lo tenéis que hacer.
Así que está tremendo, muy interesante.
La documentación muy bonita.
Aquí tenéis todos los componentes, cómo funciona el esquema.
Funciona con variables también.
O sea, os explica cómo hacer animaciones también con Framework Motion.
A ver si aparece, no aparece la demo.
Ah, no aparece...
No sé dónde lo he visto, pero en algún sitio he visto con animaciones.
Con tener un progress bar.
Pero bueno, tenéis aquí las animaciones en un repositorio de GitHub.
Con campos condicionales.
O sea, tremendo, ¿eh?
Tremendo.
Me encanta.
Está muy bien.
Además, con un JSON schema.
Muy bien documentado.
Os lo recomiendo mucho si tenéis que hacer un formulario multipasos.
Para que no lo tengáis que hacer vosotros.
Que es un rollazo.
Es un rollazo esto hacerlo.
Así que ahí os lo dejo.
Que está bastante, bastante bonito.
Y esto lo tengo que hacer mil millones de veces.
Y qué bien que esté tan bien hecho.
O sea, tan bien hecho.
Lo hubiera utilizado demasiado.
Sin ninguna duda.