freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/create-a-simple-jsx-element.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
587d7dbc367417b2b2512bb1	Create a Simple JSX Element	6	false		Crear un elemento JSX simple

Description

Introducción: React es una biblioteca de vista de código abierto creada y mantenida por Facebook. Es una gran herramienta para representar la interfaz de usuario (UI) de las aplicaciones web modernas. React utiliza una extensión de sintaxis de JavaScript llamada JSX que le permite escribir HTML directamente dentro de JavaScript. Esto tiene varios beneficios. Le permite usar todo el poder programático de JavaScript dentro de HTML y ayuda a mantener su código legible. En su mayor parte, JSX es similar al HTML que ya ha aprendido, sin embargo, hay algunas diferencias clave que se cubrirán a lo largo de estos desafíos. Por ejemplo, como JSX es una extensión sintáctica de JavaScript, en realidad puede escribir JavaScript directamente dentro de JSX. Para hacer esto, simplemente incluya el código que desea que sea tratado como JavaScript entre llaves: { 'this is treated as JavaScript code' } . Tenga esto en cuenta, ya que se utiliza en varios desafíos futuros. Sin embargo, como JSX no es un JavaScript válido, el código JSX debe compilarse en JavaScript. El transpiler Babel es una herramienta popular para este proceso. Para su comodidad, ya se ha agregado entre bastidores para estos desafíos. Si escribes JSX sintácticamente no válido, verás que la primera prueba en estos desafíos falla. Vale la pena señalar que, bajo el capó, los desafíos se llaman ReactDOM.render(JSX, document.getElementById('root')) . Esta llamada a la función es lo que coloca a su JSX en la representación liviana del DOM de React. React luego utiliza las instantáneas de su propio DOM para optimizar la actualización de solo partes específicas del DOM real.

Instructions

Instrucciones: El código actual utiliza JSX para asignar un elemento div a la constante JSX . Reemplaza el div con un elemento h1 y agrega el texto Hello JSX! dentro de eso.

Tests

tests:
  - text: La constante <code>JSX</code> debería devolver un elemento <code>h1</code> .
    testString: 'assert(JSX.type === "h1", "The constant <code>JSX</code> should return an <code>h1</code> element.");'
  - text: La etiqueta <code>h1</code> debe incluir el texto <code>Hello JSX!</code>
    testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The <code>h1</code> tag should include the text <code>Hello JSX!</code>");'

Challenge Seed

const JSX = <div></div>;

After Test

console.info('after the test');

Solution

// solution required