Dissecando React - Parte 1: JSX

#react #javascript #frontend #ptbr

Uma breve retratação ao leitor

Este texto pode conter algumas leves imprecisões para fins didáticos. Alguns conceitos podem não abrangir a sua totalidade para simplificar um conceito a fim de tornar-se mais tangível à realidade do leitor, considerando-se que o publico-alvo deste texto é especificamente direcionado para quem não teve nenhum - ou muito pouco - contato com desenvolvimento, especialmente em React.

Dito isto, espero que a leitura esteja a altura de grandes nomes que me inspiram diariamente e que essa série de introduções, por assim dizer, auxiliem na jornada de pessoas que se interessem em começar no vasto campo do desenvolvimento.

Elaborando nosso sumário

Esta é uma primeira parte introdutória sobre uma série de textos que pretendo elaborar a fim de explicar de uma forma simplificada - porém entrando em detalhes - as características de uma aplicação em React, perpassando por componentes, estados, props, hooks e suas particularidades no geral.

Com isto em vista, esse sumário será atualizado neste e nos demais textos a medida que novos artigos forem publicados. Daremos nosso Hello World com a parte mais introdutória que é entender um componente e suas características principais.

1. JSX
2. Renderização e Imutabilidade

Meu Deus, o que é JSX?

Antes de partirmos para o que interessa, precisamos entender uma ferramenta que tornará nossa vida mais fácil quando se trata de criar uma aplicação em React.

No ramo de desenvolvimento, existe um termo muito comum chamado "Syntax sugar", que significa, basicamente um facilitador de sintaxe que nos permite acelerar nossa produção, seja tornando um código mais legível, mais simplificado ou mais fácil de escrever.

O JSX é uma extensão de JavaScript (JSX significando JavaScript XML, para os curiosos) que nos permite invocar, por assim dizer, elementos do React. Vejamos:

    const Felino = <img src="./foto-do-meu-pet.png" />

O que temos escrito acima não é nem uma template string ou HTML. É tudo JavaScript. O JSX é capaz de interpretar o que escrevemos como se fossem tags de HTML e "traduzir" isto para a criação de um elemento em React.

Diferente de outros modelos de desenvolvimento que separam suas funções e html em arquivos diferentes, a proposta do React foi de unificar a lógica geral: manipulação de eventos, renderização dos componentes, mudança de estados - tendo em vista que estas etapas estão muito atreladas no comportamento de um componente.

Uau, mas e agora?

Vejamos o seguinte trecho de código:

    const Felino = {
        name: "Julieta",
        photo: "./foto-do-meu-pet.png",
        subtitle: "Miau"
    };

    const CartaoDoPet = (
        <h1>{Felino.name}</h1>
        <img src={Felino.photo} />
        <p>{Felino.subtitle}</p>
    );

Muita informação? Não se desespere. Vamos no passo-a-passo.

Primeiro declaramos um objeto com as informações do nosso pet.

    const Felino = {
        name: "Julieta",
        photo: "./foto-do-meu-pet.png",
        subtitle: "Miau"
    };

Queremos embutir - ou no jargão, embeddar - estas informações dentro de um componente.

    const CartaoDoPet = (
        <h1>{Felino.name}</h1>
        <img src={Felino.photo} />
        <p>{Felino.subtitle}</p>
    );

Aqui é onde inserimos as informações do nosso objeto dentro do JSX. As chaves abrem espaço para que qualquer expressão válida de JavaScript possa ser ali inserida. Pode ser uma operação matemática (1 + 1), dados de um objeto ou até mesmo uma função.

No exemplo acima, nós acessamos os dados de um objeto que contem as informações do pet que preencherá nosso componente CartaoDoPet.

E tem muito mais. Imagine se não tivéssemos os dados da gatinha Julieta para preencher nosso cartão e, para estes casos, quiséssemos que uma mensagem fosse exibida para o usuário.

    const CartaoDoPet = {
        if(Felino) {
            return (
                <h1>{Felino.name}</h1>
                <img src={Felino.photo} />
                <p>{Felino.subtitle}</p>
            )
        }
        return <h1>Nenhum felino encontrado.</h1>
    }

Se Felino for verdadeiro, ele retorna com o nosso componente e seus dados preenchidos. Para demais casos, a mensagem será apresentada!

Isso porque JSX, no final das contas, é JavaScript - e será traduzido para tal quando rodarmos o projeto. E isto nos traz a uma segunda questão do JSX:

    const NomeDoPet = <h1 className="fonteAzul">{Felino.name}</h1>

Parece HTML, mas escrevemos className ao invés de class, e está em camelCase. Por quê?

Isso se dá porquê convencionou-se que, por se tratar de JavaScript e não HTML, utiliza-se camelCase. Tanto é que class é um termo reservado e, por isso, precisamos utilizar className para referenciar ao class de HTML.

Uma pausa para recapitular e respirar

Já sabemos embutir valores dentro de nosso elemento e sabemos que no final das contas, tudo vira JavaScript - e que aquele HTML que escrevemos com JSX na verdade é JavaScript disfarçado pra facilitar a criação de um elemento React.

Em outras palavras, veja o comparativo do código a seguir:

    const item = <h1 className="titulo">Meu titulo</h1>;

    const item = React.createElement(
        'h1',
        { className: 'titulo' },
        'Meu titulo'
    );

Ambos representam a mesma coisa. O JSX é interpretado pelo Babel, uma ferramenta que nos auxilia a escrever javascript moderno e transforma nosso elemento "html" em um React.createElement, uma função de criação de elemento pertencente ao React.

Essa função é importante pelo seguinte papel: Ela quem passa ao React o que será renderizado no DOM (Document Object Model - ou, em outras palavras, o que seu navegador vai entender e mostrar na tela), o que será atualizado, desmontado e tudo mais!

'Meu Titulo' representa o elemento Children do nosso elemento. Então quando inserimos um conteúdo dentro das nossas tags, ele é passado como este elemento Children. Salve isto em mente, pois futuramente, veremos algumas utilidades para manipular o conteúdo que estiver dentro do elemento Children.

Conclusão

A fim de não deixar a leitura muito extensa e dar um espaço para a digestão do conteúdo, encerro esta parte por aqui. Há muito mais sobre o comportamento do JSX na própria documentação do React, tudo muito bem detalhado.

No próximo texto, apresentarei um pouco sobre as formas que um componente React pode se apresentar e convenções, a fim de que assim tenhamos um primeiro contato com as propriedades e ciclo de vida de um componente.

Agradeço a leitura de todos, e seu feedback é muito importante pra que eu possa melhorar no conteúdo aqui apresentado.

Até a próxima!