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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5e	Agrega comentarios en JSX	6	301376	add-comments-in-jsx

--description--

JSX es una sintaxis que se compila en JavaScript válido. A veces, para facilitar la lectura, es necesario añadir comentarios al código. Como la mayoría de los lenguajes de programación, JSX tiene su propia manera de hacerlo.

Para agregar comentarios dentro de JSX, se utiliza 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. Agrega un comentario en algún lugar dentro del elemento div, sin modificar los elementos h1 o p.

--hints--

La constante JSX debe devolver un elemento div.

assert(JSX.type === 'div');

El elemento div debe contener una etiqueta h1 como primer elemento.

assert(JSX.props.children[0].type === 'h1');

El elemento div debe contener una etiqueta p como segundo elemento.

assert(JSX.props.children[1].type === 'p');

Los elementos h1 y p existentes no deben ser modificados.

assert(
  JSX.props.children[0].props.children === 'This is a block of JSX' &&
    JSX.props.children[1].props.children === "Here's a subtitle"
);

El elementoJSX debe usar una sintaxis de comentario válida.

assert(/<div>[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

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

--solutions--

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