Pensando em React: quais são os conceitos básicos?

Atualmente, o React é uma das bibliotecas JavaScript mais populares do mundo. Segundo a edição 2019 da pesquisa anual do Stack Overflow, 32,3% dos desenvolvedores utilizou React no último ano. Em comparação, na pesquisa de 2018 esse número era de 28,3%, ou seja, houve um crescimento de 4% no último ano. A tendência é que esse crescimento continue, visto que o React está também no topo do “most wanted web frameworks” (lista de frameworks/bibliotecas que os programadores mais desejam aprender).

Eu trabalho com JavaScript há alguns anos, mas confesso que até pouco tempo atrás nunca tinha me interessado em utilizar nenhuma biblioteca específica (com exceção do jQuery, que já está caindo em desuso e passa longe de ser ideal por vários motivos). Foi então que esse ano, após decidir aprender um pouco mais sobre front-end, acabei entrando no mundo do React. E foi lendo a documentação da biblioteca que acabei me deparando com um artigo chamado Thinking in React (Pensando em React, em uma tradução livre), que começa com a seguinte frase:

Um dos vários pontos positivos do React é como ele te faz pensar em aplicativos a medida que você os constrói.

Essa afirmação pode parecer bem presunçosa, mas a verdade é que o React realmente me fez pensar. Diferente de algumas bibliotecas, nessa é possível perceber que cada linha de código e cada função tem um motivo de ser e existir, e que tudo se resume na realização dos princípios básicos do React, que são assunto de artigo um artigo intitulado Design Principles (Princípios de Design). Esse enumera vários tópicos, mas acho que podemos resumir a essência da coisa em 3 pontos principais.

Componentização: o React é uma biblioteca baseada em componentes, ou seja, o objetivo do programador deve ser criar conjuntos de elementos visuais reutilizáveis. A própria documentação nos dá um bom exemplo de componente: uma listagem com itens, subitens e um input para busca (conforme imagem abaixo). Todos esses elementos podem existir separados, mas juntos formam algo mais complexo e funcional. A ideia é que os componentes trabalhem juntos, trocando informações mas interferindo uns aos outros o mínimo possível. Essa independência evita que com uma modificação você venha a quebrar algo que já está funcionando, e esse é um dos meus princípios favoritos do React.

Um exemplo simples de componente, documentação do React

Abordagem declarativa: em uma biblioteca declarativa, você não diz COMO o objetivo vai ser alcançado, mas sim O QUE você quer alcançar. Se você quer renderizar uma lista ou um botão na tela, você dará um comendo ao React, e ele fará isso. Porém, como o framework vai fazer isso é problema dele. O programador não irá manipular o DOM manualmente, e sim interagir com ele através das funcionalidades fornecidas pelo React. O objetivo da biblioteca é deixar o desenvolvedor tão livre quanto possível para pensar no resultado final, enquanto o React cuida do que acontece “por baixo dos panos”, como compatibilidade entre browsers, gerenciamento de estados, renderização, etc.

Praticidade: ao trabalhar no React, os desenvolvedores do Facebook pensam primeiro no próprio produto. Ou seja, as novas funcionalidades da biblioteca sempre são criadas tendo em mente as necessidades da famosa rede social. Após testarem e refinarem a biblioteca “em casa” em um processo conhecido como dogfooding, aí sim os desenvolvedores lançam as funcionalidades para o público geral. Aliás, o React é pensado POR devs e PARA devs: boas ferramentas de debugging e mensagens de warning claras são prioridades pois facilitam a vida dos programadores e tornam o processo de desenvolvimento mais ágil para todos.

Considerações finais: o React é uma biblioteca JavaScript que está em alta, e tem como princípios várias boas práticas que facilitam a criação de projetos grandes ou pequenos. Caso você esteja confuso em meio a um universo de frameworks e bibliotecas, sem saber em qual investir o seu tempo ou esforço, o React pode ser uma boa pedida.

Fontes: