ReactJS 101.1 (O que é ReactJS)

Zainab Olaitan Adegoke Seguir Mai 13 · 5 min ler

O ReactJS é uma biblioteca JavaScript para criar interfaces com o usuário. A biblioteca de palavras e a estrutura são usadas de forma intercambiável para descrever o ReactJS, mas elas não são as mesmas. Então, antes de prosseguirmos, gostaria de destacar a diferença entre um framework e uma biblioteca.

Tanto a biblioteca quanto o framework são códigos reutilizáveis escritos pelos desenvolvedores para resolver um problema. A diferença é que uma biblioteca oferece a flexibilidade de controlar o fluxo do seu aplicativo. Você especifica onde os diferentes métodos são colocados em seu aplicativo. Enquanto um framework como o seu nome é um fluxo de controle que determina como seu projeto será estruturado. Você pode ler mais sobre isso aqui .

Portanto, o ReactJS é uma biblioteca.

O que torna o ReactJS único?

Existem várias bibliotecas / frameworks de JavaScript que existiam antes do ReactJS e há novas que surgem, mas o ReactJS parece ser uma das bibliotecas mais usadas por muitos desenvolvedores. Isso pode ser resultado de várias coisas que diferenciam o ReactJS de outras bibliotecas / estruturas listadas abaixo:

  • Sua abordagem baseada em componentes
  • Seu estilo declarativo
  • Seu fluxo de dados
  • E o fato de que é puro JavaScript.

Vamos dar uma olhada em cada uma dessas propriedades, uma após a outra para ter uma compreensão completa.

Abordagem baseada em componentes

Os componentes do ReactJS são baseados no conceito de composição. Em um modelo de composição, um aplicativo é criado pela combinação de várias outras funções simples, ou seja, cada pequena parte do aplicativo é criada independentemente e reunida para criar um aplicativo inteiro. Esses pequenos componentes são chamados de componente filho e são reunidos por um componente pai.

É uma prática recomendada seguir a regra DOT, ou seja, fazer uma coisa no seu componente ao criá-la. Um componente não deve ter mais de uma funcionalidade para poder ser mantido.

O componente ReactJS é semelhante a uma função JavaScript na qual você passa parâmetros. A única diferença é, em vez de retornar um valor no formato de tipos de dados JavaScript, retornar uma interface do usuário.

Abaixo está uma ilustração que mostra a diferença entre um aplicativo baseado em componente e um aplicativo normal. Nós estaremos usando uma função que recebe um número e retorna o expoente do número ao poder de dois:

Se quisermos colocar isso em uma função não-composicional, podemos ter o seguinte:

código javascript não composicional

Ter isso de uma forma composicional será semelhante a:

código javascript de composição

Tudo pode estar parecendo bom na função de não composição por enquanto porque temos menos coisas acontecendo até termos muitas funcionalidades e começar a ficar confuso.

Podemos ver que o modelo de composição dá ao nosso código uma representação nítida e facilita a leitura. Isso será muito útil ao tentar usar a regra DRY (não repetir) em nosso aplicativo. Ele permite reutilizar os métodos em outras partes do aplicativo e evita a repetição de códigos.

Enquanto o fragmento acima descreve a ideia básica da representação composicional, a representação ReactJS parece um pouco diferente. Abaixo está o que será uma representação composicional no ReactJS:

composição em ReactJS

Podemos ver que parece bem diferente de uma função de composição normal. Parece tão abstrato! Bem, talvez você não deva se preocupar com isso por enquanto, já que nos aprofundaremos nos posts subsequentes. Estamos a salvo por enquanto!

Estilo declarativo

O estilo declarativo permite que você defina o que você quer fazer e faça por você, ao contrário do método imperativo, em que você declara o que deseja fazer e passa por várias etapas para alcançá-los.

O ReactJS permite que você declare seus estados e outros métodos e faz o trabalho imperativo de manter o DOM em sincronia com seu aplicativo.

Um exemplo de um método imperativo é quando você deseja comparar dois arrays A e B e retornar os itens que estão em A e não em B. Como o JavaScript é tanto imperativo quanto declarativo, veremos como isso é feito nos dois sentidos.

Para a abordagem imperativa, podemos ter isto:

abordagem imperativa

Usando uma abordagem declarativa, podemos ter isto:

abordagem declarativa

Dos exemplos acima, podemos ver que a abordagem declarativa é apenas sobre resultados, sem necessidade de se preocupar com o processo. Ele permite que você faça menos e consiga mais por causa da abstração de todas as etapas.

Fluxo de dados

O React mantém um único fluxo de dados em um aplicativo. Todos os dados são passados do pai para os componentes filhos e quando uma atualização precisa ser feita, uma função é passada para o componente filho, que atualiza os dados do componente pai. Isso soa realmente incrível, né ?!

Algumas outras estruturas JavaScript, como o AngularJS, usam um fluxo bidirecional, o que possibilita a atualização de dados do escopo ou diretamente do DOM. Embora isso possa parecer legal, o problema com isso é que é difícil manter o controle de onde as alterações de dados estão sendo feitas.

ReactJS é JavaScript

A última parte é o que todos nós conhecemos. O ReactJS é construído usando JavaScript e isso explica por que temos algumas funções JavaScript no ReactJS. O ReactJS é uma biblioteca que você pode usar com pouco ou nenhum conhecimento de JavaScript, mas o conselho que eu geralmente dou é aprender JavaScript antes de pegar o ReactJS. Isso evitará que você instale pacotes para problemas simples que o JavaScript resolverá. RI MUITO. Eu sei disso porque já estive lá antes.

Espero ter sido capaz de lançar mais luz sobre as coisas fundamentais que compõem o ReactJS. E espero me aprofundar nos posts subsequentes e tornar os conceitos do ReactJS fáceis de entender e o aprendizado fácil e divertido.

Até o meu próximo post, eu digo bem-vindo ao ReactJS e aproveite a codificação!