Cómo crear elementos de React con JSX

El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for DOnations.

Introducción

En este tutorial, aprenderá a describir elementos con JSX. JSX es una abstracción que le permite escribir sintaxis HTML en su código de JavaScript y le permitirá crear componentes de React similares al marcado HTML estándar. JSX es el lenguaje de creación de plantillas de los elementos de React y, por tanto, es la base para cualquier marcado que React procese en su aplicación.

Como JSX le permite también escribir JavaScript en su marcado, podrá aprovechar las funciones y métodos de JavaScript, incluyendo asignaciones de matrices y evaluación de cortocircuitos para condicionales.

Como parte del tutorial, aprenderá a capturar eventos de clic en los botones directamente en el marcado y actualizar instancias cuando la sintaxis no coincida exactamente con el HTML estándar, como por ejemplo con clases CSS. Tras este tutorial, tendrá una aplicación funcional que usa varias funciones de JSX para ver una lista de elementos de escucha de clics incorporado. Es un patrón común en aplicaciones de React que usará a menudo a medida que se familiariza con el marco. También podrá mezclar elementos HTML estándar con JavaScript para ver cómo React le permite crear pequeños conjuntos de código reutilizables.

Requisitos previos

• Necesitará un entorno de desarrollo que se ejecute con Node.js. Este tutorial se probó en la versión 10.19.0 de Mode.js y en la 6.13.4 de npm. Para instalarlo en macOS o Ubuntu 18.04, siga los pasos de Cómo instalar Node.js y crear un entorno de desarrollo local en macOS o las indicaciones de la sección Instalación con un PPA de Cómo instalar Node.js en Ubuntu 18.04.

• Deberá ser capaz de crear aplicaciones con Create React App. Puede encontrar instrucciones para instalar una aplicación con Create React App en Cómo configurar un proyecto de React con Create React App.

• También necesitará conocimientos básicos de JavaScript, que puede encontrar en Cómo codificar en JavaScript, junto con conocimientos básicos de HTML y CSS. Un recurso adecuado para HTML y CSS es Mozilla Developer Network.

Paso 1: Agregar marcado a un elemento de React

Como ya se dijo, React tiene un lenguaje de marcado especial llamado JSX. Es una mezcla de HTML y de sintaxis de JavaScript que tiene un aspecto similar a este:

<div>
  {inventory.filter(item => item.available).map(item => (
    <Card>
        <div className="title"}>{item.name}</div>
        <div className="price">{item.price}</div>
    </Card>
    ))
  }
</div>

Reconocerá algunas funcionalidades de JavaScript como .filter y .map, así como HTML estándar como <div>. Pero hay otras partes que se parecen a HTML y JavaScript, como <Card> y className.

Es JSX, el lenguaje de marcado especial que proporciona un aspecto de HTML a los componentes de React con el poder de JavaScript.

En este paso, aprenderá a añadir sintaxis básica de HTML a un elemento de React existente. Para comenzar, añadirá elementos HTML estándar a una función de JavaScript y verá el código compilado en un navegador. Agrupe también elementos para que React pueda compilarlos con un marcado mínimo obteniendo un resultado HTML limpio.

Para comenzar, cree un nuevo proyecto. En su línea de comandos, ejecute la siguiente secuencia de comandos para instalar un proyecto nuevo usando create-react-app:

npx create-react-app jsx-tutorial

Tras finalizar el proyecto, cambie al directorio:

cd jsx-tutorial

En una nueva pestaña o ventana de terminal, inicie el proyecto usando la secuencia de comandos de inicio de Create React App. El navegador actualizará los cambios automáticamente, así que deje que esta secuencia de comandos se ejecute mientras usted trabaja:

npm start

Obtendrá un servidor local activo. Si el proyecto no se abrió en una ventana de navegador, puede encontrarlo en http://localhost:3000/. Si lo ejecuta desde un servidor remoto, la dirección será http://your_IP_address:3000.

