ES6 provides two different ways to export a module from a file – named exports, and default exports.

Named Exports

Named exports look like this:

export const Hello = () => {
 return <h1>Hello</h1>;
}

Here, we are exporting the Hello component by name. One advantage of this method is that we can export multiple components from a single file.

export const Hello = () => {
 return <h1>Hello</h1>;
}

export const Goodbye = () => {
return <h2>Goodbye</h2>;
}

Correspondingly, when we want to import our components we can do so like:

import { Hello, Goodbye } from "./Greetings";

Another advantage here is that we can alias our imports like:

import * as Greetings from "./Greetings";

And then use them like so:

<Greetings.Hello />

Default Exports

Default exports look like:

const Hello = () => {
 return <h1>Hello</h1>;
}

export default Hello;

Unlike with named exports, with default exports we can only export one component per file. Similarly, when we import, we can only import one component (note the lack of curly braces).

import Hello from "./Hello";

Note also that unlike named exports, default exports can use any name you want. So, you could just as easily do:

import Doge from './Hello';

If you want to export multiple functions from a file this way, you can do:

const fn1 = () => {}
const fn2 = () => {}

export default { fn1, fn2 }

And then import and use:

import Fns from "./functions";

...

Fns.fn1(); Fns.fn2();

Summary

You can use either named exports or default exports in your code. I prefer to use default exports as it helps to avoid naming conflicts. For example, if you had FormalGreetings and InformalGreetings in the same file, you could not do the following:

import { Hello } from './FormalGreetings';
import { Hello } from './InformalGreetings';

However you could do:

import FormalGreetings from './FormalGreetings';
import InformalGreetings from './InformalGreetings';

And use them like:

const render = () => {
 return (
    <div>
      <FormalGreetings.Hello />
      <InformalGreetings.Hello />
    </div>
  );
}