React: O que são Componentes e Props?

React é um dos mais populares frameworks de JavaScript para front-end. Surgiu em 2011 dentro da equipe de desenvolvimento do Facebook e foi criado apenas para ser utilizado na interface da timeline. Com sua expansão, o framework passou a ser integrado ao desenvolvimento de outros projetos dentro do Facebook, como o Instagram. A biblioteca virou open-source em 2013 e teve uma adaptação muito rápida pela comunidade, superando frameworks já estabelecidos como Angular e Vue.js. Hoje vamos discutir sobre Componentes e Props dentro do React.

Os componentes criados com o React permitem que você divida a sua interface em quantas partes quiser, sendo elas independentes e reutilizáveis. Sendo assim, você pode pensar em cada uma das partes de forma isolada. Alguns exemplos de componentes que podemos criar são o Header e Footer, que podem ser utilizados em quase todas as páginas da aplicação. Isso facilita o uso do conceito de DRY (Don’t Repeat Yourself), que consiste em não escrever o mesmo código várias vezes. A documentação oficial do React possui uma referência detalhada da API de componentes aqui.

Idealmente, componentes são funções JavaScript que podem ou não receber entradas, que chamamos de “props”, e retornam elementos que serão inseridos na DOM. Um dos primeiros componentes que você irá ver no React está no arquivo App.js

Na versão atual do React, v16.13.1, a forma mais fácil de criar um componente é definindo uma função JavaScript, como vimos no exemplo anterior. Mas também podemos criá-los por meio de classes.

Para entender como as props funcionam, vou usar dois exemplos de funções: uma função que recebe dois números e retorna a soma destes. E uma função que recebe duas entradas numéricas, onde ele altera o valor da primeira entrada subtraindo pelo valor da segunda. O primeiro exemplo se trata de uma função “pura”, por não alterar o valor das entradas. Já no segundo exemplo, observamos uma função impura, pois um dos valores de entrada é alterado dentro da própria função.

As props são entradas que não podem ser alteradas dentro de um componente. Componentes devem, obrigatoriamente, apenas ler as props. Sendo assim, todos os componentes de React devem ser “puros” e não podem alterar nenhum valor das props. Para isso, dentro do React usamos o conceito de “state” que pode ser abordado nesta seção da documentação oficial.

O que eu costumo utilizar como props de um componente são informações do usuário que precisam ser exibidas em tela, como: nome, e-mail e outros dados que muitas vezes precisamos trazer do servidor back-end.

O React é uma ferramenta muito poderosa e com uma documentação incrível. Para aprender sempre mais, aconselho fortemente que visite a documentação oficial sempre que houver dúvidas, ou até mesmo visite comunidades como o Stackoverflow.