Hoja de trucos React - 9 casos comunes de renderizado HTML que debes conocer

Artículo original escrito por Ondrej Polesny
Articulo original: React Cheatsheet – 9 Common HTML Rendering Cases You Should Know
Traducido y adaptado por: JUAN C. GUAÑA

Cada vez que empiezo con una nueva herramienta o ha pasado un tiempo desde que lo usé, siempre termino buscando las mismas cosas simples.

Buscaré en Google cómo renderizar HTML sin procesar, cómo mostrar un componente en función de una condición, cómo asignar una clase a un elemento, etc.

Es por eso que creé esta hoja de trucos con las nueve tareas más comunes que realizarás de forma regular con React y JSX.

Los ordené de la forma en que normalmente los encuentro al crear una aplicación. En los ejemplos a continuación, el primer fragmento de código mostrará la sintaxis y el segundo mostrará cómo usarlo con datos reales.

Cómo generar datos en HTML

El caso de uso más simple de todos: renderizar el valor de una variable en formato HTML. Por lo general, es la primera prueba que muestra que la aplicación ha procesado los datos y puede procesarlos:

{ variable }

{ metadata.subtitle.value }

Cómo agregar un atributo de clase estándar

Si bien muchos marcos mantienen intacto el marcado HTML, React no permite que la palabra reservada "clase" se use para diseñar. Necesitamos usar className en su lugar, así:

<... className="classname">

<div className="sidebar__inner">

Cómo generar datos en atributos HTML

Este caso de uso está relacionado con la creación de enlaces. Pero en muchos casos, también necesitas completar atributos como título, datos- {algo-que-tu-aplicación-necesita}, o incluso simples etiquetas alt de imágenes:

< ... name={variable}>

<a href={`https://twitter.com/${author.twitter.value}`}>

Cómo generar HTML sin formato

Algunos contenidos están estructurados en otro sistema, por ejemplo, texto enriquecido compuesto en un headless CMS.

En esos casos, normalmente utiliza una herramienta como un SDK para crear el HTML por ti. Así es como puedes agregarlo a su marcado:

< ... dangerouslySetInnerHTML={{__html: variable}}></...>

<div dangerouslySetInnerHTML={{__html: article.teaser}}></div>

Cómo iterar sobre conjuntos de datos

En páginas de índice, mapas de sitio, páginas de búsqueda o donde sea que necesite mostrar datos de una colección, React y JSX te permiten combinar la función map (casi) todopoderosa con el marcado HTML:

let components = collectionVariable.map((item) =>
  <Component data={item} key={item.uniqueKey} />);
...
<div>{components}</div>

let articleComponents = articles.map((article) =>
  <Article data={article} key={article.id} ... />);
...
<div>{articleComponents}</div>

Cómo iterar sobre conjuntos de datos con un índice

Este es el mismo caso de uso, pero te da acceso a un índice de cada elemento iterado. En algunos casos, el índice también se puede utilizar para reemplazar la clave única:

let components = collectionVariable.map((item, index) =>
  <Component data={item} index={index} key={uniqueKey} />);
...
<div>{components}</div>

let articleComponents = articles.map((article) =>
  <Article data={article} index={index} key={article.id} ... />);
...
<div>{articleComponents}</div>

Cómo renderizar el marcado condicional

Esta es la condición if típica en JSX. A menudo se usa durante la carga de datos para mostrar precargadores o simplemente para decidir qué parte del marcado usar en función de los datos:

{variable !== null && <... >}

{data.length > 0 && <div> ... </div>}

Cómo renderizar el marcado condicional, incluida la rama else

The else branch is achieved by reversing the condition: La rama else se logra invirtiendo la condición:

{variable !== null && <... >}
{variable == null && <... >}

{data.length > 0 && <div> ... </div>}
{data.length == 0 && <div>Loading...</div>}

Cómo pasar datos a componentes secundarios

Y finalmente, cuando comienzas a usar componentes, así es como les proporcionas datos a los children a través de las propiedades:

<component componentVariable={variable}>

<links author={author}>

Espero que esto te ahorre las búsquedas en Google :-)

Si está buscando una versión imprimible (PDF), está disponible en este sitio, donde también encontrarás hojas de trucos similares para Vue y Angular.