Lección 18. Componentes.

Un concepto básico de toda aplicación basada en componentes, es como importar y exportar estos para ser utilizados en múltiples paginas y componentes secundarios.

Veamos como Next.js puede realizarlo.

Ubicación de componentes._

A diferencia de las paginas y rutas las cuales, deben ser colocadas dentro de la ruta src/app, los componentes, pueden ser colocados dentro de cualquier ruta, siempre y cuando se encuentren dentro de src/.

Nota: NO es recomendable colocarlos dentro de src/app, ya que eso convertirá el directorio en una ruta de nuestra aplicación.

Lo recomendable es tener una estructura como la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |- ... rutas de aplicación ...
  |-components/
    |- ...Colocar aqui los componentes ...
|- ...Otros archivos...

Donde los componentes sean colocados dentro de un directorio principal en src/, el cual llamemos:

components.

Nota: Dentro de components/ podremos generar otros directorios de clasificación de componentes.

Componentes._

Los componentes son piezas de UI modulares, los cuales pueden ser importados dentro de partes independientes de nuestro proyecto.

Existen 2 tipos de componentes para Next.js. Los llamaremos componentes simples y componentes envolventes.

Expliquemos ambos.

Componentes simples._

Los componentes simples son los componentes los cuales reciben datos, elementos e incluso otros componentes por medio de lo que denominamos props.

Un ejemplo:

Tenemos el archivo src/components/Saludo.tsx:

type Props = {
  nombre: string;
};

export default function Saludo({ nombre }: Props) {
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
    </div>
  );
}

Para su importación:

import Saludo from "@/components/Saludo";

Nota: El símbolo @ representa la carpeta base de src/.

Y su utilización:

<Saludo nombre="Jose"/>

Componentes envolventes._

Lo que denominamos componentes envolventes se conocen como componentes que reciben algún ReactNode por medio de envolverlo entre sus etiquetas de componente.

Un ejemplo:

Tenemos el archivo src/components/Card.tsx:

const Card = ({children} : { children: React.ReactNode}) => {
  const cardStyle = {
    border: "thin solid red",
    margin: "1rem auto",
    padding: "1rem",
  };

  return <div style={cardStyle}>{children}</div>
};

export default Card;

Para su importación:

import Card from "@/components/Card";

Y su utilización:

<Card>
  <div>
    <h1>Video</h1>
    <Saludo nombre="Jose"/>
  </div>
</Card>

Nota: Los componentes envolventes solo pueden recibir UN SOLO elemento nodo individual, por lo que si tenemos una estructura compleja, esta debe envolverse en un solo elemento.

Ejemplo en estructura de proyecto._

Veamos un ejemplo en nuestra estructura de proyecto:

Donde:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-Dashboard/
      |-page.tsx
      |-@analytics/
        |-page.tsx
      |-@chat/
        |-page.tsx
      |-@video/
        |-page.tsx
      |- ... Otras rutas de aplicación ...
  |-components/
    |-Card.tsx
    |-Saludo.tsx
    |- ...Colocar aqui los componentes ...
|- ...Otros archivos...

Donde Card.tsx contiene:

const Card = ({children} : { children: React.ReactNode}) => {
  const cardStyle = {
    border: "thin solid red",
    margin: "1rem auto",
    padding: "1rem",
  };

  return <div style={cardStyle}>{children}</div>
};

export default Card;

Saludo.tsx contiene:

type Props = {
  nombre: string;
};

export default function Saludo({ nombre }: Props) {
  return (
    <div>
      <h1>Hola, {nombre}!</h1>
    </div>
  );
}

Dentro de cualquier page.tsx existente, podríamos colocar:

import Card from "@/components/Card"
import Saludo from "@/components/Saludo";

export default function Video () {
  return (
    <Card>
      <div>
        <h1>Video</h1>
        <Saludo nombre="Jose"/>
      </div>
    </Card>
  );
}

O:

import Card from "@/components/Card"

export default function Chat () {
  return (
    <Card>
      <h1>Chat</h1>
    </Card>
  );
}