2.9 KiB
2.9 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bb1 | Create a Simple JSX Element | 6 | false | Crie um elemento JSX simples |
Description
{ 'isto é tratado como código Javascript' }
. Tenha isso em mente, já que é usado em vários desafios futuros. No entanto, como o JSX não é um JavaScript válido, o código JSX deve ser compilado em JavaScript. O transpilador Babel é uma ferramenta popular para este processo. Para sua conveniência, este transpilador já foi adicionado nos bastidores para esses desafios. Se acontecer de você escrever JSX sintaticamente inválido, você verá o primeiro teste nesses desafios falhar. Vale a pena notar que 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 próprio React do DOM. O React usa instantâneos de seu próprio DOM para otimizar a atualização apenas de partes específicas do DOM real. Instructions
div
à constante JSX
. Substitua o div
por um elemento h1
e adicione o texto Hello JSX!
dentro dele. Tests
tests:
- text: A constante <code>JSX</code> deve retornar um elemento <code>h1</code> .
testString: 'assert(JSX.type === "h1", "The constant <code>JSX</code> should return an <code>h1</code> element.");'
- text: A tag <code>h1</code> deve incluir o texto <code>Hello JSX!</code>
testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The <code>h1</code> tag should include the text <code>Hello JSX!</code>");'
Challenge Seed
const JSX = <div></div>;
After Test
console.info('after the test');
Solution
// solution required