Cómo crear elementos de React con JSX

Introducción

En este tutorial, aprenderás a describir elementos con JSX. JSX es una abstracción que te permite escribir sintaxis similar a HTML en tu código JavaScript, lo que te permite crear componentes React con un marcado HTML estándar. JSX es el lenguaje de plantilla para elementos React y, por lo tanto, la base de cualquier marcado que React proporcione en tu aplicación.

Debido a que JSX le permite escribir JavaScript en su marcado, puede usar funciones y métodos de JavaScript, incluido el mapeo de matrices y la evaluación de cortocircuito para condicionales.

Como parte del tutorial, capturarás eventos de clic de botón directamente en el marcado y capturarás elementos cuya sintaxis no coincide exactamente con la del HTML estándar, como las clases CSS. Al finalizar este tutorial, tendrás una aplicación que utiliza diversas funciones JSX para mostrar una lista de elementos con un detector de clics integrado. Este es un patrón común en las aplicaciones React que usarás a menudo a lo largo del curso sobre el framework. También podrás combinar elementos HTML estándar con JavaScript para ver cómo React te permite crear código pequeño y reutilizable.

Requisitos previos

• Necesita un entorno de desarrollo que ejecute Node.js.
• Deberías poder crear una aplicación con Create React App.
• También necesitas conocimientos básicos de JavaScript.

Paso 1: Agregar marcado al elemento React

Como se mencionó anteriormente, React tiene un lenguaje de marcado especial llamado JSX. Es una combinación de sintaxis HTML y JavaScript similar a la siguiente:

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

Algunas funciones de JavaScript como .filter y .map, así como algunos HTML estándar como <div> Lo reconocerás. Pero hay otras partes como HTML y JavaScript, como <card> y nombre de clase.

Este es JSX, un lenguaje de marcado especial que le da a los componentes React la sensación de HTML con el poder de JavaScript.

En este paso, aprenderás a añadir primitivas similares a HTML a un elemento de React existente. Para empezar, añadirás elementos HTML estándar a una función de JavaScript y luego visualizarás el código compilado en el navegador. También agruparás elementos para que React pueda compilarlos con un marcado mínimo y una salida HTML limpia.

Para empezar, crea un nuevo proyecto. Ejecuta el siguiente script en la línea de comandos para instalar un nuevo proyecto usando create-react-app:

npx create-react-app jsx-tutorial

Una vez finalizado el proyecto, cambie al directorio:

cd jsx-tutorial

En una nueva pestaña o ventana de terminal, inicia el proyecto con el script de inicio "Crear aplicación React". El navegador se actualizará automáticamente para reflejar los cambios, así que ejecuta este script mientras trabajas:

npm start

Obtendrá un servidor local en ejecución. Si el proyecto no se abre en una ventana del navegador, puede encontrarlo en http://localhost:3000/. Si lo ejecuta desde un servidor remoto, la dirección será http://su_dirección_IP:3000.

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

Crearás un conjunto completamente nuevo de componentes personalizados, así que tendrás que empezar por limpiar el código repetitivo para tener un proyecto en blanco. Para empezar, abre App.js en un editor de texto. Este es el componente raíz que se inyectará en la página. Todos los componentes se iniciarán desde aquí.

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

nano src/App.js

Verás 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 la línea "import logo from './logo.svg'" y todo lo que esté después de la instrucción "return" en la función. Cámbielo a "return null". El código final se verá así:

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

Guardar y salir del editor de texto.

Finalmente, elimine el logotipo. En la ventana de terminal, escriba el siguiente comando:

rm src/logo.svg

No usarás este archivo SVG en tu aplicación y deberías eliminar los archivos no utilizados conforme avanzas. Esto mantendrá tu código mejor organizado a largo plazo.

Ahora que ya has terminado con estas partes de tu proyecto, puedes explorar los aspectos de JSX. React compila este lenguaje de marcado y lo convierte en el HTML que ves en una página web. Sin entrar en detalles, React toma JSX y crea un modelo de cómo debería verse tu página, luego crea los elementos necesarios y los añade a la página.

