O que é JSX? - Tutorial de React.js

Beleza, pessoal, a gente viu aqui, né, como que a gente utiliza o React. Na verdade, como que o React trabalha com o JavaScript para então criar os nossos elementos HTML aqui dentro da nossa div app. Porém, a gente chegou na conclusão de que isso aqui é inviável para quando a gente for trabalhar aí com aplicações grandes e tudo mais. Eu vou até deixar isso aqui mais legível. Aqui, aqui e aqui. Beleza, então tem aqui o h1 e o span dentro, né? Legal! E o que que a gente vai utilizar então no React para poder tornar aqui o desenvolvimento mais viável? A gente vai utilizar o JSX. O JSX, ele permite que a gente utilize a sintaxe parecida do HTML para então ele transpilar, ou seja, ele vai pegar essa sintaxe parecida com o HTML e vai transpilar, transformar para JavaScript. Como que ficaria isso aqui com JSX? Eu teria aqui o "React-dom.render", E aqui, como eu disse, é bem similar ao HTML, então teria que h1, Abrir e fechar a tag aqui. Certo. Aqui dentro a gente teria o span, e aqui, por exemplo, "Ah, eu quero colocar um id aqui no meu h1". A id title. Eu teria que passar aqui dessa forma, né, se eu fosse utilizar ali o createElement. Veja... Ah, sim! Aqui também a gente teria o outro parâmetro, que seria a div que a gente quer adicionar a esse elemento h1 e tudo mais. Bom, veja que interessante. Isso aqui tá muito mais fácil da gente entender que a gente tem um span dentro de um h1 e esse h1 tem uma id title do que isso aqui, né? Porém, o que acontece? O nosso navegador, ele não vai entender isso aqui, né? Se eu executar isso aqui, ele vai dar erro. Ele não vai renderizar isso aqui. Então, por isso que a gente precisa transpilar o nosso código JSX e a gente vai utilizar ferramentas que faz essa transformação, essa transpilação pra gente, para então, por baixo dos panos, vamos dizer assim, né, o React funcionar, rodar, vamos dizer assim, dessa forma aqui com JavaScript. Então, resumindo, a gente vai utilizar o JSX, a gente vai utilizar uma ferramenta para transpilar para JavaScript, que é como o React vai entender o nosso código, então a gente vai ter os nossos componentes ali funcionando perfeitamente. E é interessante a gente entender que disso aqui se transforma nisso, porque no fundo tudo será código JavaScript. Então existem algumas particularidades. Por exemplo, se a gente for passar uma classe, a gente tem a palavra class já no JavaScript, né, que é uma palavra reservada. Então, se eu for passar a propriedade class, quando a gente está utilizando a JSX, a gente tem que utilizar className, por exemplo, e passar aqui a classe. Outro exemplo. No JavaScript a gente tem a diferença de maiúsculas e minúsculas, né? E também aqui em relação a nomenclatura. Então, por exemplo, se eu for passar o onClick por exemplo, né, e passar alguma coisa aqui. Nesse caso, como que a gente teria que fazer? Dessa forma que eu coloquei, "onClick", porém, em CamelCase, né? Ou seja, quando eu vou ter a segunda palavra, ou a partir da segunda palavra, a gente coloca aqui a letra maiúscula, e aqui eu preciso passar então a função, por exemplo, que eu vou chamar no onClick dessa forma. Então a gente tem essas pequenas particularidades, porque, vale sempre lembrar, esse código será transpilado para JavaScript, né? Então a gente tem algumas particularidades que a gente vai ver no andamento do curso, mas, de qualquer forma, o JSX aí facilita muito a nossa vida, porque realmente seria inviável a gente criar todos os nossos componentes, né, todas as nossas interfaces aqui utilizando o createElement, enfim, um elemento dentro do outro ia ficar bem mais confuso.