17/11/2024
Hoje vamos falar um pouco sobre a ferramenta React.
- Aula 01
Você sabia que o 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.
Praticando:
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.
https://www.freecodecamp.org/portuguese/learn/front-end-development-libraries/react/create-a-simple-jsx-element
