freeCodeCamp

2.9 KiB

Raw Blame History

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

Description

Até agora, você aprendeu que o JSX é uma ferramenta conveniente para escrever HTML legível em JavaScript. Com o React, podemos renderizar esse JSX diretamente para o HTML DOM usando a API de renderização do React, conhecida como ReactDOM. O ReactDOM oferece um método simples para renderizar os elementos React no DOM que se parece com: ReactDOM.render(componentToRender, targetNode) , em que o primeiro argumento é o elemento ou componente React que você deseja renderizar, e o segundo argumento é o nó DOM para o qual você deseja renderizar o componente. Como seria de esperar, ReactDOM.render() deve ser chamado após as declarações de elementos JSX, assim como você deve declarar as variáveis antes de usá-las.

Instructions

O editor de código possui um componente JSX simples. Use o método ReactDOM.render() para renderizar esse componente para a página. Você pode passar elementos JSX definidos diretamente como o primeiro argumento e usar document.getElementById() para selecionar o nó DOM para renderizá-los. Existe um div com id='challenge-node' disponível para você usar. Certifique-se de não alterar a constante de JSX .

Tests

tests:
  - text: A constante <code>JSX</code> deve retornar um elemento <code>div</code> .
    testString: 'assert(JSX.type === "div", "The constant <code>JSX</code> should return a <code>div</code> element.");'
  - text: O <code>div</code> deve conter uma tag <code>h1</code> como o primeiro 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: O <code>div</code> deve conter uma tag <code>p</code> como o 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: O elemento JSX fornecido deve renderizar para o nó DOM com o nó de <code>challenge-node</code> identificação.
    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.9 KiB Raw Blame History Unescape Escape