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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7dbc367417b2b2512bb1	Criar um elemento JSX simples	6	301390	create-a-simple-jsx-element

--description--

O React é uma biblioteca de visualização de código aberto criada e mantida pelo Facebook. É uma ótima ferramenta para renderizar a interface do usuário (IU) de aplicações web modernas.

React usa a sintaxe de extensão do JavaScript chamada JSX que o permite escrever HTML diretamente no JavaScript. Isso possui diversos benefícios. Ela permite a você usar todo o poder programático do JavaScript dentro do HTML, e ajuda a manter o seu código legível. Em grande parte, JSX é semelhante ao HTML que você já aprendeu, no entanto existem algumas diferenças chaves que cobriremos durante esses desafios.

Por exemplo, porque o JSX é uma extensão sintática de JavaScript, você realmente pode escrever JavaScript diretamente dentro do JSX. Para isso, você simplesmente inclui o código que você quer que seja tratado como JavaScript dentro de chaves: {'this is treated as JavaScript code'}. Mantenha isso em mente, já que é utilizado em diversos desafios futuros.

No entanto, porque JSX não é JavaScript válido, código JSX precisa ser compilado em JavaScript. O transpilador Babel é uma ferramenta popular para esse processo. Para sua conveniência, já está adicionado por trás dos panos para esses desafios. Se por acaso você escrever JSX inválido sintaticamente, você verá o primeiro teste nesses desafios falhar.

Vale a pena notar que por trás dos panos os desafios estão chamando ReactDOM.render(JSX, document.getElementById('root')). Essa chamada de função é o que coloca seu JSX na representação leve do DOM própria do React. React então usa snapshots de seu próprio DOM para otimizar a atualização apenas de partes específicas do DOM.

--instructions--

O código atual usa JSX para atribuir um elemento div à constante JSX. Substitua o elemento div por um h1 e adicione o texto Hello JSX! dentro dele.

--hints--

A constante JSX deve retornar um elemento h1.

assert(JSX.type === 'h1');

A tag h1 deve incluir o texto Hello JSX!

assert(Enzyme.shallow(JSX).contains('Hello JSX!'));

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

const JSX = <div></div>;

--solutions--

const JSX = <h1>Hello JSX!</h1>;