Esto significa que puedes escribir algo que parezca HTML y esperar que el HTML renderizado sea similar. Sin embargo, hay algunas desventajas.

Primero, si miras la pestaña o ventana que ejecuta tu servidor, verás esto:

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

Esta línea indica que no se está utilizando código React importado. Al añadir la línea de importación "react" a su código, se importa código JavaScript que convierte JSX en código React. Si JSX no está presente, no es necesario importarlo.

Vamos a cambiarlo añadiendo algo de JSX. Comencemos reemplazando "null" con un ejemplo de "Hola, mundo":

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

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

Luego, bajo la etiqueta <h1>Añade una etiqueta de párrafo que contenga la cadena que estoy escribiendo en JSX. El código se verá así:

import React from 'react';
import './App.css';
function App() {
return(
<h1>Hello, World</h1>
<p>I am writing JSX</p>
)
}
export default App;

Dado que JSX abarca varias líneas, es necesario encerrar la expresión entre paréntesis.

Guarde el archivo. Al hacerlo, verá un error en la 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 |

Al devolver JSX desde una función o directiva, se debe devolver un solo elemento. Este elemento puede tener elementos secundarios anidados, pero debe haber un elemento de nivel superior. En este caso, se devuelven dos elementos.

La solución es un pequeño cambio de código. Rodea el código con una etiqueta vacía. Una etiqueta vacía es un elemento HTML sin palabras. Se ve así: <> .

En su editor, regrese a ./src/App.js y agregue 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 elemento, pero no se añade al marcado final al compilar el código. Esto mantiene el código limpio y, al mismo tiempo, proporciona a React un único elemento.

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

Ahora que ha agregado algo de JSX básico a su componente y ha aprendido cómo se debe anidar todo el JSX dentro de un componente, agregará algo de estilo a su componente.

Paso 2: Agregar estilo a un elemento con atributos

En este paso, aplicarás estilo a los elementos de tu componente para aprender cómo funcionan los atributos HTML con JSX. React ofrece numerosas opciones de estilo. Algunas implican escribir CSS en JavaScript, mientras que otras usan preprocesadores. En este tutorial, trabajarás con clases CSS y CSS importado.

Ahora que tienes tu código, es hora de añadirle estilo. Abre App.css en tu editor de texto:

nano src/App.css

Dado que estás empezando con JSX nuevo, el CSS actual hará referencia a elementos que ya no existen. Como no necesitas el CSS, puedes eliminarlo.

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

A continuación, añadirás estilo al texto. En src/App.css, añade 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 usó para centrar el contenido usando display: flex .

Guarda el archivo y sal. El navegador se actualizará, pero no se producirá ningún cambio. Antes de ver el cambio, debes agregar la clase CSS a tu componente de React. Abre el código JavaScript del componente:

nano src/App.js

El código CSS ya se importó con la línea de importación “./App.css”. Esto significa que Webpack importará el código para crear una hoja de estilo final, pero para aplicar el CSS a los elementos, es necesario agregar las clases.

Primero, en su editor de texto, busque las etiquetas vacías <> a <div> Cambiar.

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, reemplazaste las etiquetas vacías —<>— por etiquetas div. Estas etiquetas son útiles para agrupar el código sin añadir etiquetas adicionales, pero deberías usar div aquí, ya que no aceptan atributos HTML.

A continuación, debes agregar el nombre de la clase. Aquí es donde JSX empieza a diferenciarse de HTML. Si quieres agregar una clase a un elemento HTML normal, hazlo así:

<div class="container">

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

Una de las palabras reservadas es "class". React soluciona este problema con un pequeño cambio. En lugar de añadir la propiedad "class", se añade la propiedad "className". Como regla general, si una propiedad no funciona correctamente, se intenta añadir la versión "camello case". Otra propiedad ligeramente diferente es "for", que se utiliza para las etiquetas. Hay algunas otras, pero por suerte la lista es relativamente corta.

