JSX es una extensión del lenguaje JavaScript y, por lo tanto, puede aceptar cualquier expresión JavaScript válida colocada dentro de las llaves. Por ejemplo, 4 + 4, user.firstName o formatName (usuario) son todas expresiones JavaScript válidas. Esto le permite hacer su JSX más dinámico. En este tutorial veremos algunos ejemplos adicionales de incrustación de expresiones en el marcado JSX, así como algunas de las reglas asociadas con la representación de más de una etiqueta html en una expresión JSX. Veremos que se necesita un elemento principal y aprenderemos un par de formas de asegurarnos de que cumplimos con ese requisito.


Comenzando con una nueva aplicación

Gracias a la aplicación Create React, es muy fácil crear una nueva aplicación y eso es exactamente lo que haremos ahora. Lo llamaremos cartable, ya que queremos aproximarnos a cómo funciona un carrito de compras en React.

reaccionar $ crear-reaccionar-aplicación cartable
Creando una nueva aplicación React en C: nodereactcartable.

Instalar Bootstrap con React

Ahora, vamos a agregar Bootstrap para que la interfaz de usuario se vea mejor. Primero que nada, en la terminal simplemente instalaremos la última versión de Bootstrap así.

cartable $ npm instalar bootstrap

+ bootstrap@4.3.1
agregó 1 paquete de 2 contribuyentes y auditó 36233 paquetes en 35.67s

Para hacer uso de Bootstrap, ahora necesitaremos importarlo en el archivo index.js como vemos aquí.
index.js


Crear una carpeta de componentes

Vamos a agregar más de un componente en este proyecto, por lo que tiene sentido crear una carpeta para contener los componentes que necesitaremos. Aquí, podemos crear una nueva carpeta en la srccarpeta llamada components.
carpeta de componentes de reacción

En esa carpeta de componentes, agreguemos un nuevo archivo que representará un artículo en el carrito de compras. Este es el archivo item.jsx .
item.jsx
item-jsx en la carpeta de componentes

Ahora solo agregue un marcado JSX simple a ese archivo. Es una sola etiqueta h1 con el texto Cartable!

Agreguemos ese componente al archivo index.js para que se pueda representar en la página. Tenga en cuenta que estamos eliminando la representación predeterminada de <App /> y reemplazándola con <Item />.
index.js

En el archivo index.html, podemos agregar una clase al elemento del cuerpo ya que hemos instalado Bootstrap. Esto espaciará bien las cosas en la página.

Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios cuando se usa nuestro sistema de cuadrícula predeterminado. Elija entre un contenedor receptivo de ancho fijo (lo que significa que su ancho máximo cambia en cada punto de interrupción) o un ancho fluido (lo que significa que es 100% ancho todo el tiempo).

index.html

¡Ahí vamos, estamos en camino!
reaccionar elemento representado en la página


Expresiones en JSX

Puede tener más de una etiqueta como parte de una expresión JSX. Hasta ahora, solo hemos visto una etiqueta h1, pero ¿qué pasa si queremos tener tanto un h1 como un botón en la misma expresión JSX? Para que esto funcione correctamente, necesitamos un div de envoltura exterior. Las expresiones JSX deben tener un elemento padre. Además, es una buena práctica envolver toda la expresión JSX entre paréntesis (); .
item.jsx

expresión de reacción incrustada


React.Fragment

Es posible que no desee contaminar su marcado html con elementos div excesivos. En el ejemplo anterior, necesitábamos envolver las etiquetas h1 y button con un solo elemento principal. Esta es una regla de JSX. Sin embargo, la desventaja es que notará si inspeccionamos el marcado en la página que ahora hay un elemento div adicional.
div extra en el marcado de reacción

Podemos solucionar este problema adicional de div usando la etiqueta <React.Fragment> en lugar del elemento <div>.

El fragmento de reacción elimina los divs adicionales


Agregar estado al componente

Ahora, en lugar de tener contenido estático en la expresión JSX, podemos usar algunos datos del stateobjeto para mostrar un valor. En este fragmento a continuación, agregamos ese objeto de estado con una propiedad de countSu valor es 0. Para hacer referencia a ese recuento en el marcado JSX, usamos this.state.count .

La salida muestra el valor que habíamos establecido en la propiedad count.
actualizaciones de la interfaz de usuario del estado

Si cambiamos el valor de la propiedad de recuento, la interfaz de usuario se actualiza automáticamente.

reaccionar actualización del objeto de estado


Incorporación de una función

También es posible incrustar una función dentro del marcado JSX que devuelve un valor. En nuestro componente Item a continuación, hemos agregado una función styleCount (). El trabajo de esta función es observar el estado de conteo y, si es 0, devolver el valor de cadena de "Sin elementos". Si el valor es mayor que 0, simplemente devuelve ese valor. En el marcado JSX, podemos hacer uso de esta función con la sintaxis {this.styleCount ()} que genera cualquier valor que devuelva esta función.

¡Aquí vamos! Con el recuento en 0, vemos "No hay elementos".
expresiones incrustadas en reaccionar

Cuando el valor está por encima de 0, vemos ese resultado en su lugar.

reaccionar resultado de la función incrustada


Incrustar expresiones en JSX Resumen

Trabajar con JSX lleva un poco de tiempo acostumbrarse, pero a medida que juegas con la sintaxis, rápidamente se familiariza. Además, el uso de un formateador de código como la extensión Prettier formateará y limpiará automáticamente su JSX para que sea fácil producir un marcado atractivo con un mínimo esfuerzo.