2.4 KiB
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>;