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

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24bbe0dba28a8d3cbd4c5d	Create a Complex JSX Element	6	false		Crie um elemento JSX complexo

Description

O último desafio foi um exemplo simples de JSX, mas o JSX também pode representar HTML mais complexo. Uma coisa importante a saber sobre o JSX aninhado é que ele deve retornar um único elemento. Esse elemento pai único envolveria todos os outros níveis de elementos aninhados. Por exemplo, vários elementos JSX escritos como irmãos sem elemento wrapper pai não serão transpilados. Veja um exemplo: JSX válido:

<div>
<p> Parágrafo um </ p>
<p> Parágrafo dois </ p>
<p> Parágrafo 3 </ p>
</ div>

JSX inválido:

<p> Parágrafo um </ p>
<p> Parágrafo dois </ p>
<p> Parágrafo 3 </ p>

Instructions

Defina uma nova constante JSX que renderize uma div que contenha os seguintes elementos em ordem: Uma h1 , uma p e uma lista não ordenada que contém três itens li . Você pode incluir qualquer texto que desejar em cada elemento. Nota: Ao renderizar vários elementos como este, você pode agrupá-los entre parênteses, mas isso não é estritamente necessário. Observe também que esse desafio usa uma tag div para envolver todos os elementos filhos em um único elemento pai. Se você remover o div , o JSX não será mais transpelado. Lembre-se disso, pois isso também será aplicado quando você retornar elementos JSX nos componentes do React.

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>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 <code>div</code> deve conter uma tag <code>ul</code> como o terceiro elemento.
    testString: 'assert(JSX.props.children[2].type === "ul", "The <code>div</code> should contain a <code>ul</code> tag as the third 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>ul</code> deve conter três elementos <code>li</code> .
    testString: 'assert(JSX.props.children[2].props.children.length === 3, "The <code>ul</code> should contain three <code>li</code> elements.");'

Challenge Seed

// write your code here

After Test

console.info('after the test');

Solution

// solution required