Qwik — Trabajando con Componentes React
Claves para poder usar componentes React de proyectos propios o de librerías de componentes
En este artículo os voy a enseñar a utilizar React dentro de Qwik utilizando Qwik React.
La ventaja principal de utilizar Qwik React es que vamos a poder utilizar componentes y bibliotecas existentes de React dentro de Qwik, tanto de nuestros proyectos o paquetes NPM que podamos encontrar, dando posibilidad que podamos migrar a Qwik proyectos React con cierta facilidad.
Esto nos va a permitir aprovechar el gran ecosistema de componentes y bibliotecas de React, como podrían ser Material UI, Threejs, y React Spring entre muchas más opciones.
También es una manera inmejorable de obtener los beneficios que nos proporciona Qwik sin tener que reescribir completamente nuestra aplicación de React.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Índice del contenido a trabajar en el artículo
- Integrando React en Qwik: Instalación y configuración.
- qwikify$ — Convierte componentes React en Qwik
- Primer ejemplo Básico — Componente de saludo
- Componente React usando props.
- Hidratando un componente React
- Hidratando componentes React
- Usar librería React publicada en NPM — react-day-picker
Integrando React en Qwik: Instalación y configuración
Al igual que la mayoría de las bibliotecas o frameworks de Frontend de JavaScript, React está utilizando la hidratación, lo que tiene sus desventajas y puede ser más costoso de lo que piensas.
Qwik no necesita hidratación al cargar. Es solo HTML puro. Esto hace que Qwik sea más rápido para cargar las interfaces de usuario, con las cuales los usuarios pueden comenzar a interactuar.
Esto es algo a tener muy en cuenta al considerar incluir componentes de React en tus aplicaciones Qwik.
En este primer artículo que escribí sobre Qwik os muestro las características principales de Qwik haciendo una comparativa con tecnologías Frontend como Angular, React y Vue. Si no lo habéis leído, os invito a hacerlo junto con toda la colección de artículos que he ido creando en orden.
Qwik React es una herramienta que nos va a permitir utilizar componentes de React en Qwik, incluyendo todo el ecosistema de paquetes de componentes como Material UI, Threejs y React Spring entre otras muchas opciones como se ha mencionado al inicio del artículo.
Antes de comenzar con la integración debemos de tener el proyecto de Qwik creado y listo para iniciarlo con lo básico. Esto ya lo sabemos hacer y si no, os invito a mirar el primer artículo mencionado.
Hay dos formas de integrar React en Qwik:
- Manual: Completando todos los pasos y configuraciones que os voy a exponer.
- Automática: Mediante un comando ejecutado y varias selecciones te realiza todas las configuraciones y te añade varios paquetes de componentes como
@emotion/react,@emotion/styled,@mui/materialy@mui/x-data-grid
Yo os voy a enseñar a realizarlo todo de manera manual, para no instalar esas dependencias ni generar los ejemplos y así, podemos entender todo el proceso paso a paso. Si quisierais hacerlo de manera automática añadiendo esas dependencias, solo tenéis que ejecutar el comando y seguir las instrucciones:
npm run qwik add reactComenzamos con la integración de React en Qwik, lo primero que vamos a realizar es instalar las dependencias necesarias de React y el plugin @builder.io/qwik-react mediante el siguiente comando (pongo las versiones para trabajar con la versión actual (20/04/2023) de Qwik, esto en el futuro cambiará, pero lo que es el procedimiento no) :
npm install @builder.io/qwik-react@0.5.0 @types/react@18.0.35 @types/react-dom@18.0.11 react@18.2.0 react-dom@18.2.0 --forceSe instalarán las dependencias y se registrará esta información en el package.json
Tenéis que tener en cuenta que esto NO ES UNA EMULACIÓN de React, si no que estará usando la librería actual de React
Ahora vamos al fichero vite.config.ts y pasamos de esto:
import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig(() => {
return {
plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
preview: {
headers: {
'Cache-Control': 'public, max-age=600',
},
},
};
});A añadir el plugin Vite para integrar React en nuestra app:
import { defineConfig } from 'vite';
import { qwikVite } from '@builder.io/qwik/optimizer';
import { qwikCity } from '@builder.io/qwik-city/vite';
import { qwikReact } from '@builder.io/qwik-react/vite';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig(() => {
return {
plugins: [
qwikCity(), qwikVite(), tsconfigPaths(),
// Lo que añadimos
qwikReact()
],
preview: {
headers: {
'Cache-Control': 'public, max-age=600',
},
},
};
});Llegados a este punto, ya tenemos la instalación y configuración inicial del plugin Qwik-React añadido y lo que tenemos que hacer es pasar al siguiente punto donde vamos a crear un componente en React super sencillo y vamos a integrarlo en Qwik fácilmente usando la función qwikify$ después de entender su funcionamiento.
qwikify$ — Convierte componentes React en Qwik
Es la función que se usa en el plugin Qwik React para usar componentes existentes de React y envolverlos en esta función qwikify$.
Su funcionamiento es bien sencillo. qwikify$ creará un componente Qwik que se puede utilizar dentro de Qwik y que convertirá el componente de React en una isla que te permitirá la libertad de ajustar cuando el componente de React debe hidratar.
La función qwikify$ es exportada de @builder.io/qwik-react y convierte los componentes de React en componentes de Qwik que se pueden utilizar en toda la aplicación, lo que va a permitir que Qwik implemente la hidratación parcial de los componentes de React.
No se pueden usar componentes de React en Qwik sin convertirlos primero para eliminar el patrón de hidratación de React, que no es compatible con Qwik. Recordadlo, para convertirlo a Qwik usamos qwikify$().
Otra cosa importante a recordar es asegurarse de que el archivo que contiene su componente de React tenga esto:
/** @jsxImportSource react */Sabiendo estos detalles, vamos a la acción, a implementarlo con diferentes casos de uso reales y como siempre, vamos a empezar por una funcionalidad muy básica, que en este caso será crear un componente React básico con un saludo inicial como:
Hello From React
Primer ejemplo Básico — Componente de saludo
Siguiendo lo anterior, plasmamos lo aprendido en este punto donde empezamos con un componente React llamado react.tsx dentro de src/integrations/react/hello junto con el comentario al inicio del fichero con el tag de @jsxImportSource react, muy muy importante. Sin en el, no podremos usarlo:
/** @jsxImportSource react */
// Creación del componente React de manera estándar
export function HelloReact() {
return <div>Hello from React</div>;
}Estos componentes los vamos a añadir en src/integrations/react con el objetivo de tenerlos más a mano. Crear el directorio siguiendo esa ruta y seguimos.
Y para convertirlo a Qwik, debemos de añadir el uso de la función qwikify$() trayendo el componente del fichero react.tsx. Esto lo plasmamos así:
import { qwikify$ } from '@builder.io/qwik-react';
// Usamos en el componente de react creado
import { HelloReact } from './react';
// Convertimos el componente React en un componente Qwik
export const QHelloReact = qwikify$(HelloReact);A los componentes que convertimos a Qwik, le ponemos una “Q” por delante y luego el nombre del componente original, para que sean más fáciles de identificar.
Ahora vamos a src/routes/index.tsx y lo añadimos después de eliminar todo el contenido actual junto con el saludo ya desde el propio proyecto de Qwik:
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
// Importamos el componente de React con el saludo adaptado a Qwik
import { QHelloReact } from "~/integrations/react/hello";
export default component$(() => {
return (
<div class="section bright">
<div class="container center">
<h2>Saludo con React</h2>
<QHelloReact />
<h2>Saludo con Qwik</h2>
Hello from Qwik
</div>
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};Y este sería el resultado, como se puede apreciar, funciona sin ningún problema:
El paquete @builder.io/qwik-react exporta la función qwikify$() que nos permite convertir componentes de React en componentes de Qwik que podemos usar en toda nuestra aplicación.
A recordar: NO PODEMOS usar componentes de React en Qwik sin antes convertirlos utilizando
qwikify$(). Aunque los componentes de React y Qwik se ven similares, son fundamentalmente muy diferentes.
Los componentes de React y Qwik no deben mezclarse en el mismo archivo.
Por esa razón hemos añadido el directorio src/integrations/react para poder albergar esos componentes y así usarlos. Os recomiendo que coloquéis vuestros componentes de React en esa ubicación para facilitar su gestión y para acostumbrarnos a trabajar de una forma más ordenada.
Ya hemos hecho el ejemplo más básico, pasamos al ejemplo muy parecido a este, pero con un componentes que tiene props.
Componente React con props
Vamos al apartado donde estamos añadiendo los componentes de React y creamos un nuevo directorio dentro de src/integrations/react que llamaremos custom-hello y dentro de este nuevo directorio crearemos dos ficheros como antes.
Los ficheros serán react.tsx donde definimos el componente de React y el fichero index.tsx donde vamos a coger el componente React para convertirlo en un componente Qwik para poder usarlo con las características de este framework.
Añadimos el componente con el saludo personalizado mediante el uso de props en el fichero react.tsx:
/** @jsxImportSource react */
export function HelloCustomReact(props: {name: string}) {
return <div>Hello {props.name} from React</div>;
}Y ahora realizamos la conversión en el fichero index.tsx
import { qwikify$ } from '@builder.io/qwik-react';
import {HelloCustomReact} from './react';
// Convertimos el componente React en un componente Qwik
export const QHelloCustomReact = qwikify$(HelloCustomReact);Ahora para usarlo sería lo mismo como se ha hecho con el componente básico, pero tendremos que añadirle el prop name el que se ha definido en el componente original de React.
Antes de nada en el propio vamos a añadirle un componente aparte src/routes/index.tsx que recoge el prop name como el de React, pero en este caso un componente Inline de Qwik que será lo siguiente:
export const HelloCustomQwik = (props: { name: string }) => (
<div>Hello {props.name} from Qwik</div>
);Y teniendo esto y el componente de React convertido a Qwik, el fichero src/routes/index.tsx se queda de la siguiente forma:
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
// Importamos el componente de React con el saludo adaptado a Qwik
import { QHelloCustomReact } from "~/integrations/react/custom-hello";
export const HelloCustomQwik = (props: { name: string }) => (
<div>Hello {props.name} from Qwik</div>
);
export default component$(() => {
return (
<div class="section bright">
<div class="container center">
<h2>Saludo con React</h2>
<QHelloCustomReact name="Anartz" />
<h2>Saludo con Qwik</h2>
<HelloCustomQwik name="Anartz" />
</div>
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};Si guardamos los cambios y vamos a la ruta principal, se podrá observar el siguiente resultado:
Aplicando hidratación a los componentes de React
Los ejemplos anteriores muestran cómo SSR el contenido estático de React en el servidor.
El beneficio de esto es que ese componente nunca se volverá a renderizar en el navegador y, por lo tanto, su código nunca se descargará al cliente.
Esto en principio, si es un componente que no cambia su estado, perfecto, pero, ¿Qué ocurre si el componente debe ser interactivo y, por lo tanto, necesitamos descargar su comportamiento en el navegador?
Para ver un caso particular, vamos a trabajar con un componente, que es el típico contador que usamos para aprender a darle vida a un componente y a realizar cambios de estado dependiendo de nuestras acciones.
Comencemos con la construcción de un contraejemplo simple en React.
Creamos el directorio llamado counter con los dos ficheros que estamos usando por directorio, el correspondiente a la funcionalidad de React (react.tsx) y al que llamamos index.tsx donde lo convertimos en un componente de Qwik
src/integrations/react/counter/react.tsx
/** @jsxImportSource react */
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return (
<button className="react" onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}Y ahora lo convertimos en un componente Qwik en el fichero src/integrations/react/counter/index.tsx:
import { qwikify$ } from "@builder.io/qwik-react";
import { HelloCustomReact } from "./react";
// Convertimos el componente React en un componente Qwik
export const QHelloCustomReact = qwikify$(HelloCustomReact);Vamos al fichero index.tsx correspondiente de la carpeta routes (src/routes/index.tsx) y usamos ese componente retirando los anteriores utilizados del saludo personalizado:
import { component$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import { QCounter } from "~/integrations/react/counter";
export default component$(() => {
return (
<div class="section">
<div class="container center">
<h2>Contador</h2>
<QCounter />
</div>
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};Guardamos los cambios y vamos a la ruta principal:
Esta será la apariencia que tendrá nuestro proyecto:
Ahora si hacemos click sobre el botón, debería de cambiar e ir aumentando el contador.
Accionamos una, dos,…¡muchas veces! ¡No cambia! ¿Cuál es el motivo de que no funcione correctamente nuestro componente de React? Un único motivo, que no está hidratado y es algo que tenemos que hacer, hidratarlo.
Explicándolo con más detalles, esto se debe a que el componente de React no se ha descargado y, por lo tanto, el componente no se ha hidratado y eso hace que sea un componente muerto, sin vida. Necesitamos decirle a Qwik que descargue el componente de React y lo hidrate, para que pueda cambiar el valor del contador al accionarlo.
Para poder realizar esto, debemos especificar las condiciones bajo las cuales queremos hacerlo mediante la propiedad eagerness y el valor hover.
En este caso, queremos descargar el componente cuando el usuario se desplace sobre el botón y lo hacemos mediante la siguiente opción en src/integrations/react/counter/index.tsx :
...
// Especificamos eagerness para hidratar el componente cuando ponemos el cursor
// del ratón encima del botón.
export const QCounter = qwikify$(Counter, { eagerness: 'hover' });Con esta opción tendremos otras tres situaciones en las que se hidrata, siendo las cuatro disponibles las siguientes:
idle: Ejecutará el código cuando se active la siguiente devolución de llamada inactiva (callback idle).load: Ejecute el código lo antes posible. Esto suele ser justo después del eventoDOMContentLoaded.hover: Al poner el cursor sobre el elemento del componente. Si no podemos el cursor sobre ese elemento, no se hidrata y no descargamos información que no estamos requiriendo.visible(opción por defecto): Ejecuta el efecto cuando el componente se vuelva visible. Esta es una opción preferida porque retrasa la ejecución del efecto hasta que el componente sea visible en lugar de hacerlo con entusiasmo al iniciar la aplicación (estamos tratando de minimizar la cantidad de código que la aplicación ejecuta al iniciarse).
Y probando el ejemplo con ese ajuste podemos observar que haciendo click en el botón, el contador se suma ya que antes de hacer click hemos puesto sobre el botón el cursor y esto ha hecho que se hidratase y así poder darle vida a este componente:
Bien, hemos conseguido que actué como un componente de Qwik y nos dé resultados como debe de ser.
Analizando el resultado en la consola del navegador
Para ver lo que sucede en esta situación, os invito a que abráis la consola del navegador para ver el comportamiento de nuestra aplicación.
Lo que queremos ver es como se procesa el componente de React al poner el cursor del ratón sobre el botón del contador, que es lo que es el componente de React.
Estando en la consola, vamos a Red (Network) (1), refrescamos la página lo primero y dejamos seleccionado únicamente los ficheros Javascript con JS (2) y en el apartado de ficheros descargados (3), son lo ficheros que se han descargado y que necesitamos en este momento.
Si no ponemos el cursor sobre el botón, como no necesitará hacer uso de el, no lo descargará.
Ahora pensamos en que si queremos descargarlo, lo primero, vamos a eliminar la información de los ficheros descargados para tenerlo todo limpio (1) y como podemos observar en el apartado donde se visualizaban los ficheros (2), ahora no tenemos nada registrado:
Vamos a forzar para que se descarguen los ficheros asociados al botón del contador.
Donde se puede observar que tenemos el fichero correspondiente al componente de React junto con el de la conversión a un componente de Qwik. Aparte de estos dos ficheros, se descargan otros ficheros necesarios que harán que todo funcione correctamente.
En este ejemplo, hemos abierto la consola para mostrar lo que sucede detrás de escena. Cuando pasamos el cursor sobre el botón (1) , podemos ver (2) que el componente React se procesa junto con otros ficheros necesarios (3).
Los ficheros que hemos usado para crear el componente de Qwik desde el componente de React podemos observarlos que se han cargado (4).
Si hacéis click sobre ellos de manera individual, podremos ver que es lo que se ha definido antes (prácticamente igual, se identifica bien)
En qcounter_qwikify,...
En react.tsx
Esta situación se está dando ya que Qwik hidrata el componente al pasar el cursor del ratón por encima. Ahora que el componente está hidratado, puede interactuar con él y actualizará correctamente el conteo.
Al otorgar la propiedad eagerness y el valor hover a qwikify$(), le estamos permitiendo ajustar las condiciones bajo las cuales se hidrata el componente, lo que afectará el rendimiento de inicio de su aplicación.
Aplicando hidratación a más de un componente React
En el ejemplo anterior, teníamos una sola isla que retrasamos en la hidratación mediante el componente del contador.
En este caso particular, vamos a trabajar con dos componentes y de la forma que se va a hacer con dos, sería aplicable a más de dos componentes, por lo que entendiendo lo siguiente vamos a poder trabajar perfectamente con proyectos más acordes a la realidad.
Al tener dos componentes tendremos múltiples islas y esto hará que haya una necesidad de comunicación entre ellas.
Este ejemplo muestra cómo hacer la comunicación entre islas con Qwik. Creamos un nuevo directorio en el apartado de integraciones src/integrations/react/button-display
Y en el apartado de la aplicación React añadimos en src/integrations/react/button-display/react.tsx:
/** @jsxImportSource react */
export function Button({ onClick }: { onClick: () => void }) {
console.log('React <Button/> Render');
return <button onClick={onClick}>+1</button>;
}
export function Display({ count }: { count: number }) {
console.log('React <Display count=' + count + '/> Render');
return <p className="react">Count: {count}</p>;
}Y en el src/integrations/react/button-display/index.tsx, lo convertimos a Qwik:
import { qwikify$ } from '@builder.io/qwik-react';
import { Button, Display } from './react';
export const QButton = qwikify$(Button, { eagerness: 'hover' });
export const QDisplay = qwikify$(Display);Como se puede observar en el código, hemos aplicado la propiedad eagerness únicamente en el componente QButton, ya que va a ser el componente que va a interactuar y por lo tanto, el que debemos de hidratar para que funcione correctamente.
En cambio, QDisplay, podríamos decir que es un componente “tonto”, que solo va a recibir información desde los props con el valor count y con ese valor hará las actualizaciones correspondientes. Eso si, estará unido al botón ya que esté se modificará en base a los cambios realizados por las acciones en QButton
Ahora teniendo esto, vamos a la ruta principal y sustituimos el componente QCounter utilizado anteriormente para usar estos dos componentes y aparte añadimos un valor con useSignal, para realizar control el estado del valor del contador.
Con todo esto podremos ver su funcionamiento que es correcto, que se comunican correctamente:
import { component$, useSignal } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
import { QButton, QDisplay } from "~/integrations/react/button-display";
export default component$(() => {
console.log('Qwik Render');
const count = useSignal(0);
return (
<div class="section">
<div class="container center">
<h2>Comunicación con dos componentes de React</h2>
<QButton
onClick$={() => {
console.log('click', count.value);
count.value++;
}}
/>
<QDisplay count={count.value} />
</div>
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};Ahora si vamos a la ruta principal y esto será lo que veamos cuando ejecutemos la acción de poner el cursor sobre el botón y realizar varios clicks con la aplicación ya hidratada:
(1)Ejecución del botón después de poner el cursor, recibir la hidratación e interactuar.(2)El componente de React convertido a Qwik para la funcionalidad del botón.(3)Donde están los dos componentes, el botón y el componente donde se muestra el valor del contador.(4)El componente de React convertido a Qwik para la funcionalidad del elemento para mostrar el resultado del contador.
Con esto, ya podríamos hacer funcionar en Qwik con 2 o más componentes de React respetando su funcionalidad.
Pasamos al siguiente punto, que será el último donde os enseño a hacerlo con un paquete de NPM cualquiera aprovechando que React tiene infinidad de paquetes.
Usar librería React publicada en NPM — react-day-picker
Este paquete de NPM lo he encontrado un poco curioseando para este artículo.
Me ha parecido una opción super interesante, ya que es un paquete con una funcionalidad útil, muy bien documentado (por lo que lo podremos exprimir) y que a la vez nos va a servir para enfocarlo en el artículo y así en el futuro poder usarlo en cualquier proyecto que necesite esta funcionalidad.
Os dejo los enlaces del paquete y su documentación para que profundicéis, yo me quedaré con lo básico para cumplir el objetivo.
Lo que vamos a hacer lo podéis encontrar aquí más detallado. Seguimos los siguientes pasos:
Instalar las dependencias necesarias
npm install react-day-picker date-fnsUna vez instaladas las dependencias, vamos al directorio src/integrations/react donde estamos añadiendo todos los componentes de React para realizar la conversión a Qwik y creamos el directorio date-picker (src/integrations/react/date-picker) o como le queráis llamar junto con los dos fichero tsx que serán react.tsx y el fichero index.tsx
Bien, una vez creados los ficheros añadimos lo siguiente en react.tsx donde estaremos configurando el componente de React basándonos en esta referencia (os recomiendo que después juguéis con otras opciones):
/** @jsxImportSource react */
import { format } from 'date-fns';
import { useState } from 'react';
import { DayPicker } from 'react-day-picker';
export function DayPickerReact() {
const [selected, setSelected] = useState<Date>();
let footer = <p>Please pick a day.</p>;
if (selected) {
footer = <p>You picked {format(selected, 'PP')}.</p>;
}
return (
<DayPicker
mode="single"
selected={selected}
onSelect={setSelected}
footer={footer}
/>
);
}Y lo que respecta a index.tsx, ahora en la propiedad eagerness, añadiremos la opción visible, para que se hidrate cuando sea visible el contenido de la ruta donde estará el componente.
import { qwikify$ } from "@builder.io/qwik-react";
import { DayPickerReact } from "./react";
// Convertimos el componente React en un componente Qwik
export const QDayPickerReact = qwikify$(DayPickerReact, {eagerness: 'visible'});Como veis, la conversión es igual a que si la hiciésemos de un componente local propio como se ha visto anteriormente.
Ahora vamos a src/routes/index.tsx y lo que tenemos que hacer es crear un componente nuevo usando el componente QDayPickerReact para añadirle los estilos del componente (como se indica en su documentación). Quedará de la siguiente forma:
import { component$, useStyles$ } from "@builder.io/qwik";
import type { DocumentHead } from "@builder.io/qwik-city";
// el componente de NPM ya convertido en Qwik
import { QDayPickerReact } from "~/integrations/react/date-picker";
// Estilos del componente que acabamos de incluir en el proyecto
import dayPickerStyles from "./../../node_modules/react-day-picker/dist/style.css?inline";
// Combinamos los estilos y el componente de Qwik
export const DayPickerQwik = component$(() => {
useStyles$(dayPickerStyles);
return <QDayPickerReact />;
});
export default component$(() => {
return (
<div class="section">
<div class="container center">
<h2>Trabajando con un paquete NPM - React Day Picker</h2>
<DayPickerQwik />
</div>
</div>
);
});
export const head: DocumentHead = {
title: "Welcome to Qwik",
meta: [
{
name: "description",
content: "Qwik site description",
},
],
};Y este será el resultado actual (en el momento de realizar el artículo, es 20/04/2023 como se indica en el calendario):
Es evidente que el estilo no es muy chulo, pero ese no es el objetivo. Si probamos la funcionalidad, seleccionando cualquier día se añadirá abajo donde pone el texto Please pick a day. Voy a seleccionar el 27/04/203 por ejemplo siendo el siguiente resultado:
Como podéis observar, esto funciona perfectamente y con esto, se puede decir que ya hemos cumplido el objetivo asignado a este apartado y llegamos al final del artículo.
Conclusión
Hemos trabajado con la opción de integrar componentes de React en diferentes formas, con lo que esto nos abre las puertas a poder hacer una migración menos dolorosa a Qwik de desarrollos de React sin tener que hacer un trabajo tan duro.
Llevamos muchos artículos, todos los voy añadiendo en la lista principal del curso de Qwik y me gustaría saber que os gustaría ver, ya que apenas hay feedback y sin el, muchas veces es difícil saber que os pueda interesar.
Iré haciendo artículos de otras temáticas también, pero como digo, sin feedback, es difícil saber que os produce curiosidad e inquietud.
Quedo atento a vuestras publicaciones de proyectos que vayáis creando, me gustaría verlos y daros mi punto de vista.
Todos los artículos publicados del curso los encontraréis en la siguiente lista que iré actualizando semanalmente y estableciendo el orden natural recomendado:
Este será el código de lo trabajado en este artículo
Presencia en redes sociales
Podéis encontrarme en las siguientes redes.
