freeCodeCamp

2.8 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24bbe0dba28a8d3cbd4c5f	Render HTML Elements to the DOM	6	false		Renderizar elementos HTML al DOM

Description

Hasta ahora, ha aprendido que JSX es una herramienta conveniente para escribir HTML legible dentro de JavaScript. Con React, podemos procesar este JSX directamente al HTML DOM usando la API de renderizado de React conocida como ReactDOM. ReactDOM ofrece un método simple para representar elementos React al DOM, que se parece a esto: 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

El editor de código tiene un componente JSX simple. Utilice el método 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

2.8 KiB Raw Blame History