Tu primer componente

Componentes: Elementos básicos para construir UIs

En la Web, HTML nos permite crear documentos estructurados con su conjunto integrado de etiquetas como <h1> y <li>:

<article>
  <h1>Mi primer componente</h1>
  <ol>
    <li>Componentes: Bloques de construcción de la UI</li>
    <li>Definiendo un componente</li>
    <li>Usando un componente</li>
  </ol>
</article>

Este marcado representa un artículo <article>, su encabezado <h1>, y una (abreviada) tabla de contenidos representada como una lista ordenada <ol>. Un marcado como este, combinado con CSS para los estilos y JavaScript para la interactividad, están detrás de cada barra lateral, avatar, modal, menú desplegable y cualquier otra pieza de UI que ves en la web.

React te permite combinar tu marcado, CSS y JavaScript en «componentes» personalizados, elementos reutilizables de UI para tu aplicación. El código de la tabla de contenidos que viste arriba pudo haberse transformado en un componente <TableOfContents /> que podrías renderizar en cada página. Por detrás, seguiría utilizando las mismas etiquetas HTML como <article>, <h1>, etc.

De la misma forma que con las etiquetas HTML, puedes componer, ordenar y anidar componentes para diseñar páginas completas. Por ejemplo la página de documentación que estás leyendo está hecha de componentes de React:

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Documentación</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

En la medida en que tu proyecto crece, notarás que muchos de tus diseños se pueden componer mediante la reutilización de componentes que ya escribiste, acelerando el desarrollo. ¡Nuestra tabla de contenido de arriba podría añadirse a cualquier página con <TableOfContents />! Incluso puedes montar tu proyecto con los miles de componentes compartidos por la comunidad de código abierto de React como Chakra UI y Material UI.

Definir un componente

Tradicionalmente, cuando se creaban páginas web, los desarrolladores web usaban lenguaje de marcado para describir el contenido y luego añadían interacción agregando un poco de JavaScript. Esto funcionaba perfectamente cuando las interacciones eran algo deseable, pero no imprescindible en la web. Ahora es algo que se espera de muchos sitios y de todas las aplicaciones. React pone la interactividad primero usando aún la misma tecnología: un componente de React es una función de JavaScript a la que puedes agregar marcado. Aquí vemos cómo luce esto (puede editar el ejemplo de abajo):

Y aquí veremos cómo construir un componente:

Paso 1: Exporta el componente

El prefijo export default es parte de la sintaxis estándar de Javascript (no es específico de React). Te permite marcar la función principal en un archivo para que luego puedas importarlas en otros archivos. (¡Más sobre importar en Importar y exportar componentes!).

Paso 2: Define la función

Con function Profile() { } defines una función con el nombre Profile.

Paso 3: Agrega marcado

El componente devuelve una etiqueta <img /> con atributos src y alt. <img /> se escribe como en HTML, ¡pero en realidad es JavaScript por detrás! Esta sintaxis se llama JSX, y te permite incorporar marcado dentro de JavaScript.

Las sentencias return se pueden escribir todo en una línea, como en este componente:

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

Pero si tu marcado no está todo en la misma línea que la palabra clave return, debes ponerlo dentro de paréntesis como en este ejemplo:

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

Usar un componente

Ahora que has definido tu componente Profile, puedes anidarlo dentro de otros componentes. Por ejemplo, puedes exportar un componente Gallery que utilice múltiples componentes Profile:

Lo que ve el navegador

Nota la diferencia de mayúsculas y minúsculas:

• <section> está en minúsculas, por lo que React sabe que nos referimos a una etiqueta HTML.
• <Profile /> comienza con una P mayúscula, por lo que React sabe que queremos usar nuestro componente llamado Profile.

Y Profile contiene aún más HTML: <img />. Al final lo que el navegador ve es esto:

<section>
  <h1>Científicos increíbles</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Anidar y organizar componentes

Los componentes son funciones regulares de JavaScript, por lo que puedes tener múltiples componentes en el mismo archivo. Esto es conveniente cuando los componentes son relativamente pequeños o están estrechamente relacionados entre sí. Si este archivo se torna abarrotado, siempre puedes mover Profile a un archivo separado. Aprenderás como hacer esto pronto en la página sobre importaciones.

Dado que los componentes Profile se renderizan dentro de Gallery (¡incluso varias veces!) podemos decir que Gallery es un componente padre, que renderiza cada Profile como un «hijo». Este es la parte mágica de React: puedes definir un componente una vez, y luego usarlo en muchos lugares y tantas veces como quieras.

export default function Gallery() {
  // 🔴 ¡Nunca definas un componente dentro de otro componente!
  function Profile() {
    // ...
  }
  // ...
}

export default function Gallery() {
  // ...
}

// ✅ Declara los componentes en el primer nivel
function Profile() {
  // ...
}