🎯 Componentes de Classe no React

Em poucas palavras

Definição técnica ou simplificada do conceito.

📝 Notas e Desenvolvimento

Um componente de classe em React (uma forma de criar elementos de UI reutilizáveis) é estruturado da seguinte forma:

class MyButton extends React.Component {
  render() {
    return (
      <button>I'm a Button</button>
    );
  }
}

Armadilha

Componentes React são funções JavaScript comuns, mas seus nomes devem começar com uma letra maiúscula ou não funcionarão!

Para tornar este componente de classe disponível para uso em outros arquivos, você precisa exportá-lo. Aqui estão as formas comuns de fazer isso:

1. Exportação Padrão:

Isso é tipicamente usado quando você deseja exportar um único componente primário de um arquivo.

class MyButton extends React.Component {
  render() {
    return (
      <button>I'm a Button</button>
    );
  }
}
 
export default MyButton;

Ou, você pode combinar a definição da classe e a exportação:

export default class MyButton extends React.Component {
  render() {
    return (
      <button>I'm a Button</button>
    );
  }
}

2. Exportação Nomeada (Menos Comum para Componentes):

Embora menos comum para componentes React (especialmente os padrão), você pode usar uma exportação nomeada.

export class MyButton extends React.Component {
  render() {
    return (
      <button>I'm a Button</button>
    );
  }
}

Então, em outro arquivo, você o importaria assim:

import { MyButton } from './MyButton';