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

**Opción 1**

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

export { CreateTodoButton };

**Opción 2**

export const CreateTodoButton = () => (
    <button>+</button>
);

**Opción 3**

function CreateTodoButton() {
    return (
        <button>+</button>
    );
}

export { CreateTodoButton };

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

import { CreateTodoButton } from './CreateTodoButton';

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

**Opción 1**

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

export default CreateTodoButton;

**Opción 2**

function CreateTodoButton() {
    return (
        <button>+</button>
    );
}

export default CreateTodoButton;

Se puede importar poniendole cualquier nombre y **NO** va entre { }.

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.