Fundamentos de React JSX: Aprende a Escribir UI con JavaScript XML

Introducción

¡Bienvenido al mundo de React! En este laboratorio, te sumergirás en JSX, una parte fundamental para construir interfaces de usuario con React. JSX (JavaScript XML) es una extensión de sintaxis para JavaScript que te permite escribir código similar a HTML directamente dentro de tus archivos JavaScript. Esto hace que tu código de UI sea más legible, expresivo y fácil de mantener.

A lo largo de este laboratorio, aprenderás las reglas principales de JSX, incluyendo:

Escribir elementos similares a HTML.
Incrustar expresiones dinámicas de JavaScript.
Aplicar clases CSS.
Usar etiquetas de autocierre.
Agrupar múltiples elementos con Fragments.

Ya se ha configurado un proyecto básico de React para ti en el directorio ~/project/my-app. ¡Empecemos!

Escribe un elemento JSX como h1 en el return del componente

En este paso, escribirás un elemento JSX básico y lo verás renderizado en el navegador. JSX te permite escribir marcado que se parece mucho a HTML directamente dentro de tus componentes de React.

Primero, pongamos en marcha el entorno de desarrollo. Todo tu trabajo se realizará dentro del directorio ~/project/my-app.

Navega al directorio del proyecto en la terminal, instala las dependencias necesarias e inicia el servidor de desarrollo.

cd ~/project/my-app
npm install

Una vez completada la instalación, ejecuta el siguiente comando para iniciar el servidor de desarrollo:

npm run dev -- --host 0.0.0.0 --port 8080

Verás una salida que indica que el servidor se está ejecutando. Ahora, haz clic en la pestaña Web 8080 en la parte superior de la pantalla para ver tu aplicación en vivo. Debería mostrar "Hello, React!".

A continuación, abre el archivo src/App.jsx desde el explorador de archivos de la izquierda. Este archivo contiene un componente simple de React llamado App.

Vamos a modificar el elemento h1. Cambia el texto dentro de la etiqueta <h1> a "Welcome to JSX".

Reemplaza el contenido de src/App.jsx con el siguiente código:

import "./App.css";

function App() {
  return <h1>Welcome to JSX</h1>;
}

export default App;

Guarda el archivo (Ctrl+S o Cmd+S). La aplicación en la pestaña Web 8080 se actualizará automáticamente para mostrar el nuevo texto.

Incrusta expresiones de JavaScript entre llaves

En este paso, aprenderás a incrustar expresiones de JavaScript directamente en tu JSX utilizando llaves {}. Esta es una característica potente que te permite renderizar contenido dinámico.

Puedes colocar cualquier expresión válida de JavaScript dentro de las llaves. Esto podría ser una variable, una llamada a una función o una operación aritmética.

Modifiquemos el componente App para mostrar un título dinámico. Abre nuevamente el archivo src/App.jsx.

Dentro de la función App, antes de la declaración return, declara una constante de JavaScript llamada title y asígnale un valor de cadena. Luego, utiliza esta constante dentro del elemento <h1>.

Actualiza tu archivo src/App.jsx con el siguiente código:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1>{title}</h1>;
}

export default App;

Guarda el archivo. Ahora, revisa la pestaña Web 8080. Verás que el encabezado se ha actualizado a "React JSX Basics". React evalúa la expresión {title} y renderiza su valor como el contenido de la etiqueta <h1>.

Añade el atributo className para la clase CSS

En este paso, aprenderás a añadir clases CSS a tus elementos JSX para darles estilo.

En HTML normal, usas el atributo class para asignar una clase CSS. Sin embargo, class es una palabra reservada en JavaScript. Para evitar conflictos, JSX utiliza className en su lugar.

Primero, añadamos una regla de estilo. Abre el archivo src/App.css y añade el siguiente código CSS para definir un estilo para nuestro título:

.title-style {
  color: #61dafb;
  text-align: center;
}

Guarda el archivo src/App.css.