Su navegador cargará una aplicación React incluida como parte de Create React App.

Creará un conjunto completamente nuevo de componentes personalizados, por lo que deberá comenzar eliminando un código de texto estándar para poder tener un proyecto vacío. Empiece abriendo App.js en un editor de texto. Es el componente root que se inserta en la página. Todos los componentes empezarán desde aquí.

En un nuevo terminal, vaya a la carpeta del proyecto y abra src/App.js con el siguiente comando:

nano src/App.js

Verá un archivo como este:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Ahora, elimine el logo de importación de línea desde './logo.svg y todo lo siguiente a la instrucción de return en la función. Cámbielo para que se vuelva null. El código final tendrá el siguiente aspecto:

import React from 'react';
import './App.css';

function App() {
  return null;
}

export default App;

Guarde y salga del editor de texto.

Por último, elimine el logo. En la ventana del terminal escriba el siguiente comando:

rm src/logo.svg

No usará este archivo SVG en su aplicación y debería eliminar los archivos que no se usan según va trabajando. Organizará mejor su código a largo plazo.

Una vez eliminadas estas partes de su proyecto, puede continuar estudiando las facetas de JSX. React compila este lenguaje de marcado y, finalmente, convierte el HTML que ve en una página web. Sin extenderse mucho en los pormenores, React toma el JSX y crea un modelo del aspecto que tendrá su página y, a continuación, crea los elementos necesarios y los añade a la página.

Eso significa que puede escribir lo que se parece a HTML y esperar que el HTML emitido sea similar. Sin embargo, hay algunas trampas.

Primero, si mira la pestaña o la ventana en la que se está ejecutando su servidor, verá esto:

Output
...
./src/App.js
  Line 1:8:  'React' is defined but never used  no-unused-vars
...

Es el linter que le indica que no usa el código de React importado. Al añadir la línea import React de 'react' a su código, importa el código de JavaScript que convierte JSX en un código React. Si no hay JSX, no necesita importar.

Podemos cambiarlo añadiendo una pequeña cantidad de JSX. Comience sustituyendo null con Hello, World, por ejemplo:

import React from 'react';
import './App.css';

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

Guarde el archivo. Si ve el terminal con el servidor en ejecución, desaparecerá el mensaje de advertencia. Si entra en su navegador, verá el mensaje como un elemento h1.

A continuación, debajo de la etiqueta <h1>, añada una etiqueta de párrafo que contiene la cadena I am writing JSX. El código tendrá el siguiente aspecto:

import React from 'react';
import './App.css';

function App() {
  return(
    <h1>Hello, World</h1>
    <p>I am writing JSX</p>
  )
}

export default App;

Ya que JSX abarca varias líneas, deberá escribir la expresión entre paréntesis.

Guarde el archivo. Al hacerlo, verá un error en el terminal que ejecuta su servidor:

Output
./src/App.js
  Line 7:5:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 |   return(
   6 |     <h1>Hello, World</h1>
>  7 |     <p>I am writing JSX</p>
     |     ^
   8 |   )
   9 | }
  10 |

Cuando devuelve JSX de una función o instrucción, debe devolver un único elemento. Es posible que ese elemento tenga partes anidadas, pero debe haber un único elemento de nivel superior. En este caso, devuelve dos elementos.

El ajuste es un cambio de código pequeño. Rodee el código con una etiqueta vacía. Una etiqueta vacía es un elemento HTML sin palabras. Tiene el siguiente aspecto: <></>.

Vuelva a ./src/App.js en su editor y añada la etiqueta vacía:

import React from 'react';
import './App.css';

function App() {
  return(
    <>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </>
  )
}

export default App;

La etiqueta vacía crea un único elemento, pero no se añade al marcado final cuando se compila el código. Esto mantendrá su código limpio y le da a React un único elemento.

