¿Qué diablos es JSX y por qué debería usarlo para crear sus aplicaciones React?

Como desarrolladores, utilizamos una variedad de herramientas y paquetes de código abierto para facilitar nuestro trabajo. Algunos de ellos se utilizan tanto en la comunidad que parecen nativos de JavaScript. Pero no lo son, y pueden cambiar fundamentalmente la forma en que escribe el código a diario.

Una de estas tecnologías que probablemente ya esté utilizando es JSX, una extensión de sintaxis similar a XML para JavaScript . Creado por el equipo de Facebook, está destinado a simplificar la experiencia del desarrollador. Como dice la especificación, la razón fundamental para crear JSX fue:

"... para definir una sintaxis concisa y familiar para definir estructuras de árbol con atributos". ~ Especificaciones JSX

Ahora, probablemente se esté diciendo a sí mismo: "Oye, Ryan, esto suena genial, pero ve al código ya ", así que aquí tienes nuestro primer ejemplo.

const helloWorld = 

Hello, World!

;

¡Y eso es!

El fragmento de código anterior parece familiar, pero ¿alguna vez te has parado a pensar en su poder? JSX hace que podamos pasar estructuras de árbol compuestas por elementos HTML o React como si fueran valores estándar de JavaScript.

Si bien no tiene que usar JSX al escribir React (o usar React para probar JSX), no se puede negar que es una parte importante del ecosistema React, así que profundicemos y veamos qué está pasando bajo el capó.

Empezando con JSX

Lo primero que debe tener en cuenta al usar la sintaxis JSX es que React debe estar dentro del alcance. Esto se debe a cómo se compila. Tome este componente por ejemplo:

function Hello() { return 

Hello, World!

}

Detrás de escena, cada elemento renderizado por el Hellocomponente se transpila en una React.createElementllamada.

En este caso:

function Hello() { return React.createElement("h1", {}, "Hello, World!")}

Lo mismo ocurre con los elementos anidados. En última instancia, los dos ejemplos siguientes generarían el mismo marcado.

// Example 1: Using JSX syntaxfunction Nav() { return ( 
    
  • Home
  • About
  • Portfolio
  • Contact
);}
// Example 2: Not using JSX syntaxfunction Nav() { return ( React.createElement( "ul", {}, React.createElement("li", null, "Home"), React.createElement("li", null, "About"), React.createElement("li", null, "Portfolio"), React.createElement("li", null, "Contact") ) );}

React.createElement

Cuando React crea elementos, llama a este método, que toma tres argumentos.

  1. El nombre del elemento
  2. Un objeto que representa los accesorios del elemento.
  3. Una matriz de los hijos del elemento

Una cosa a tener en cuenta aquí es que React interpreta los elementos en minúsculas como HTML y los elementos de caso Pascal (por ejemplo, ThisIsPascalCase) como componentes personalizados. Debido a esto, los siguientes ejemplos se interpretarían de manera diferente.

// 1. HTML elementReact.createElement("div", null, "Some content text here")
// 2. React elementReact.createElement(Div, null, "Some content text here")

El primer ejemplo generaría una iv> with the s tring "Some content text here" as its child. However, the second version would throw an error (unless, of course, a custom comp onent <Div /> was in sco pe) because is undefined.

Props in JSX

When working in React, your components often render children and need to pass them data in order for the children to render properly. These are called props.

I like to think of React components as a group of friends. And what do friends do? They give each other props. Thankfully, JSX offers us a number of ways to do that.

// 1. Props defaulted to true
// 2. String literals
// 3. JavaScript expressions
// 4. Spread attributes

But beware! You cannot pass if statements or for loops as props because they are statements, not expressions.

Children in JSX

As you are building your app, you eventually start having components render children. And then those components sometimes have to render children. And so on and so forth.

Since JSX is meant to make it easy for us to reason about tree-like structures of elements, it makes all of this very easy. Basically, whatever elements a component returns become its children.

There are four ways to render child elements using JSX:

Strings

This is the simplest example of JSX children. In the case below, React creates a <h1> HTML element with one child. The child, however, is not another HTML element, just a simple string.

function AlertBanner() { return ( 

Your bill is due in 2 days

)}

JSX Elements

This is probably the use case that new React developers would be most familiar with. In the component below, we’re returning an HTML child (the er>), which has two children of it s own &lt;Na v /> and &lt;ProfilePic /> both of which are custom defined JSX elements.

function Header(props) { return ( )}

Expressions

Expressions allow us to easily render elements in our UI that are the result of a JavaScript computation. A simple example of this would be basic addition.

Say we have a component called /> that renders information about a bill or receipt. Let’s assume it takes one prop c alled total that represents the pre-tax cost and another prop taxRate, which represents the applicable tax rate.

Using expressions, we can easily render out some useful information for our users!

function BillFooter(props) { return ( 
Tax: {props.total * props.taxRate}
Total: {props.total + props.total * props.taxRate}
);}

Functions

With functions, we can programmatically create elements and structures, which React will then render for us. This makes it easy to create multiple instances of a component or render repeated UI elements.

As an example, let’s use JavaScript’s .map() function to create a navigation bar.

// Array of page informationconst pages = [ { id: 1, text: "Home", link: "/" }, { id: 2, text: "Portfolio", link: "/portfolio" }, { id: 3, text: "Contact", link: "/contact" }];// Renders a 
    
    with programmatically created
  • childrenfunction Nav() { return (
      {pages.map(page => { return (
    • {page.text}
    • ); })}
    );}

Now, if we want to add a new page to our site, all we need to do is add a new object to the pages array and React will take care of the rest!

Take note of the key prop. Our function returns an array of sibling elements, in this case <li>s, and React needs a way to keep track of which mounts, unmounts or updates. To do that, it relies on this unique identifier for each element.

Use the tools!

Sure, you can write React applications without JSX, but I’m not really sure why you’d want to.

The ability JSX gives us to pass around elements in JavaScript like they were first-class citizen lends itself well to working with the rest of the React ecosystem. So well, in fact, you may have been writing it every day and not even known it.

Bottom line: just use JSX. You’ll be happy you did.