tutz

¿Qué es JSX?

JSX es una extensión de sintaxis de JavaScript y permite describir cómo debería verse la UI.

JSX produce elementos de React y básicamente es azúcar sintáctico para la función React.createElement(). Esto hace que lo escribimos con React sea muy parecido a HTML.

Para crear aplicaciones en React no es necesario usar JSX, pero la verdad es que con JSX, crear apps en React será mucho más fácil y productivo.

Ejemplo

En el siguiente ejemplo vemos un elemento simple escrito en JSX, que como comenté líneas arriba, es muy parecido a HTML.

const element = <span>I love JSX!</span>;

JSX representa objetos

Babel compila JSX a llamados de React.createElement(). Por ejemplo, estos dos códigos son idénticos.

// Con JSX
const element = <h1 className="title">My title</h1>;
// Sin JSX
const element = React.createElement('h1', { className: 'title' }, 'My title');

Entonces si te das cuenta, sería muy complicado escribir código en React si tendríamos que estar haciendo uso de React.createElement(), por eso es que React junto a JSX vino a revolucionar la manera de cómo escribir código en el frontend.

Expresiones dentro de JSX

Dentro de JSX puedes escribir expresiones, para eso tienes que usar llaves {}. Dentro de las llaves puedes escribir cualquier expresión válida en JavaScript.

const counter = <span>Contador: {4 + 5}</span>;

JSX no es HTML

Dado que JSX está más cerca de JavaScript que de HTML, React DOM usa la convención de nomenclatura de propiedades camelCase en lugar de nombres de atributos de HTML.

const box = <div tabIndex={0}>Box</div>;
const title = <div className="title">Title</div>;

Algunas otras consideraciones que debes tener en cuenta en JSx son:

  • En vez de class debes usar className.
  • Si quieres usar condicionales debes usar expresiones ternarias.
  • Todos los elementos deberían estar cerrados.