Componetización

Los componentes son uno de los conceptos más importantes en React. Nos permiten establecer las bases sobre las que construimos nuestras interfaces de usuario.

La componetización es entonces la acción de crear estos elementos para darle forma a nuestra UI.

Creación de un componente

En la Web, HTML es un lenguaje de marcado que nos permite crear documentos a través de etiquetas, como: <h1>, <div>, <p>, etc.

Por ejemplo:

<article class="card">
  <h3 class="card__title">Artículo 1</h3>
  <p class="card__desc">
    Descripción del artículo con un <strong>texto resaltado</strong>
  </p>
</article>

En React nosotros disponemos de un lenguaje denominado JSX, el cual nos permite combinar tanto CSS como Javascript junto con etiquetas HTML, creando así elementos reutilizables; nuestros componentes.

Si nosotros quisieramos utilizar el artículo definido anteriormente más de una vez o en distintos sectores de nuestra aplicación podríamos simplemente copiar y pegar el código… una y otra vez. A larga, el mantenimiento de nuestra aplicación se volvería más complicado.

Vamos a crear entonces componentes reutilizables:

1
function Article() {
2
  return (
3
    <article className="card">
4
      <h3 className="card__title">Artículo 1</h3>
5
      <p className="card__desc">
6
        Descripción del artículo con un <strong>texto resaltado</strong>
7
      </p>
8
    </article>
9
  );
10
}

Exportación y reutilización

En el código anterior creamos un componente, pero React no sabe que queremos utilizarlo. Para conseguir esto, necesitamos hacer lo siguiente:

Prestá atención a las líneas resaltadas

1
export default function Article() {
2
  return (
3
    <article className="card">
4
      <h3 className="card__title">Artículo 1</h3>
5
      <p className="card__desc">
6
        Descripción del artículo con un <strong>texto resaltado</strong>
7
      </p>
8
    </article>
9
  );
10
}

1
function Article() {
2
  return (
3
    <article className="card">
4
      <h3 className="card__title">Artículo 1</h3>
5
      <p className="card__desc">
6
        Descripción del artículo con un <strong>texto resaltado</strong>
7
      </p>
8
    </article>
9
  );
10
}
11

12
export default Article;

Cuando exportamos un componente como default, estamos diciéndole a React que puede ser importado en cualquier parte de nuestro código y además nombrarlo de la manera que nosostros querramos.

Si seguimos el ejemplo anterior, podríamos hacer esto:

1
import Article from "./components/Article";
2

3
// y si le cambiamos el nombre:
4

5
import ArticleElement from "./components/Article";

Por otro lado, si exportamos nuestro componente sin especificar default, entonces el nombre del componente debe ser el mismo con el que se definió en un principio. Ejemplo:

1
import Article from "./components/Article";