Guarde el código y salga del archivo. Su navegador se actualizará y mostrará la página actualizada con el elemento de párrafo. Además, cuando se convierte el código, las etiquetas vacías se eliminarán:

Ya agregó un conjunto de JSX básico a su componente y aprendió cómo deben anidarse todos los JSX en un único componente. En el siguiente paso, añadirá un estilo a su componente.

Paso 2: Agregar estilos a un elemento con atributos

En este paso, dará estilo a los elementos de su componente para saber cómo funcionan los atributos HTML con JSX. Existen muchas opciones de estilo en React. Algunas de ellas incluyen escribir CSS en Javascript y otras usan preprocesadores. En este tutorial, trabajará con clases de CSS y CSS importadas.

Ahora que tiene su código, debe añadir un estilo. Abra App.css en su editor de texto:

nano src/App.css

Ya que empieza con un JSX nuevo, la CSS actual se refiere a los elementos que ya no existen. Como no necesita CSS, puede eliminarla.

Después de eliminar el código, tendrá un archivo vacío.

A continuación, añada un estilo al centro del texto. En src/App.css, añada el siguiente código:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

En este bloque de código, creó un selector de clase CSS llamado .container y lo utilizó para centrar el contenido usando display:flex.

Guarde el archivo y salga. El navegador se actualizará, pero no cambiará nada. Antes de poder ver el cambio, deberá añadir la clase CSS a su componente React. Abra el código de JavaScript del componente:

nano src/App.js

El código CSS ya se importó con la línea import'. /App.css'. Esto significa que webpack extraerá el código para crear una hoja de estilo final, pero deberá añadir las clases para aplicar CSS a sus elementos.

En primer lugar, en su editor de texto, cambie las etiquetas vacías <>, a <div>.

import React from 'react';
import './App.css';

