¿Cómo trabajar con JSX en React?

Última actualización: 01 - 11 - 2023

Explicación sobre qué es JSX

JSX (JavaScript Syntax Extension) es la extensión de archivos que usa React donde podemos hacer código HTML dentro de JavaScript. Esto no quiere decir que HTML ahora tenga cualidades de un lenguaje de programación, no es JavaScript dentro de HTML si no HTML dentro de JavaScript.

Si bien podemos trabajar en una aplicación de React con componentes o páginas con formatos de archivo .jsx, esto es totalmente opcional. React puede trabajar de igual forma con extensiones de archivos .js, queda a discreción del desarrollador o del equipo.

Entonces si JSX trabaja como si fuese HTML...🤔

¿Cuál es la diferencia entre los archivos JSX y HTML?

Primero y principal, la extensión del archivo. 😆

Segundo, los archivos HTML muestran las información de forma estática a través del uso de etiquetas como un p o un header , que también lo puede hacer JSX aunque este puede mostrar variables o expresiones dentro de las etiquetas.

Tercero, JSX posee ciertas reglas al momento de trabajar con su código. Veamos cómo hacerlo. 👇🏻

Reglas en el código JSX

  1. El atributo class es reemplazado por className

    2. Ya que JavaScript tiene a class como palabra reservada, el atributo que se usa en HTML para asignar clases es reemplazado por className.

    Hay que recordar que React está más relacionado a JavaScript que a HTML por lo que su sintaxis va a estar ligada al lenguaje de programación y por eso surgen estos cambios.

     <!-- Como código HTML -->
    <h1 class="main-title"></h1>

    {/* Como código JSX */}
    <h1 className="main-title"></h1>

  2. Se pueden asignar variables como en Vanilla JavaScript

    3. const title="Aprendiendo sobre JSX";

    <h1 className="main-title">{title}</h1>

  3. Así como se pueden usar variables también se puede usar más código de JavaScript para realizar cierta lógica dentro del documento, como pueden ser ciclos o condicionales

    4. Los bloques condicionales deben de ser de una sola línea por lo que si se va a hacer alguna comprobación se debe realizar con un operador ternario.

    <h1 className="main-title">
      {title ? "Aprendiendo sobre JSX" : "Debo estudiar JS"}
    </h1>

  4. Las etiquetas de HTML que no posean un cierre deben ser cerradas. Por ejemplo una etiqueta input o un img

    5.  <!-- En HTML --> 

    <img src="" alt="">

    {/* En JSX */}

    <img src="" alt=""/>

    //También hay casos como:

    <img src="" alt=""><img/>

  5. Todos los elementos que se vayan a renderizar deben estar anidados en una etiqueta contenedora

    6. Para esto tenemos dos opciones, utilizar cualquier etiqueta contenedora de HTML como un div, un main o un section pero React dentro de su API nos ofrece el React Fragment.

    Un React Fragment es un Componente de React que nos permite englobar otros componentes de nuestra aplicación, como una etiqueta contenedora maestra.

    ¿Y cuál es la diferencia entre un React Fragment y una etiqueta de HTML?🙋🏻‍♂️

    Al momento de compilar todos los archivos de un proyecto de React estos se transforman en las tecnologías básicas del desarrollo web: HTML, CSS y JS. La etiqueta contenedora que hayas elegido para anidar el resto de los componentes va a afectar semánticamente los componentes de la aplicación, por lo que debes tener cuidado si quieres englobar con una etiqueta HTML.

    React Fragment es una solución a este detalle ya que al compilar el proyecto este componente se vuelve "invisible" y permite una mejor lectura para los crawlers de los motores de búsqueda.

    <React.Fragment>
      <h1 className="main-title">{title}</h1>
    </React.Fragment>

    //O en su versión corta

    <>
      <h1 className="main-title">{title}</h1>
    </>

  6. Cada componente debe tener un return

    7. En este último punto vamos a unir todo lo anterior con un ejemplo de un documento JSX completo con un componente funcional.

    import React from "react";

    const Titulo = ( ) => {
      const title = "Aprendiendo sobre JSX"
      return (
        <>
          <h1 className="main-title">{title}</h1>
        </>
      )
    }

    export default Titulo

En el ejemplo de arriba tenemos un componente llamado Titulo. Se le llama componente funcional porque es creado a través de una función de JS y como toda función, debe retornar algo, en este caso un h1; también existen componentes de clases que son creados a partir de clases de JS y utilizan el método render para mostrar la información en la pantalla del navegador.

Los ejemplos de esta sección serán creados con componentes funcionales ya que son la forma moderna de trabajar con React JS. Próximamente se vendrán más temas como los props y cómo crear componentes. 😃

Volver