Um componente de classe em [[React]] (uma forma de criar elementos de [[Interface de usuário|UI]] reutilizáveis) é estruturado da seguinte forma:
- O nome da classe deve começar com uma letra maiúscula (PascalCase).
- A classe estende `React.Component`.
- O método `render()` retorna o [[JSX]] que define o que o componente exibirá.
```jsx
class MyButton extends React.Component {
render() {
return (
<button>I'm a Button</button>
);
}
}
```
> [!AVISO] 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.
```jsx
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:
```jsx
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.
```jsx
export class MyButton extends React.Component {
render() {
return (
<button>I'm a Button</button>
);
}
}
```
Então, em outro arquivo, você o importaria assim:
```jsx
import { MyButton } from './MyButton';
```
**:: Referência ::** [Seu Primeiro Componente – React](https://react.dev/learn/your-first-component)