<sectionid="description"> El último desafío fue un ejemplo simple de JSX, pero JSX también puede representar HTML más complejo. Una cosa importante que se debe saber sobre JSX anidado es que debe devolver un solo elemento. Este elemento primario envolvería todos los otros niveles de elementos anidados. Por ejemplo, varios elementos JSX escritos como hermanos sin elemento de envoltorio principal no se transpilarán. Aquí hay un ejemplo: <b>Valid JSX:</b><blockquote><div><br><p> Párrafo uno </p><br><p> Párrafo Dos </p><br><p> Párrafo Tres </p><br></div></blockquote><b>JSX no válido:</b><blockquote><p> Párrafo uno </p><br><p> Párrafo Dos </p><br><p> Párrafo Tres </p><br></blockquote></section>
<sectionid="instructions"> Defina una nueva constante <code>JSX</code> que muestre un <code>div</code> que contenga los siguientes elementos en orden: un <code>h1</code> , una <code>p</code> , y una lista desordenada que contenga tres elementos <code>li</code> . Puede incluir cualquier texto que desee dentro de cada elemento. <strong>Nota:</strong> Al representar varios elementos como este, puede envolverlos todos entre paréntesis, pero no es estrictamente necesario. También tenga en cuenta que este desafío utiliza una etiqueta <code>div</code> para envolver todos los elementos secundarios dentro de un único elemento principal. Si elimina el <code>div</code> , el JSX ya no se transpilará. Tenga esto en cuenta, ya que también se aplicará cuando devuelva elementos JSX en los componentes React. </section>