Introducción a JSX

  • 1 minuto

React usa una sintaxis especial conocida como XML de JavaScript (JSX). JSX le permite integrar HTML (o componentes personalizados que puede crear) y JavaScript en un solo archivo o incluso en una sola línea de código. Mediante JSX, puede basarse en la sintaxis de JavaScript para la lógica. Visual Studio Code proporciona IntelliSense para los archivos JSX, por lo que es una herramienta útil cuando se trabaja con React.

Nota:

JSX se basa en lenguaje de marcado extensible (XML). La sintaxis de XML es similar a la de HTML. En muchos casos, es posible que no note ninguna diferencia. Sin embargo, XML incluye un par de restricciones importantes en la sintaxis:

  • Todos los elementos deben colocarse dentro de un elemento principal.
  • Todos los elementos deben estar cerrados.

Proceso de compilación

Los exploradores no admiten JSX de forma nativa. Por tanto, JavaScript y HTML se deben generar a partir de los archivos JSX que va a representar un explorador. Varios paquetes de instalación y otras herramientas pueden realizar las tareas necesarias. Estas herramientas incluyen Webpack, Parcel y Snowpack. Usaremos Snowpack porque no requiere código ni scripting adicional.

Componentes

El desarrollo de React se basa en componentes. Los componentes son unidades independientes de pantalla y trabajo. Se pueden reutilizar en la aplicación. Úselos para dividir lógicamente la aplicación en fragmentos más pequeños (o componentes).