function App() {
  return(
    <div>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

En este código, sustituyó las etiquetas vacías, <>, por etiquetas div. Las etiquetas vacías son útiles para agrupar su código sin añadir otras adicionales, pero aquí necesita usar un div porque las etiquetas vacías no aceptan atributos HTML.

A continuación, deberá añadir el nombre de clase. Es donde JSX comenzará a diferir de HTML. Si desea añadir una clase a un elemento HTML habitual, debería hacerlo como se indica a continuación:

<div class="container">

Pero, dado que JSX es JavaScript, tiene algunas limitaciones. Una de las limitaciones es que JavaScript tiene palabras clave reservadas. Eso significa que no puede usar determinadas palabras en ningún código de JavaScript. Por ejemplo, no puede crear una variable llamada null porque esa palabra ya está reservada.

Una de las palabras reservadas es class. React trata esta palabra reservada cambiándola ligeramente. En vez de añadir el atributo class, añadirá el atributo className. Como regla general, si un atributo no funciona como se espera, intente añadir la versión con capitalización Camel. Otro atributo ligeramente diferente es el atributo for que podría usar para las etiquetas. Hay otros casos, pero afortunadamente la lista es bastante corta.

Ahora que ya sabe cómo se usa el atributo class en React, puede actualizar su código para incluir los estilos. En su editor de texto, añada className="container" a su etiqueta de apertura div:

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Guarde el archivo. Al hacerlo, se volverá a cargar la página y el contenido se centrará.

El atributo className es único en React. Puede añadir la mayoría de atributos HTML a JSX sin ningún cambio. Como ejemplo, vuelva a su editor de texto y añada un id de saludo a su elemento <h1>. Tendrá el aspecto de HTML estándar:

import React from 'react';
import './App.css';

function App() {
  return(
    <div className="container">
      <h1 id="greeting">Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Guarde la página y vuelva a cargar el navegador. Será igual.

Hasta ahora, JSX tiene el aspecto de marcado estándar, pero su ventaja es que, aunque se parece a HTML, tiene el poder de JavaScript. Eso significa que puede asignar variables y referenciarlas en sus atributos. Para referenciar un atributo, encapsúlelo entre llaves {}, en vez de comillas.

En su editor de texto, añada las siguientes líneas resaltadas para hacer referencia a un atributo:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
     <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

En este código, creó una variable sobre la instrucción return denominada saludo con el valor de "greeting", y referenció luego la variable en el atributo id de su etiqueta <h1>.

Guarde el archivo y ciérrelo. La página será la misma, pero con una etiqueta id.

Hasta ahora, trabajó con algunos elementos propios, pero también puede usar JSX para añadir muchos elementos HTML y anidarlos para crear páginas complejas.

Para mostrárselo, creará una página con una lista de emojis. Estos emojis se encapsularán con un elemento <button>. Cuando haga clic en el emoji, obtendrá su CLDR Short Name.

Para comenzar, deberá añadir algunos elementos más a la página. Abra src/App.js en su editor de texto. Manténgalo abierto durante este paso.

nano src/App.js

Primero, añada una lista de emojis añadiendo las siguientes líneas resaltadas:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
            <button>
              <span role="img" aria-label="grinning face" id="grinning face">😀</span>
            </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Así crea una etiqueta <ul> que contenga una lista de emojis. Cada emoji está en un elemento <li> distinto y está rodeado de un elemento <button>. En el siguiente paso, añadirá un evento a este botón.

También rodeó el emoji con una etiqueta <span> que tiene algunos atributos más. Cada span tiene el atributo role configurado en el rol img. Esto indicará al software de accesibilidad que el elemento está actuando como una imagen. Además, cada <span> también tiene un atributo aria-label y un id con el nombre del emoji. aria-label le indicará a los visitantes con lectores de pantalla qué se muestra. Usará el id al escribir eventos en el siguiente paso.

Al escribir código de esta forma, usa elementos semánticos que ayudan a que la página sea accesible y fácil de analizar para los lectores de pantalla.

Guarde el archivo y ciérrelo. Su navegador se actualizará, y verá lo siguiente:

Ahora añada un poco de estilo. Abra el código CSS en su editor de texto:

nano src/App.css

Añada el siguiente código resaltado para eliminar el fondo y margen predeterminados de los botones además de aumentar el tamaño de fuente:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    font-size: 2em;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

ul {
    display: flex;
    padding: 0;
}

li {
    margin: 0 20px;
    list-style: none;
    padding: 0;
}

En este código, usó font-size, border y otros parámetros para ajustar el aspecto de sus botones y cambiar la fuente. También eliminó los estilos de la lista y añadió display:flex al elemento <ul> para que sea horizontal.

Guarde y cierre el archivo CSS. Su navegador se actualizará, y verá lo siguiente:

Ya ha trabajado con varios elementos de JSX que se parecen a un HTML normal. Ha agregado clases, ids y etiquetas aria, y ha trabajado con datos como cadenas y variables. Pero React también usa atributos para definir cómo deben responder sus elementos a los eventos de usuario. En el siguiente paso, comenzará a hacer que la página sea interactiva añadiendo eventos al botón.

Paso 3: Agregar eventos a elementos

En este paso, añadirá eventos a elementos usando atributos especiales y capturará un evento de clic en un elemento de botón. Aprenderá cómo capturar información del evento para enviar otra acción o usar otra información en el ámbito del archivo.

Ahora que tiene una página básica con información, debe añadirle algunos eventos. Hay muchos gestores de eventos que puede añadir a elementos HTML. React le proporciona acceso a todos estos. Como su código de JavaScript está unido a su marcado, puede añadir rápidamente los eventos y mantener su código bien organizado.

Para comenzar, añada el gestor de eventos onclick. Esto le permite añadir un código de JavaScript directamente a su elemento, en vez de añadir una escucha de eventos:

import React from 'react';
import './App.css';

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={event => alert(event.target.id)}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Como se trata de JSX, usó la capitalización Camel para onclick, lo que significa que la añadió como onClick. Este atributo onClick usa una función anónima para obtener información sobre el elemento sobre el que se hizo clic.

Añadió una función de flecha anónima que obtendrá el evento del botón pulsado, y el evento tendrá un destino que es el elemento <span>. La información que necesita está en el atributo id al que puede acceder con event.target.id. Puede activar la alerta con la función alert().

Guarde el archivo. En su navegador, haga clic en uno de los emojis y obtendrá una alerta con el nombre.

Puede reducir una duplicación declarando la función una vez y pasándola a cada acción onClick. Como la función solo se basa en entradas y resultados, puede declararla fuera de la función de componente principal. En otras palabras, la función no necesita acceso al ámbito del componente. La ventaja de mantenerlos separados es que su función de componente es ligeramente más corta, y podría mover la función a un archivo separado después si quisiera.

En su editor de texto, cree una función denominada displayEmojiName que toma el evento e invoca la función alert() con un id. Luego, pase la función a cada atributo onClick:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={displayEmojiName}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={displayEmojiName}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={displayEmojiName}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Guarde el archivo. En su navegador, haga clic en un emoji y verá la misma alerta.

En este paso, añadió eventos a cada elemento. También aprendió cómo JSX usa nombres ligeramente diferentes para los eventos de elementos y empezó a escribir código reutilizable tomando la función y volviendo a usarla en varios elementos. En el siguiente paso, escribirá una función reutilizable que devuelve elementos de JSX, en vez de escribir cada elemento a mano. Esto reducirá aún más la duplicación.

Paso 4: Asignar datos para crear elementos

En este paso, aprenderá a usar JSX como marcado simple. Aprenderá a combinarlo con JavaScript para crear un marcado dinámico que reduzca el código y mejore la legibilidad. Volverá a factorizar su código en una matriz que enlazará para crear elementos HTML.

JSX no lo limita a una sintaxis HTML. También le permite usar JavaScript directamente en su marcado. Ya lo probó antes al pasar funciones a atributos. También utilizó variables para volver a usar datos. Ahora, es momento de crear JSX directamente desde los datos usando el código de JavaScript estándar.

En su editor de texto, deberá crear una matriz de datos de emoji en el archivo src/App.js. Vuelva a abrir el archivo si lo cerró:

nano src/App.js

Añada una matriz que contendrá objetos que tienen el emoji y el nombre del emoji. Tenga en cuenta que los emojis deben ir entre comillas. Cree esta matriz sobre la función App:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: "😀",
    name: "grinning face"
  },
  {
    emoji: "🎉",
    name: "party popper"
  },
  {
    emoji: "💃",
    name: "woman dancing"
  }
];

function App() {
...
}

export default App;

Ahora que tiene los datos, puede enlazarlos. Para usar JavaScript dentro de JSX, deberá rodearla con llaves: {}. Es el mismo proceso que cuando añadió funciones a atributos.

Para crear componentes de React, deberá convertir los datos a elementos JSX. Para ello, asignará los datos y devolverá un elemento JSX. Hay algunas cosas que deberá tener en cuenta al escribir el código.

En primer lugar, un grupo de elementos debe estar rodeado de un contenedor <div>. En segundo lugar, cada elemento necesita una propiedad especial denominada clave. La clave debe ser un único dato que use React para rastrear los elementos y poder saber así cuando actualizar el componente. La clave se eliminará del HTML compilado, dado que es solo para fines internos. Siempre que trabaje con bucles, deberá añadir una cadena sencilla como clave.

Le mostramos un ejemplo sencillo que asigna una lista de nombres a un contenedor <div>:

...
const names = [
    "Atul Gawande",
    "Stan Sakai",
    "Barry Lopez"
];

return(
    <div>
        {names.map(name => <div key={name}>{name}</div>)}
    </div>
)
...

El HTML resultante tendrá el siguiente aspecto:

...
<div>
    <div>Atul Gawande</div>
    <div>Stan Sakai</div>
    <div>Barry Lopez</div>
</div>
...

Convertir la lista de emojis será similar. El <ul> será el contenedor. Asignará datos y devolverá un <li> con una clave del nombre del emoji. Sustituya los datos con codificación fija en las etiquetas <button> y <span> con información del bucle.

En su editor de texto, añada lo siguiente:

import React from 'react';
import './App.css';

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

En su código, asignó sobre la matriz de emojis en la etiqueta <ul> y obtuvo un <li>. En cada <li>, usó el nombre del emoji como propiedad de clave. El botón tendrá la misma función de siempre. En el elemento <span>, sustituya aria-label e id por name. El contenido de la etiqueta <span> debería ser el emoji.

Guarde el archivo. Su ventana se actualizará y verá los datos. Verá que no está la clave en el HTML generado.

La combinación de JSX con JavaScript estándar le proporciona muchas herramientas para crear contenido dinámico, y puede usar cualquier tipo de JavaScript estándar que quiera. En este paso, sustituyó JSX con codificación fija por una matriz y un bucle para crear HTML de manera dinámica. En el siguiente paso, mostrará información de forma condicional usando cortocircuitos.

Paso 5: Mostrar condicionalmente elementos con cortocircuitos

En este paso, usará los cortocircuitos para mostrar condicionalmente determinados elementos HTML. Esto le permitirá crear componentes que pueden ocultar o mostrar HTML basándose en información adicional, dando flexibilidad a sus componentes para gestionar múltiples situaciones.

Hay momentos en los que necesitará que un componente muestre información en algunos casos y no en otros. Por ejemplo, puede querer mostrar solo un mensaje de alerta para el usuario si ciertos casos son verdaderos o mostrar alguna información de cuenta para un administrador que no querría que un usuario normal viese.

Para ello, usará un cortocircuito. Esto significa que usará una condicional y, si la primera parte es verdadera, devolverá la información en la segunda parte.

Le mostramos un ejemplo. Si quisiera que solo apareciera un botón si el usuario inició sesión, rodearía el elemento con llaves y añadiría antes la condición.

{isLoggedIn && <button>Log Out</button>}

En este ejemplo, utiliza el operador &&, que devuelve el último valor si todo es verdadero. De lo contrario, devuelve false, que le indicará a React que no devuelva ningún marcado adicional. Si isLoggedIn es verdadero, React mostrará el botón. Si isLoggedIn es falso, no mostrará el botón.

Para probarlo, añada las siguientes líneas resaltadas:

import React from 'react';
import './App.css';

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
...
      </ul>
    </div>
  )
}

