Describiendo la interfaz de usuario

React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI). La UI se construye a partir de pequeñas unidades como botones, texto e imágenes. React te permite combinarlas encomponentesreutilizables y anidables. Desde sitios web hasta aplicaciones móviles, todo lo que aparece en la pantalla puede descomponerse en componentes. En este capítulo, aprenderás a crear, personalizar y mostrar condicionalmente componentes de React.

Tu primer componente

Las aplicaciones de React se construyen a partir de piezas aisladas de UI llamadascomponentes. Un componente de React es una función de JavaScript que puedes espolvorear con marcado. Los componentes pueden ser tan pequeños como un botón o tan grandes como una página completa. Aquí hay un componenteGalleryque renderiza tres componentesProfile:

Importar y exportar componentes

Puedes declarar muchos componentes en un solo archivo, pero los archivos grandes pueden volverse difíciles de navegar. Para solucionar esto, puedesexportarun componente a su propio archivo y luegoimportarese componente desde otro archivo:

Escribir marcado con JSX

Cada componente de React es una función de JavaScript que puede contener algo de marcado que React renderiza en el navegador. Los componentes de React utilizan una extensión de sintaxis llamada JSX para representar ese marcado. JSX se parece mucho a HTML, pero es un poco más estricto y puede mostrar información dinámica.

Si pegamos un marcado HTML existente en un componente de React, no siempre funcionará:

Si tienes HTML existente como este, puedes arreglarlo usando unconvertidor:

JavaScript en JSX con llaves

JSX te permite escribir marcado similar a HTML dentro de un archivo JavaScript, manteniendo la lógica de renderizado y el contenido en el mismo lugar. A veces querrás añadir un poco de lógica de JavaScript o hacer referencia a una propiedad dinámica dentro de ese marcado. En esta situación, puedes usar llaves en tu JSX para “abrir una ventana” a JavaScript:

Pasar props a un componente

Los componentes de React usanpropspara comunicarse entre sí. Cada componente padre puede pasar cierta información a sus componentes hijos dándoles props. Los props pueden recordarte a los atributos HTML, pero puedes pasar cualquier valor de JavaScript a través de ellos, ¡incluyendo objetos, arrays, funciones e incluso JSX!

Renderizado condicional

Tus componentes a menudo necesitarán mostrar cosas diferentes dependiendo de distintas condiciones. En React, puedes renderizar JSX condicionalmente usando sintaxis de JavaScript comoifstatements,&&, y operadores? :.

En este ejemplo, se usa el operador&&de JavaScript para renderizar condicionalmente una marca de verificación:

Renderizar listas

A menudo querrás mostrar múltiples componentes similares a partir de una colección de datos. Puedes usarfilter() y map()de JavaScript con React para filtrar y transformar tu array de datos en un array de componentes.

Para cada elemento del array, necesitarás especificar unakey. Normalmente, querrás usar un ID de la base de datos comokey. Las keys permiten a React rastrear la posición de cada elemento en la lista incluso si la lista cambia.

Mantener los componentes puros

Algunas funciones de JavaScript sonpuras.Una función pura:

• Se ocupa de sus propios asuntos.No cambia ningún objeto o variable que existiera antes de ser llamada.
• Mismas entradas, misma salida.Dadas las mismas entradas, una función pura siempre debe devolver el mismo resultado.

Al escribir estrictamente tus componentes solo como funciones puras, puedes evitar toda una clase de errores desconcertantes y comportamientos impredecibles a medida que crece tu base de código. Aquí tienes un ejemplo de un componente impuro:

Puedes hacer que este componente sea puro pasando una prop en lugar de modificar una variable preexistente:

Tu interfaz de usuario como un árbol

React utiliza árboles para modelar las relaciones entre componentes y módulos.

Un árbol de renderizado de React es una representación de la relación padre-hijo entre componentes.

Un ejemplo de árbol de renderizado de React.

Los componentes cerca de la parte superior del árbol, cerca del componente raíz, se consideran componentes de nivel superior. Los componentes sin componentes hijos son componentes hoja. Esta categorización de componentes es útil para comprender el flujo de datos y el rendimiento del renderizado.

Modelar la relación entre módulos JavaScript es otra forma útil de entender tu aplicación. Nos referimos a ella como un árbol de dependencias de módulos.

Un ejemplo de árbol de dependencias de módulos.

Un árbol de dependencias es utilizado a menudo por herramientas de construcción para agrupar todo el código JavaScript relevante para que el cliente lo descargue y renderice. Un tamaño de paquete grande perjudica la experiencia del usuario en las aplicaciones React. Comprender el árbol de dependencias de módulos es útil para depurar tales problemas.

¿Qué sigue?

Dirígete aTu primer componentepara empezar a leer este capítulo página por página.

O, si ya estás familiarizado con estos temas, ¿por qué no leer sobreAgregar interactividad?