Tu primer componente

Los componentes son uno de los conceptos esenciales de React. Constituyen los cimientos sobre los que construyes interfaces de usuario (UIs por sus siglas en inglés). ¡Y eso los convierte en el lugar perfecto para comenzar tu recorrido por React!

Aprender√°s

  • Qu√© es un componente
  • Qu√© papel desempe√Īan los componentes en una aplicaci√≥n de React
  • C√≥mo escribir tu primer componente de React

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>My First Component</h1>
<ol>
<li>Components: UI Building Blocks</li>
<li>Defining a Component</li>
<li>Using a Component</li>
</ol>
</article>

Este marcado representa un art√≠culo <article>, su encabezado <h1>, y una tabla de contenidos (abreviada) 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">Docs</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 pantalla 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 interacciones 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 markup. Aqu√≠ vemos c√≥mo luce esto (puede editar el ejemplo de abajo):

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

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.

Atención

¬°Los componentes de React son funciones regulares de JavaScript, pero sus nombres deben comenzar con letra may√ļscula o no funcionar√°n!

Paso 3: A√Īade marcado

El componente retorna 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>
);

Atención

¡Sin paréntesis, todo el código que está en las líneas posteriores al return serán ignoradas!

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:

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

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

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>Amazing scientists</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 imports.

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.

Atención

Los componentes pueden renderizar otros componentes, pero nunca debes anidar sus definiciones:

export default function Gallery() {
// ūüĒī ¬°Nunca definas un componente dentro de otro componente!
function Profile() {
// ...
}
// ...
}

El fragmento de código de arriba es muy lento y causa errores. En su lugar, define cada componente en el primer nivel:

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

// ‚úÖ Declara los componentes en el primer nivel
function Profile() {
// ...
}

Cuando un componente hijo necesita datos de su padre, p√°salo por props en lugar de anidar las definiciones.

Deep Dive

Componentes de arriba a abajo

Tu aplicaci√≥n de React comienza en un componente ¬ęra√≠z¬Ľ. Usualmente, se crea autom√°ticamente cuando inicias un nuevo proyecto. Por ejemplo, si utilizas CodeSandbox o Create React App, el componente ra√≠z se define en src/App.js. Si utilizas el framework Next.js, el componente ra√≠z se define en pages/index.js. En estos ejemplos, has estado exportando componentes ra√≠ces.

La mayor√≠a de las aplicaciones de React utilizan componentes de arriba a abajo. Esto significa que no solo usar√°s componentes para las piezas reutilizables como los botones, pero tambi√©n para piezas m√°s grandes como barras laterales, listas, ¬°y en √ļltima instancia, p√°ginas completas! Los componentes son una forma √ļtil de organizar c√≥digo de UI y marcado, incluso cuando algunos de ellos solo se utilicen una vez.

Frameworks como Next.js lo llevan un paso m√°s all√°. En lugar de usar un archivo HTML vac√≠o y dejar a React ¬ęocuparse¬Ľ de manejar la p√°gina con JavaScript, tambi√©n generan el HTML autom√°ticamente a partir de tus componentes de React. Esto permite que tu aplicaci√≥n muestre alg√ļn contenido antes de que el c√≥digo de JavaScript cargue.

A√ļn as√≠, muchos sitios web solo utilizan React para a√Īadir ¬ępeque√Īas gotas de interactividad¬Ľ. Tienen muchos componentes ra√≠ces en lugar de uno solo para la p√°gina completa. Puedes utilizar tanto o tan poco de React como lo necesites.

Recapitulación

¬°Acabas de probar por primera vez React! Recapitulemos algunos puntos clave.

  • React te permite crear componentes, elementos reutilizables de UI para tu aplicaci√≥n.

  • En una aplicaci√≥n de React, cada pieza de UI es un componente.

  • Los componentes de React son funciones regulares de JavaScript excepto que:

    1. Sus nombres siempre empiezan con may√ļscula.
    2. Retorna marcado JSX.

Desafío 1 de 4:
Exporta el componente

Este ejemplo interactivo no funciona porque el componente raíz no está exportado:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/lICfvbD.jpg"
      alt="Aklilu Lemma"
    />
  );
}

¬°Intenta arreglarlo t√ļ mismo antes de mirar la soluci√≥n!