export default App;

En su editor de texto, creó una variable denominada displayAction con un valor de false. A continuación, rodeó la etiqueta <p> con llaves. Al comienzo de las llaves, añadió displayAction && para crear la condicional.

Guarde el archivo, y verá que el elemento desaparece en su navegador. Y, lo importante, tampoco aparecerá en el HTML generado. Esto no es lo mismo que ocultar un elemento con CSS. No existirá en el marcado final.

Ahora, el valor de displayAction presenta codificación fija, pero también puede almacenar ese valor como estado o aprobarlo como propiedad desde un componente principal.

En este paso, aprendió a mostrar condicionalmente elementos. Esto le permite crear componentes que se personalizan basándose en otra información.

Conclusión

En este momento, creó una aplicación personalizada con JSX. Aprendió a añadir elementos de tipo HTML a su componente, añadir estilos a estos elementos, pasar atributos para crear marcado semántico y accesible, y añadir eventos a los componentes. A continuación, mezcló JavaScript en su JSX para reducir código duplicado y mostrar y ocultar elementos condicionalmente.

Es la base que necesita para crear componentes futuros. Usando una combinación de JavaScript y HTML, puede crear componentes dinámicos que sean flexibles y permitir que su aplicación crezca y cambie.

Si desea obtener más información sobre React, consulte nuestra página sobre React.