DEV Community

Marcelo Petry
Marcelo Petry

Posted on

⚛️Componentes Funcionais e de Classe em React⚛️

react components

👇Um artigo objetivo sobre componentes em React👇


⚛️O que são React Components?
Estrutura de pastas em react

  • 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;
    react-tree

  • 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>; 
}
Enter fullscreen mode Exit fullscreen mode

"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>;
  }
}
Enter fullscreen mode Exit fullscreen mode



⚛️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/

Top comments (0)