---
# System prepended metadata

title: Exportar componentes en React
tags: [React]

---

**Export nombrado:** exportar como un objeto que en su interior tiene el componente que queremos exportar.

**Opción 1**

```javascript=
const CreateTodoButton = () => (
    <button>+</button>
);

export { CreateTodoButton };
```

**Opción 2**
```javascript=
export const CreateTodoButton = () => (
    <button>+</button>
);
```

**Opción 3**
```javascript=
function CreateTodoButton() {
    return (
        <button>+</button>
    );
}

export { CreateTodoButton };
```

Exportarlo así me obliga a importarlo con el mismo nombre exactamente y debe ir entre { }.

```javascript=
import { CreateTodoButton } from './CreateTodoButton';
```

**Export por defecto:** exporta el componente por defecto.

**Opción 1**
```javascript=
const CreateTodoButton = () => (
    <button>+</button>
);

export default CreateTodoButton;
```
**Opción 2**
```javascript=
function CreateTodoButton() {
    return (
        <button>+</button>
    );
}

export default CreateTodoButton;
```

Se puede importar poniendole cualquier nombre y **NO** va entre { }.
```javascript=
import AddTodoButton from './CreateTodoButton';
```

Importa del archivo ***'./CreateTodoButton'*** lo que sea que venga por defecto, en este caso el componente ***CreateTodoButton*** y llama al componente importado ***AddTodoButton.***

# Conclusión
Es mejor utilizar los exports nombrados, evitan bugs, errores involuntarios y mejora la semántica del código ya que siempre vamos a estar utilizando el mismo nombre para nuestros componentes.