Componentes Funcionais e de Classe em React

Um artigo objetivo sobre componentes em React


O que so React Components?

• Components so considerados os principais blocos de construo 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 usurio.
  
  
  Que problema resolveu?

• Anteriormente, a criao de uma pgina web simples requeria que os devs escrevessem centenas de linhas de cdigo;

• Na estrutura tradicional de DOM, simples mudanas podiam ser bastante desafiadoras;

• Para resolver esses problemas, uma abordagem baseada em componentes independentes e reutilizveis foi introduzida.
  
  
  Como um componente se parece?

• Considere toda a interface do usurio (UI) como uma rvore;
  

• Aqui, a raiz o componente inicial e cada uma das outras peas se torna um ramo, os quais so subdivididos em sub-ramos.
  
  
  Quais so os tipos de componentes?

Componentes Funcionais:

• o primeiro tipo de componente e tambm o mais recomendado;
• Um functional component uma funo em JavaScript/ES6 que retorna um elemento do React (JSX);
• Ele sempre comea com uma letra maiscula (conveno de nomes);
• Se necessrio, aceita props como parmetro;
• Por exemplo, voc pode criar um componente funcional com sua definio por arrow function

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

"Essa funo um componente do React vlido, 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, ento, 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 necessrio;

• Deve ter um mtodo de render() para retornar o JSX;

• Abaixo vemos a mesma funo Welcome anterior, porm retornada como um componente de classe:
  

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

Concluso

• Componentes so a melhor maneira de organizar seu aplicativo React e ajudam a escrever um cdigo mais bem gerenciado;
• Ambos so bons, porm prefiro Funcional Components a Class Components.Obrigado se voc acompanhou at aqui e espero que esse artigo o ajude na trajetria como dev.

Autor: Marcelo Schffer Petry
https://linkedin.com/in/m-petry/
https://marcelopetry.com/