[[React]] function components are a fundamental building block for creating user interfaces. Here's how they are structured:
- Function names should start with a capital letter (know as PascalCase or CamelCase).
- The function returns [[JSX]], which describes the [[Interface de usuário|UI]] elements to render.
```jsx
// This function, for example, simply create a button with the text "I'm a Button"
function MyButton() {
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 a function 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
function MyButton() {
return (
<button>I'm a Button</button>
);
}
export default MyButton;
```
Or, you can combine the function definition and export:
```jsx
export default function MyButton() {
return (
<button>I'm a Button</button>
);
}
```
**2. Named Export:**
This is useful when you want to export multiple components, functions, or variables from a single file.
```jsx
export function MyButton() {
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)