Entendendo React com LEGO.

Estudando sobre React, a gente consegue fazer uma excelente comparação com LEGO para entender o que é, seus fundamentos e como funciona.

Obs.: Mesmo que você já possua conhecimento em React, aconselho essa leitura que pode ser muito útil para explicar conceitos para outras pessoas através de analogias!

Brincando com LEGO.

Se você já brincou com LEGO, sabe o quanto é agradável encaixar peças e ter inúmeras possibilidades de poder construir algo com essas pequenas peças, ou pequenos blocos que juntos constroem algo maior!

Cada bloco de LEGO é usado como um pequeno componente do que você quer construir, e possui suas próprias características como cor, tamanho, formato, quantidades, tipos de encaixe, etc. Ou seja, cada bloco de LEGO pode possuir propriedades únicas ou comuns com outros blocos.

Esses pequenos blocos, ou componentes, dentro do que está sendo construído, também possuem sua própria responsabilidade na montagem, e realizam alguma função para manter o que foi criado com alguma lógica.

Algumas peças podem ser diferentes, para que a gente consiga criar algo específico, ou com mais funcionalidades, como um carrinho, por exemplo: Ele não possui apenas peças com formatos únicos, mas também tem outras peças como o pneu, janela, etc.

Uma pecinha de pneu, por exemplo, também seria um componente, uma peça de LEGO usada para construir o carrinho. O interessante é que para que nosso carrinho de LEGO esteja funcionando como o esperado, e possamos brincar com ele, essa peça precisa ter um comportamento.

O brinquedo não cumpre sua função e não tem graça se esse pneu for apenas uma peça fixa que fica apenas parado. Essa peça precisa ter um comportamento que esteja num estado de ficar rodando, para que o carrinho com peças LEGO ande como de fato um carrinho de brinquedo.

Brincando com REACT.

Com LEGO, construímos brinquedos e objetos com pequenos componentes feitos de plástico.

Com REACT construímos interfaces de usuário com componentes construídos com funções JavaScript.

Assim como peças LEGO possuem características e funcionalidades, componentes React possuem sua própria aparência e sua própria lógica. Seguindo os exemplos e explicações da própria documentação do React, "um componente pode ser tão pequeno quanto um botão ou tão grande quanto uma página inteira da interface":

function MyButton() {
  return (
    <button>Eu sou uma peça de LEG... digo... sou um botão</button>
  );
}

Sendo bem simples, um componente React é como uma peça, ou um conjunto montado de peças de LEGO. Esses pequenos blocos de LEGO podem ser montados e conectados de várias formas para conseguir construir um objeto ou brinquedo. O React também tem suas partes divididas em componentes, e assim como LEGO, componentes React podem criar objetos e também são conectados entre si, permitindo que dados passem por eles:

export default function MyApp() {
  return (
    <div>
      <h1>Encaixando uma peça de LEGO</h1>
      <MyButton />
    </div>
  );
}

Além disso, assim como um LEGO pode ser desmontado para reutilizar as peças na construção de outros brinquedos, componentes React também são reaproveitados para se fazer algo novo.

Como dito, cada pecinha LEGO pode ter suas próprias características. Da mesma forma, as peças React (componentes), também possuem características, ou propriedades, ou… atributos. Dessa forma, em um componente React a gente pode definir seu estilo e aparência através de classes e styles, e ter dados e atributos específicos, ajustando esses componentes através de propriedades:

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Uma peça diferente de um LEGO como um pneu, um bonequinho, uma janela de uma casa, etc., permite que a gente interaja com o brinquedo de uma forma diferente.

No caso de um pneu de um carrinho LEGO, quando está parado, e o empurramos, o pneu começa a rodar, fazendo o carrinho andar. Ou seja, a resposta da peça à ação do usuário de empurrar, troca o estado parado do pneu para, agora, rodando!

Em resposta a determinadas ações do usuário em um componente, algumas coisas na interface são atualizadas. Nesse caso, em React, quando dados mudam com o tempo, chamamos de estado.

Dessa forma, em nossa "peça" de React, ou no nosso componente, podemos adicionar estado para lidar com interações e atualizar conforme necessário. Por exemplo, clicar em uma galeria de imagens mostraria uma nova imagem ativa. Veja como uma galeria de imagens usa e atualiza o estado ao clicar.

Repositório de LEGO.

E se eu quiser novas peças LEGO para construir novos brinquedos diferentes?

Há várias caixas de LEGO específicas que podemos adquirir, e que possuem um conjunto de peças específicas como, por exemplo, Lego Star Wars, Lego Batman, etc.

Muitas pessoas criam e compartilham "novas peças" LEGO muito úteis. Nesse caso, você pode pegar uma "caixa de LEGO" com muitas peças novas:

Através do NPM, por exemplo, você tem acesso a repositórios (caixas), com novos componentes React (peças), criados por amantes de LEGO (React)! Você não precisa usar todas as peças, mas apenas as que serão úteis para você.

Misturando tudo: As peças de componentes de diferentes caixas ou repositórios podem ser misturadas e utilizadas em variados brinquedos ou diferentes projetos a depender do caso!

Além disso, você pode criar suas próprias "peças LEGO" e compartilhá-las com a comunidade!

À medida que avançamos os estudos e aprofundamos nos conceitos de React, modularidade, orientação a objetos, etc. as comparações com LEGO ainda podem nos acompanhar, e ainda há várias analogias que podem ser exploradas!

Espero ter ajudado alguns poucos!

--

Gabriel Marques (GitHub)