What is export default?

Hello. What is export default?

1 Like

Based on what you know from your previous question on named exports:

export { example1, example2 };
export function example3 () {}
export const example4 = "";

You can have as many named exports as you want. You import them like

import { example1, example2, example3 } from "./somefile";

This is good when you want individual functions or variables or objects or whatever it was that was exported.

Very often though you have a single thing you want to export, and each file can have one default export. For example:

export default class MyClass {}

Or maybe

export default function example () {}

It generally represents the main thing included in a module (remember, one file === one module). When you import this, you don’t use the curly brackets

import MyClass from "./file1";
import example from "./file2";

This is a bit abstract, so as a real-world example:

The React UI library has a default export, which contains everything, and it gets imported into every file that uses React.

import React from "react";

React also exports a load of functions as well as the core default React object, so you can also import the named exports as well:

import React, { Component, useEffect, useState } from "react";

So you get the main React class, plus the Component function and the useEffect and useState functions to use in the file they are imported into


Thanks for your answer.

So, export default is optional? I can just export things?

Yes, is up to you. It can make things clearer in various casss, but you don’t need to use it.

Thanks for the reply.