Ahora que sabes cómo se usa el atributo de clase en React, puedes actualizar tu código para incluir estilos. En tu editor de texto, añade className="container" a la etiqueta div de apertura:

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;

Guarda el archivo. Al hacerlo, la página se recargará y el contenido se centrará.

El atributo className es exclusivo de React. Puedes añadir la mayoría de los atributos HTML a JSX sin necesidad de realizar cambios. Por ejemplo, vuelve a tu editor de texto y añade el ID de saludo al elemento. <h1> Añade el tuyo. Se verá como 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;

Guarda la página y recarga el navegador. Listo.

Hasta ahora, JSX parece un marcado estándar, pero su ventaja es que combina la potencia de JavaScript con la apariencia de HTML. Esto significa que puedes asignar variables y hacer referencia a ellas en tus propiedades. Para hacer referencia a una propiedad, enciérrala entre llaves ({}) en lugar de comillas.

En su editor de texto, agregue las siguientes líneas resaltadas para hacer referencia a una característica:

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 encima de la declaración de retorno llamada saludo con el valor &quot;saludo&quot; y luego la asignó a la variable en el atributo id de la etiqueta. <h1> Usted mismo se refirió.

Guarde el archivo y salga. La página será la misma, pero con una etiqueta de identificación.

Hasta ahora has trabajado con unos pocos elementos por sí solos, pero puedes usar JSX para agregar muchos elementos HTML y anidarlos para crear páginas complejas.

Para demostrarlo, crea una página con una lista de emojis. Estos emojis se envuelven con un elemento. Al hacer clic en un emoji, verás su nombre corto CLDR..

Para empezar, necesitas añadir algunos elementos más a la página. Abre src/App.js en tu editor de texto. Mantenlo abierto.

nano src/App.js

Primero, agrega una lista de emojis agregando los siguientes resaltados:

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;

Aquí tienes una etiqueta.

