freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/add-comments-in-jsx.spanish.md

id, title, challengeType, isRequired, videoUrl, localeTitle

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24bbe0dba28a8d3cbd4c5e	Add Comments in JSX	6	false		Añadir comentarios en JSX

Description

JSX es una sintaxis que se compila en JavaScript válido. A veces, para facilitar la lectura, es posible que necesite agregar comentarios a su código. Como la mayoría de los lenguajes de programación, JSX tiene su propia manera de hacer esto. Para colocar comentarios dentro de JSX, usa la sintaxis {/* */} para envolver el texto del comentario.

Instructions

El editor de código tiene un elemento JSX similar al que creaste en el último desafío. Agregue un comentario en algún lugar dentro del elemento div proporcionado, sin modificar los elementos h1 o p existentes.

Tests

tests:
  - text: La constante <code>JSX</code> debe devolver un elemento <code>div</code>.
    testString: 'assert(JSX.type === "div", "La constante <code>JSX</code> debe devolver un elemento <code>div</code>");'
  - text: El <code>div</code> debe contener una etiqueta <code>h1</code> como el primer elemento.
    testString: 'assert(JSX.props.children[0].type === "h1", "El <code>div</code> debe contener una etiqueta <code>h1</code> como el primer elemento.");'
  - text: El <code>div</code> debe contener una etiqueta <code>p</code> como el segundo elemento.
    testString: 'assert(JSX.props.children[1].type === "p", "El <code>div</code> debe contener una etiqueta <code>p</code> como el segundo elemento.");'
  - text: El <code>JSX</code> debe incluir un comentario.
    testString: 'getUserInput => assert(getUserInput("index").includes("/*") && getUserInput("index").includes("*/"), "El <code>JSX</code> debe incluir un comentario.");'

Challenge Seed

const JSX = (
  <div>
    <h1>This is a block of JSX</h1>
    <p>Here's a subtitle</p>
  </div>
);

After Test

console.info('after the test');

Solution

const JSX = (
<div>
  <h1>This is a block of JSX</h1>
  { /* this is a JSX comment */ }
  <p>Here's a subtitle</p>
</div>);