3.0 KiB
3.0 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bb1 | Create a Simple JSX Element | 6 | false | Crear un elemento JSX simple |
Description
{ '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
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