React: Up & Running, 2ª Edición

Capítulo 5. JSX

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Ya has visto JSX en acción en los capítulos anteriores. En sabes que se trata de escribir expresiones JavaScript que contengan XML con un aspecto muy parecido al HTML. Por ejemplo:

const hi = <h1>Hello</h1>;

Y tú sabes que siempre puedes "interrumpir el flujo" de XML incluyendo más expresiones JavaScript envueltas en llaves:

const planet = 'Earth';
const hi = <h1>Hello people of <em>{planet}</em>!</h1>;

Esto es cierto incluso si las expresiones son condiciones, bucles o más JSX:

const rock = 3;
const planet = <em>{rock === 3 ? 'Earth' : 'Some other place'}</em>;
const hi = <h1>Hello people of {planet}!</h1>;

En este capítulo, aprenderás más sobre JSX y explorarás algunas funciones que pueden sorprenderte y/o encantarte.

Nota

Para ver los ejemplos anteriores en acción, carga 05.01.hellojsx.html del repositorio del libro. El archivo es también una ilustración de cómo puedes tener varias aplicaciones React en la misma página.

Un par de herramientas

Para experimentar y familiarizarte con las transformaciones JSX, puedes jugar con el editor en vivo en https://babeljs.io/repl (mostrado en la Figura 5-1). Asegúrate de marcar la opción "Embellecer " para mejorar la legibilidad del resultado.

Figura 5-1. Babel como herramienta de transformación JSX en ...