⚛️Componentes Funcionais e de Classe em React⚛️

👇Um artigo objetivo sobre componentes em React👇


⚛️O que são React Components?

• Components são considerados os principais blocos de construção de um aplicativo em React;

• Embora todos os componentes estejam no mesmo local da estrutura de pastas, eles operam de forma independente uns dos outros e se combinam em um componente pai para formar a interface final para o usuário.
  
  
  ⚛️Que problema resolveu?

• Anteriormente, a criação de uma página web simples requeria que os devs escrevessem centenas de linhas de código;

• Na estrutura tradicional de DOM, simples mudanças podiam ser bastante desafiadoras;

• Para resolver esses problemas, uma abordagem baseada em componentes independentes e reutilizáveis foi introduzida.
  
  
  ⚛️Como um componente se parece?

• Considere toda a interface do usuário (UI) como uma árvore;
  

• Aqui, a raiz é o componente inicial e cada uma das outras peças se torna um ramo, os quais são subdivididos em sub-ramos.
  
  
  ⚛️Quais são os tipos de componentes?

📲Componentes Funcionais:

• É o primeiro tipo de componente e também o mais recomendado;
• Um functional component é uma função em JavaScript/ES6 que retorna um elemento do React (JSX);
• Ele sempre começa com uma letra maiúscula (convenção de nomes);
• Se necessário, aceita props como parâmetro;
• Por exemplo, você pode criar um componente funcional com sua definição por arrow function 👇

const Welcome = (props) => { 
  return <h1>Hello, {props.name}</h1>; 
}

"Essa função é um componente do React válido, pois ele aceita um único argumento de objeto 'props' com dados e retorna um elemento do React." (reactjs.org)

• Para utilizar um componente mais tarde, você precisa exportá-lo para, então, importá-lo em outro lugar.
  
  
  🔃Componentes de Classe:

• Class Component é uma classe do ES6 que será um componente quando fizer o ‘extend’ de um componente (comportamento ou valor) do React;

• Aceita props (no construtor), se necessário;

• Deve ter um método de render() para retornar o JSX;

• Abaixo vemos a mesma função Welcome anterior, porém retornada como um componente de classe:
  

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

⚛️Conclusão

• Componentes são a melhor maneira de organizar seu aplicativo React e ajudam a escrever um código mais bem gerenciado;
• Ambos são bons, porém prefiro Funcional Components a Class Components. Obrigado se você acompanhou até aqui e espero que esse artigo o ajude na trajetória como dev.

---

Autor: Marcelo Schäffer Petry
https://linkedin.com/in/m-petry/
https://marcelopetry.com/