Props

Denominamos props a aquellos parámetros que le podemos pasar a los componentes. En la lección anterior hemos visto como hacer un componente, importarlo y llamarlo escribiendo tan solo <Headline />. Aunque esto nos sirva para algunos componentes (podríamos guardar los svg de esta forma), en la mayoría de las ocasiones querremos pasar algún que otro argumento.

Por ejemplo, podríamos hacer un Headline algo más dinámico de la siguiente forma:

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

    export default component$(({ text }: { text: string }) => {
      return <h1>{text}</h1>;
    });
          

Lo importamos donde queramos utilizarlo pasándole ahora el texto que queramos pasarle.

   // Path: src/routes/index.tsx
   import { component$ } from "@builder.io/qwik";
   import type { DocumentHead } from "@builder.io/qwik-city";
   
   export default component$(() => {
     return (
       <div>
         <Headline text="Este headline me representa" />
       </div>
     );
   });
  
          

Si no estás familiarizado con TypeScript, te recomiendo que le eches un vistazo a cómo funciona el tema de los types y/o las interfaces ya que el ejemplo de arriba es muy sencillo, pero te alegrará ganar en legibilidad usando esas herramientas de TypeScript. Por ahora, simplemente quiero explicarte que podemos hacer algo más flexible nuestro componente añadiendo textos por defecto (el parámetro que pasemos automáticamente sobreescribe el default) y hacer los parámetros opcionales.

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

    export default component$(({ text = "Texto por defecto" }: { text?: string }) => {
      return <h1>{text}</h1>;
    });
          

   // Path: src/routes/index.tsx
   import { component$ } from "@builder.io/qwik";
   import type { DocumentHead } from "@builder.io/qwik-city";
   
   export default component$(() => {
     return (
       <div>
         <Headline /> // Este mostrará el texto por defecto
         <Headline text="Este headline me representa" /> // Sobreescribe el default text
       </div>
     );
   });
  
          

En la siguiente lección vamos a cubrir uno de los temas fundamentales que destacan a Qwik frente a otros frameworks: el SSR.