Ahora, apliquemos esta clase a nuestro elemento <h1>. Abre src/App.jsx y añade el atributo className a la etiqueta h1.

Actualiza tu archivo src/App.jsx para que se vea así:

import "./App.css";

function App() {
  const title = "React JSX Basics";

  return <h1 className="title-style">{title}</h1>;
}

export default App;

Guarda el archivo y cambia a la pestaña Web 8080. Ahora deberías ver el texto del título centrado y de color azul claro, de acuerdo con los estilos que definiste en App.css.

Usa la etiqueta de autocierre para el elemento img

En este paso, aprenderás a usar etiquetas de autocierre en JSX. En HTML, algunos elementos como <img>, <br> y <input> son elementos "vacíos" o "nulos", lo que significa que no tienen una etiqueta de cierre.

En JSX, debes cerrar explícitamente cada etiqueta. Para los elementos que no tienen hijos, utilizas una sintaxis de autocierre añadiendo una barra inclinada / antes del corchete angular de cierre, como <img />.

Un componente de React solo puede devolver un único elemento raíz. Para renderizar múltiples elementos, debes envolverlos en un contenedor, como un <div>.

Añadamos una imagen debajo de nuestro título. Envolveremos tanto el <h1> como la nueva etiqueta <img> dentro de un <div>.

Actualiza tu archivo src/App.jsx con el siguiente código:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <div>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </div>
  );
}

export default App;

En este código, hemos añadido una etiqueta <img>. Observa que es de autocierre (/>). También hemos utilizado llaves para establecer dinámicamente el atributo src a partir de la variable imageUrl.

Guarda el archivo y mira la pestaña Web 8080. Verás el logo de LabEx mostrado debajo del título.

Renderiza múltiples elementos en un fragmento <> </>

En este paso, aprenderás una mejor manera de agrupar múltiples elementos sin añadir un nodo extra al DOM: los Fragmentos de React.

En el paso anterior, usamos un <div> para envolver nuestros elementos <h1> e <img> porque un componente debe devolver un único elemento raíz. Sin embargo, a veces este <div> extra es innecesario y puede interferir con tu diseño CSS (por ejemplo, con Flexbox o Grid).

React proporciona una solución llamada Fragmentos. Un Fragmento te permite agrupar una lista de hijos sin añadir nodos extra al DOM. Puedes usar la sintaxis abreviada <> ... </>.

Vamos a refactorizar nuestro componente App para usar un Fragmento en lugar de un <div>.

Abre src/App.jsx y reemplaza el <div> de apertura y el </div> de cierre con <> y </> respectivamente.

El código final de tu src/App.jsx debería verse así:

import "./App.css";

function App() {
  const title = "React JSX Basics";
  const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";

  return (
    <>
      <h1 className="title-style">{title}</h1>
      <img src={imageUrl} alt="LabEx Logo" width="200" />
    </>
  );
}

export default App;

Guarda el archivo. La salida visual en la pestaña Web 8080 se verá idéntica al paso anterior. Sin embargo, si inspeccionaras el HTML en las herramientas de desarrollador de tu navegador, verías que los elementos <h1> e <img> son ahora hermanos directos, sin un <div> padre. Esto crea una estructura DOM más limpia y eficiente.

Resumen

¡Felicitaciones por completar el laboratorio de Fundamentos de React JSX! Has aprendido las reglas y la sintaxis fundamentales para escribir UI en una aplicación de React.

En este laboratorio, practicaste:

Escribir elementos similares a HTML como <h1> en la declaración return de tu componente.
Incrustar variables y expresiones dinámicas de JavaScript en tu marcado utilizando llaves {}.
Aplicar clases CSS usando el atributo className.
Usar etiquetas de autocierre para elementos como <img> con la sintaxis />.
Agrupar múltiples elementos sin añadir nodos DOM extra utilizando Fragmentos de React (<> </>).

Estos conceptos son los pilares para crear interfaces de usuario complejas y dinámicas con React. Sigue practicando para sentirte más cómodo con el poder y la flexibilidad de JSX.