Introdução ao React, parte 1

Já falamos neste blog sobre a nova pilha de desenvolvimento do WordPress e a revolução que vem com ela, tanto para a própria plataforma quanto para os desenvolvedores que agora são forçados a aprender coisas novas. Não muito tempo atrás, por exemplo, publiquei um post explicando como usar o pacote @wordpress/scripts para estender o Gutenberg e adicionar um botão à sua interface do usuário. Como autor, adoro escrever tutoriais porque posso compartilhar algo que conheço bem e sinto que podemos aprender todos juntos.

Infelizmente, acho que os tutoriais escondem um grande problema: muitos de vocês os seguem cegamente sem realmente entender o que está acontecendo, mesmo que obtenham o resultado correto no final. Mas a maioria dos tutoriais não tem o “momento aha”, o momento de insight e compreensão em que tudo se encaixa na sua cabeça e você entende por que as coisas são do jeito que são.

Então hoje eu gostaria de começar uma série de posts com uma introdução ao React para esclarecer um pouco. Quero desmistificar o React e ajudá-lo a melhorar rapidamente. Eu quero que você entenda por que React é do jeito que é e por que as coisas são do jeito que são. Eu quero que você entenda os princípios por trás do React. Eu quero que você escreva um código melhor.

Programação Funcional

Antes de falar sobre o React, acho que vale a pena gastar alguns minutos falando sobre programação funcional , já que muitos dos frameworks que usamos hoje dependem de seus princípios. E o React (junto com o Redux) não é exceção.

A programação funcional é um paradigma de programação no qual os programas são construídos aplicando e compondo funções. Você pode pensar que, bem, “programação” sempre foi sobre construir e executar funções, certo? Não exatamente. Tenha paciencia comigo.

Considere, por exemplo, a programação orientada a objetos. Na POO, os programas são construídos criando e compondo objetos, que podem conter dados, na forma de atributos ou campos, e código, na forma de métodos ou procedimentos. Ver? Não funções, mas objetos.

Então, o que torna a programação funcional especial? Bem, existem vários aspectos que caracterizam a programação funcional: funções puras, transparência referencial, imutabilidade, funções como cidadãos de primeira ordem, funções de ordem superior, etc, e recomendo que você as estude por conta própria (ou, se quiser para, podemos falar sobre eles em posts futuros). Mas, para manter este post curto, hoje vamos nos concentrar simplesmente em um recurso…

Funções puras

Uma das coisas que diferencia a programação funcional de outros paradigmas de programação é como ela define e trabalha com funções. Em FP, as funções são puras, o que significa que elas atendem às duas condições a seguir:

1. Sempre produz o mesmo resultado quando recebe os mesmos argumentos
2. Não tem efeitos colaterais

Por exemplo, esta não é uma função pura:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

porque tem vários efeitos colaterais. Ou seja, ele modifica uma variável global (efeito colateral 1) e envia algum texto para o console (efeito colateral 2).

Outra função impura é a seguinte:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

porque, como você pode ver, nem sempre produz o mesmo resultado. Toda vez que alguém chama createElement com um determinado nome, o resultado obtido é diferente. Afinal, o atributo id é gerado através do Math.random …

Funções puras são ótimas por vários motivos: são simples de entender e não contêm surpresas. Você dá a eles algumas entradas, eles retornarão uma saída específica. E isso é ótimo, porque essa maneira de definir as funções as aproxima de nossa compreensão matemática do que é uma função: ela mapeia cada entrada para uma saída bem definida.

Componentes em React

O que funções puras e programação funcional têm a ver? Bem, vamos ver se podemos derivar o relacionamento deles…

Como você pode ler em sua documentação, React é uma biblioteca JavaScript para criar interfaces de usuário através de pequenos pedaços de código chamados “Componentes”. Este é o primeiro componente que você verá em seu tutorial:

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

Bem simples e até autoexplicativo, não é?

Mas espere um segundo! Isso não se parece com uma “função pura”. Na verdade, esta é uma classe implementada usando programação orientada a objetos.

Sim, você está absolutamente certo. Isso não parece bom... perdemos nosso tempo falando sobre programação funcional?

Dê uma olhada no componente anterior novamente. Com o que se parece? O que isso faz? Bem, é uma classe com um único método ( render ) que gera algum HTML para renderizar uma lista de compras. Esta lista de compras é sempre a mesma (duh, é um exemplo simples), mas tem uma parte variável: seu título, onde a classe parece usar uma propriedade interna this.props.name .

Então, se ainda não sabemos nada sobre o React e apenas olhamos o código e tentamos inferir o que ele faz, vemos o seguinte:

1. O componente pode receber um “nome”. Não sabemos exatamente como ele recebe esse nome, mas sabemos que sim. Afinal, this.props.name é uma boa pista.
2. O método render produz algum HTML para renderizar uma lista (estática) de “elementos de compras”: Instagram , WhatsApp e Oculus .
3. O HTML resultante não é 100% estático; ele usa um “nome” que pode variar de acordo com o valor de uma propriedade.

Veja onde estou indo?

Componentes Funções em React

Acabamos de descrever uma função pura! Temos um componente que recebe um valor ( name ) e produz uma saída bem definida (o HTML). Isso significa que podemos nos afastar da OOP e implementar o componente anterior como uma função?

Certo! A classe excessivamente complicada que acabamos de ver pode ser reescrita como uma função pura mais simples e fácil de entender que recebe props e retorna HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

Esta é exatamente a mesma coisa que tínhamos, mas muito, muito mais simples. Atrevo-me até a dizer que é a coisa mais simples que posso implementar como programador: um componente React nada mais é do que uma função que recebe alguns adereços e produz um HTML .

E esta é precisamente a primeira lição que você tem que aprender: seu componente React é uma função pura : props in, HTML out. Um componente não deve executar funções assíncronas para buscar dados (pois são efeitos colaterais). Um componente também não pode modificar as propriedades que recebe (imutabilidade).

Então, mais uma vez: um componente simplesmente recebe alguns adereços e produz a saída HTML. Período.

Mas espere, se um componente é tão simples, como podemos fazer algo útil com eles? Bem, fique atento, pois falaremos sobre isso no próximo post!

Imagem em destaque de Josiah Weiss no Unsplash.