Componentes Qwik

Lo primero que vamos a hacer es eliminar las rutas y los archivos de Qwik que venían con la plantilla. Vamos a dejar casi vacío el index.tsx que está dentro de routes y el layout.tsx que tiene al lado.

   // Path: src/routes/index.tsx
   import { component$ } from "@builder.io/qwik";
   import type { DocumentHead } from "@builder.io/qwik-city";
   
   export default component$(() => {
     return (
       <div>
         <h1>Components</h1>
       </div>
     );
   });
   
   export const head: DocumentHead = {
     title: "Welcome to Qwik",
     meta: [
       {
         name: "description",
         content: "Qwik site description",
       },
     ],
   };
          

Esta última parte, la del DocumentHead, también la podemos eliminar, ya que ahora mismo el foco no está en aprender a hacer SEO con Qwik, pero para que lo sepas, es aquí donde puedes encargarte de las metatags.

   // Path: src/routes/layout.tsx
   import { component$, Slot } from "@builder.io/qwik";

   export default component$(() => {
     return <Slot />;
   });
   
          

A continuación, dentro de la carpeta components en src vamos a crear una nueva carpeta llamada header. Crea dentro de esa carpeta un archivo llamado index.tsx. Ahí dentro podemos crear nuestro primer componente. Si estás usando VSCode y tienes la extensión que recomendé al principio, entonces haciendo q- debería salirte la sugerencia del snippet de código.

Tienes dos formas de declarar el componente:

    // Path: src/components/headline/index.tsx
    import { component$ } from "@builder.io/qwik";

    // Forma 1: Con export default
    export default component$(() => {
      return <div>Hello Qwik!</div>;
    });

    // Forma 2: Con export const y el nombre del componente
    export const Headline = component$(() => {
      return <div>Hello Qwik!</div>;
    });
      
          

Elijas la forma que elijas, ya podrás importar el archivo en nuestro index.tsx dentro de routes. Para hacer un import de forma automática, usa el símbolo < y empieza a escribir el nombre del componente, en este caso Headline, y te deberá salir la sugerencia de import.

IMPORTANTE: es cierto que ver tanto mismo archivo llamado index.tsx puede llegar a causar confusión. Cuesta un poco acostumbrarse al principio, pero el orden establecido a través del sistema de rutas con las carpetas compensa.

En el vídeo de la explicación con los componentes hablamos además de qué es la component rendering function, de las limitaciones que tiene el return al solo permitir un JSX node, y de cómo podemos solventar eso a través de fragments.

En la siguiente lección vamos a crear componentes dinámicos, y vamos a hablar entonces de un tema muy importante: props.