2.8 KiB
2.8 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
5a24bbe0dba28a8d3cbd4c5f | Render HTML Elements to the DOM | 6 | false | Renderizar elementos HTML al DOM |
Description
ReactDOM.render(componentToRender, targetNode)
, donde el primer argumento es el elemento o componente React que desea procesar y el segundo argumento es el nodo DOM que desea hacer que el componente. Como es de esperar, se debe llamar a ReactDOM.render()
después de las declaraciones del elemento JSX, tal como se deben declarar las variables antes de usarlas. Instructions
ReactDOM.render()
para procesar este componente en la página. Puede pasar los elementos JSX definidos directamente como primer argumento y usar document.getElementById()
para seleccionar el nodo DOM para representarlos. Hay un div
con id='challenge-node'
disponible para que lo uses. Asegúrate de no cambiar la constante JSX
. Tests
tests:
- text: La constante <code>JSX</code> debe devolver un elemento <code>div</code> .
testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
- text: El <code>div</code> debe contener una etiqueta <code>h1</code> como el primer elemento.
testString: 'assert(JSX.props.children[0].type === "h1", "The <code>div</code> should contain an <code>h1</code> tag as the first element.");'
- text: El <code>div</code> debe contener una etiqueta <code>p</code> como el segundo elemento.
testString: 'assert(JSX.props.children[1].type === "p", "The <code>div</code> should contain a <code>p</code> tag as the second element.");'
- text: El elemento JSX proporcionado se debe representar en el nodo DOM con id <code>challenge-node</code> .
testString: 'assert(document.getElementById("challenge-node").childNodes[0].innerHTML === "<h1>Hello World</h1><p>Lets render this to the DOM</p>", "The provided JSX element should render to the DOM node with id <code>challenge-node</code>.");'
Challenge Seed
const JSX = (
<div>
<h1>Hello World</h1>
<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
Solution
// solution required