A class component in [[React]] (a way to create reusable [[Interface de usuário|UI]] elements) is structured as follows:
- The class name should start with a capital letter (PascalCase).
- The class extends `React.Component`.
- The `render()` method returns the [[JSX]] that defines what the component will display.
```jsx
class MyButton extends React.Component {
render() {
return (
<button>I'm a Button</button>
);
}
}
```
> [!WARNING] Pitfall
> [[React]] components are regular [[JavaScript]] functions, but **their names must start with a capital letter** or they won’t work!
To make this class component available for use in other files, you need to export it. Here are the common ways to do that:
**1. Default Export:**
This is typically used when you want to export a single primary component from a file.
```jsx
class MyButton extends React.Component {
render() {
return (
<button>I'm a Button</button>
);
}
}
export default MyButton;
```
Or, you can combine the class definition and export:
```jsx
export default class MyButton extends React.Component {
render() {
return (
<button>I'm a Button</button>
);
}
}
```
**2. Named Export (Less Common for Components):**
While less common for [[React]] components (especially default ones), you _can_ use a named export.
```jsx
export class MyButton extends React.Component {
render() {
return (
<button>I'm a Button</button>
);
}
}
```
Then, in another file, you would import it like this:
```jsx
import { MyButton } from './MyButton';
```
**:: Reference ::** [Your First Component – React](https://react.dev/learn/your-first-component)