v19.2Latest

Escribir marcado con JSX

JSXes una extensión de sintaxis para JavaScript que te permite escribir marcado similar a HTML dentro de un archivo JavaScript. Aunque hay otras formas de escribir componentes, la mayoría de desarrolladores de React prefieren la concisión de JSX, y la mayoría de bases de código lo utilizan.

Aprenderás
  • Por qué React mezcla el marcado con la lógica de renderizado
  • En qué se diferencia JSX del HTML
  • Cómo mostrar información con JSX

JSX: Poner marcado en JavaScript

La Web se ha construido sobre HTML, CSS y JavaScript. Durante muchos años, los desarrolladores web mantuvieron el contenido en HTML, el diseño en CSS y la lógica en JavaScript, ¡a menudo en archivos separados! El contenido se marcaba dentro del HTML mientras que la lógica de la página residía por separado en JavaScript:

Marcado HTML con fondo púrpura y un div con dos etiquetas hijas: p y form.Marcado HTML con fondo púrpura y un div con dos etiquetas hijas: p y form.

HTML

Tres manejadores de JavaScript con fondo amarillo: onSubmit, onLogin y onClick.Tres manejadores de JavaScript con fondo amarillo: onSubmit, onLogin y onClick.

JavaScript

Pero a medida que la Web se volvió más interactiva, la lógica determinaba cada vez más el contenido. ¡JavaScript se encargaba del HTML! Por esoen React, la lógica de renderizado y el marcado viven juntos en el mismo lugar: los componentes.

Componente de React con HTML y JavaScript de los ejemplos anteriores mezclados. El nombre de la función es Sidebar que llama a la función isLoggedIn, resaltada en amarillo. Anidado dentro de la función resaltada en púrpura está la etiqueta p de antes, y una etiqueta Form que hace referencia al componente mostrado en el siguiente diagrama.Componente de React con HTML y JavaScript de los ejemplos anteriores mezclados. El nombre de la función es Sidebar que llama a la función isLoggedIn, resaltada en amarillo. Anidado dentro de la función resaltada en púrpura está la etiqueta p de antes, y una etiqueta Form que hace referencia al componente mostrado en el siguiente diagrama.

Sidebar.jsComponente de React

Componente de React con HTML y JavaScript de los ejemplos anteriores mezclados. El nombre de la función es Form que contiene dos manejadores onClick y onSubmit resaltados en amarillo. Siguiendo a los manejadores hay HTML resaltado en púrpura. El HTML contiene un elemento form con un elemento input anidado, cada uno con una prop onClick.Componente de React con HTML y JavaScript de los ejemplos anteriores mezclados. El nombre de la función es Form que contiene dos manejadores onClick y onSubmit resaltados en amarillo. Siguiendo a los manejadores hay HTML resaltado en púrpura. El HTML contiene un elemento form con un elemento input anidado, cada uno con una prop onClick.

Form.jsComponente de React

Mantener juntas la lógica de renderizado y el marcado de un botón garantiza que se mantengan sincronizados entre sí en cada edición. Por el contrario, los detalles que no están relacionados, como el marcado del botón y el marcado de una barra lateral, están aislados entre sí, lo que hace que sea más seguro cambiar cualquiera de ellos por sí solo.

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. La mejor manera de entender esto es convertir algo de marcado HTML a marcado JSX.

Nota

JSX y React son dos cosas separadas. A menudo se usan juntos, peropuedesusarlos de forma independienteel uno del otro. JSX es una extensión de sintaxis, mientras que React es una biblioteca de JavaScript.

Convertir HTML a JSX

Supongamos que tienes algo de HTML (perfectamente válido):

Y quieres ponerlo en tu componente:

Si lo copias y pegas tal cual, no funcionará:

Esto se debe a que JSX es más estricto y tiene algunas reglas más que HTML. Si lees los mensajes de error anteriores, te guiarán para corregir el marcado, o puedes seguir la guía a continuación.

Nota

La mayoría de las veces, los mensajes de error en pantalla de React te ayudarán a encontrar dónde está el problema. ¡Léelos si te quedas atascado!

Las reglas de JSX

1. Devuelve un único elemento raíz

Para devolver múltiples elementos desde un componente,envuélvelos con una única etiqueta padre.

Por ejemplo, puedes usar un<div>:

Si no quieres añadir un<div>extra a tu marcado, puedes escribir<> y </>en su lugar:

Esta etiqueta vacía se llamaFragmento.Los Fragmentos te permiten agrupar elementos sin dejar rastro en el árbol HTML del navegador.

Deep Dive
¿Por qué hay que envolver múltiples etiquetas JSX?

2. Cierra todas las etiquetas

JSX requiere que las etiquetas se cierren explícitamente: las etiquetas autocerradas como<img>deben convertirse en<img />, y las etiquetas envolventes como<li>orangesdeben escribirse como<li>oranges</li>.

Así es como se ven cerradas la imagen y los elementos de lista de Hedy Lamarr:

3. ¡Usa camelCase paracasi todo!

JSX se convierte en JavaScript y los atributos escritos en JSX se convierten en claves de objetos JavaScript. En tus propios componentes, a menudo querrás leer esos atributos en variables. Pero JavaScript tiene limitaciones en los nombres de variables. Por ejemplo, sus nombres no pueden contener guiones ni ser palabras reservadas comoclass.

Por eso, en React, muchos atributos de HTML y SVG se escriben en camelCase. Por ejemplo, en lugar destroke-widthusasstrokeWidth. Dado queclasses una palabra reservada, en React escribesclassNameen su lugar, nombrado según lapropiedad DOM correspondiente:

Puedesencontrar todos estos atributos en la lista de props de componentes DOM.Si te equivocas en uno, no te preocupes—React imprimirá un mensaje con una posible corrección en laconsola del navegador.

Precaución

Por razones históricas, los atributosaria-* y data-*se escriben como en HTML, con guiones.

Consejo profesional: Usa un convertidor JSX

¡Convertir todos estos atributos en un marcado existente puede ser tedioso! Recomendamos usar unconvertidorpara traducir tu HTML y SVG existentes a JSX. Los convertidores son muy útiles en la práctica, pero aún vale la pena entender lo que está pasando para que puedas escribir JSX cómodamente por tu cuenta.

Aquí está tu resultado final:

Recapitulación

Ahora sabes por qué existe JSX y cómo usarlo en componentes:

  • Los componentes de React agrupan la lógica de renderizado junto con el marcado porque están relacionados.
  • JSX es similar a HTML, con algunas diferencias. Puedes usar unconvertidorsi lo necesitas.
  • Los mensajes de error a menudo te indicarán la dirección correcta para corregir tu marcado.

Prueba algunos desafíos

Challenge 1 of 1:Convierte algo de HTML a JSX #

Este HTML se pegó en un componente, pero no es JSX válido. Corrígelo:

¡Depende de ti si lo haces manualmente o usas el convertidor!

上一篇Importar y Exportar Componentes下一篇JavaScript en JSX con Llaves