Creaste una lista de emojis para guardar. Cada emoji está en un elemento.
• Se encuentra separado y está rodeado por el elemento. En el siguiente paso, añadirá un evento a este botón..

  También puedes usar emojis con una etiqueta. <span> Lo has rodeado con otras propiedades. Cada intervalo tiene un atributo de rol establecido en el rol img. Esto indica al software de acceso que el elemento actúa como una imagen. Además, cada <span> Tiene una etiqueta aria y un atributo id llamado emoji. La etiqueta aria indica a los visitantes con lectores de pantalla qué se muestra. Usarás el id al escribir eventos más adelante.

  Cuando escribes código de esta manera, utilizas elementos semánticos, lo que ayuda a mantener la página accesible y fácil de analizar para los lectores de pantalla.

  Guarde y salga del archivo. Su navegador se actualizará y verá esto:

  

  Ahora añade estilo. Abre el código CSS en tu editor de texto:

  nano src/App.css

  Para eliminar el fondo y el borde predeterminados de los botones mientras aumenta el tamaño de fuente, agregue el siguiente código resaltado:

  .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, se utilizaron el tamaño de fuente, el margen y otros parámetros para ajustar la apariencia de los botones y cambiar la fuente. También se eliminaron los estilos de lista y se añadió "display:" al elemento.

  Doblar para que quede horizontal.

  Guarde y cierre el archivo CSS. Su navegador se actualizará y verá esto:

  

  Ya has trabajado con varios elementos JSX que parecen HTML normal. Has añadido clases, IDs y etiquetas aria, y has trabajado con datos como cadenas y variables. Sin embargo, React también usa atributos para especificar cómo deben responder tus elementos a los eventos del usuario. A continuación, empezarás a hacer la página interactiva añadiendo eventos al botón.

  Paso 3: Agregar eventos a los elementos

  En este paso, agregará eventos a elementos mediante atributos específicos y registrará un clic en un botón. Aprenderá a capturar información de eventos para enviar otra acción o usar otra información dentro del alcance del archivo.

  Ahora que tienes una página principal con información, es hora de añadirle eventos. Hay muchos controladores de eventos que puedes añadir a los elementos HTML. React te da acceso a todos ellos. Como tu código JavaScript está incluido en el marcado, puedes añadir eventos rápidamente manteniendo tu código bien organizado.

  Para empezar, añade un controlador de eventos onclick. Esto te permite añadir código JavaScript directamente a tu elemento en lugar de adjuntar un detector 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, se ha modificado el atributo onclick, lo que significa que se ha añadido como onClick. Esta propiedad onClick utiliza una función anónima para recuperar la información sobre el elemento en el que se hizo clic.

  Ha agregado una función de flecha anónima que recibe el evento del botón en el que se hizo clic y el evento tendrá un objetivo que es el elemento <span> La información que necesitas se encuentra en la propiedad id, a la que puedes acceder con event.target.id. Puedes habilitar la alerta con la función alert().

  Guarda el archivo. En tu navegador, haz clic en uno de los emojis y recibirás una alerta con su nombre.

  

  Puedes reducir una iteración declarando la función una vez y pasándola a cada acción onClick. Dado que la función solo depende de la entrada y la salida, puedes declararla fuera de la función principal del componente. En otras palabras, la función no necesita acceder al ámbito del componente. La ventaja de mantenerlas separadas es que la función del componente es un poco más corta y puedes moverla a un archivo aparte más adelante si lo deseas.

  En tu editor de texto, crea una función llamada displayEmojiName que capture el evento y llame a la función alert() con un identificador. Luego, pasa la función a cada propiedad 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;

  Guarda el archivo. En tu navegador, haz clic en un emoji y verás la misma advertencia.

  En este paso, añadiste eventos a cada elemento. También viste cómo JSX usa nombres ligeramente diferentes para los eventos de elemento y comenzaste a escribir código reutilizable tomando una función y reutilizándola en varios elementos. En el siguiente paso, escribes una función reutilizable que devuelve los elementos JSX en lugar de escribir cada elemento manualmente. Esto reduce aún más la duplicación.

  Paso 4 – Mapeo de los datos para crear elementos

  En este paso, irás más allá del simple uso de JSX como marcado. Aprenderás a combinarlo con JavaScript para crear marcado dinámico que reduce el código y mejora la legibilidad. Convertirás tu código en una matriz que recorrerás en bucle para crear elementos HTML.

  JSX no te limita como HTML. También te permite usar JavaScript directamente en tu marcado. Ya lo has probado pasando funciones a atributos. También has usado variables para reutilizar datos. Ahora es el momento de crear JSX directamente a partir de los datos usando código JavaScript estándar.

  En tu editor de texto, necesitas crear una matriz de datos de emojis en el archivo src/App.js. Si cerraste el archivo, vuelve a abrirlo:

  nano src/App.js

  Añade una matriz que contenga objetos que tengan el emoji y su nombre. Ten en cuenta que los emojis deben estar entre comillas. Crea esta matriz encima de 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 tienes los datos, puedes iterarlos. Para usar JavaScript dentro de JSX, debes encerrarlos entre llaves: {}. Esto es similar a cuando añadiste funciones a los atributos.

  Para crear componentes de React, necesitas convertir datos en elementos JSX. Para ello, asignas los datos y devuelves un elemento JSX. Hay algunos aspectos a tener en cuenta al escribir el código.

  En primer lugar, un grupo de elementos debe estar representado por un contenedor. <div> Rodeado. En segundo lugar, cada elemento necesita una propiedad especial llamada clave. La clave debe ser un dato único que React pueda usar para rastrear los elementos y saber cuándo actualizar el componente. La clave se elimina del HTML compilado, ya que es solo para fines internos. Debe agregar una cadena simple como clave siempre que trabaje con bucles.

  A continuación se muestra un ejemplo sencillo que muestra una lista de nombres en un <div> Se mapea:

  ...
  const names = [
  "Atul Gawande",
  "Stan Sakai",
  "Barry Lopez"
  ];
  return(
  <div>
  {names.map(name => <div key={name}>{name}</div>)}
  </div>
  )
  ...

  El HTML resultante se verá así:

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

  La conversión de la lista de emojis será similar. <ul> Será un contenedor. Mapeas los datos y un <li> Devuelve la clave del nombre corto del emoji. Codifica los datos en las etiquetas. <button> y <span> Reemplazarás con la información del anillo.

  En su editor de texto, agregue 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 el código, haga clic en la matriz de emojis en la etiqueta <ul> Mapa y uno <li> Regresar. En cualquier <li> Usaste el nombre del emoji como clave principal. El botón tendrá la misma funcionalidad que de costumbre. En el elemento <span>Reemplace aria-label e id con el nombre. Etiquetar contenido. <span> Debería ser un emoji.

  Guarde el archivo. La ventana se actualizará y verá los datos. Tenga en cuenta que la clave no está presente en el HTML generado.

  

  Combinar JSX con JavaScript estándar te ofrece numerosas herramientas para generar contenido dinámicamente, y puedes usar cualquier JavaScript estándar que desees. En este paso, reemplazaste el código JSX con una matriz y un bucle para generar HTML dinámicamente. En el siguiente paso, muestras la información condicionalmente mediante abreviaturas.

  Paso 5 – Mostrar condicionalmente los elementos en cortocircuito

  En este paso, usará códigos cortos para mostrar elementos HTML condicionalmente. Esto le permite crear componentes que pueden ocultar o mostrar HTML según información adicional, brindándoles flexibilidad para adaptarse a diferentes situaciones.

  Hay ocasiones en las que se necesita que un componente muestre información en algunos casos y no en otros. Por ejemplo, es posible que solo se quiera mostrar un mensaje de advertencia al usuario cuando se cumplan ciertas condiciones, o que se quiera mostrar información de la cuenta a un administrador que no se desea que vea un usuario normal.

  Para ello, se utiliza un cortocircuito. Es decir, se utiliza una condición y, si la primera parte es verdadera, se devuelve la información de la segunda parte.

  Aquí tienes un ejemplo: si quieres que un botón se muestre solo si el usuario ha iniciado sesión, rodea ese elemento con llaves y añade una condición.

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

  En este ejemplo, se usa el operador &&, que devuelve el último valor si todo es verdadero. De lo contrario, devuelve falso, lo que indica a React que no devuelva ningún marcado adicional. Si isLoggedIn es verdadero, React muestra el botón. Si isLoggedIn es falso, no lo muestra.

  Para probar esto, agregue 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 tu editor de texto, creaste una variable llamada displayAction con el valor falso. Luego, la etiqueta <p> Rodeaste displayAction con llaves. Al principio de las llaves, añadiste &amp;&amp; para crear una condición.

  Guarda el archivo y verás que el elemento desaparece en tu navegador. Es importante destacar que tampoco aparecerá en el HTML generado. Esto no es como ocultar un elemento con CSS. No aparecerá en el marcado final.

  

  Actualmente, el valor displayAction está codificado, pero también puedes almacenar ese valor como un estado o pasarlo como base desde un componente principal.

  En este paso, aprendiste a mostrar elementos condicionalmente. Esto te permite crear componentes que se pueden personalizar según otra información.

  Resultado

  En este punto, has creado una aplicación personalizada con JSX. Has aprendido a añadir elementos HTML a tu componente, a añadir elementos de estilo a dichos elementos, a pasar atributos para crear un marcado semántico y accesible, y a adjuntar eventos a los componentes. Después, has combinado JavaScript con tu JSX para reducir el código duplicado y mostrar y ocultar elementos condicionalmente.

  Esta es la base que necesitas para crear componentes futuros. Al combinar JavaScript y HTML, puedes crear componentes dinámicos y flexibles que permitan que tu aplicación crezca y se adapte.