What does "export default" do in JSX?

Question

Export like export default HelloWorld; and import, such as import React from 'react' are part of the ES6 modules system.

A module is a self contained unit that can expose assets to other modules using export, and acquire assets from other modules using import.

In your code:

import React from 'react'; // get the React object from the react module

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld; // expose the HelloWorld component to other modules

In ES6 there are two kinds of exports:

Named exports - for example export function func() {} is a named export with the name of func. Named modules can be imported using import { exportName } from 'module';. In this case, the name of the import should be the same as the name of the export. To import the func in the example, you'll have to use import { func } from 'module';. There can be multiple named exports in one module.

Default export - is the value that will be imported from the module, if you use the simple import statement import X from 'module'. X is the name that will be given locally to the variable assigned to contain the value, and it doesn't have to be named like the origin export. There can be only one default export.

A module can contain both named exports and a default export, and they can be imported together using import defaultExport, { namedExport1, namedExport3, etc... } from 'module';.

export default is used to export a single class, function or primitive from a script file.

The export can also be written as

export default class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

You could also write this as a function component like

export default function HelloWorld() {
  return <p>Hello, world!</p>
}

This is used to import this function in another script file

import HelloWorld from './HelloWorld';

You don't necessarily import it as HelloWorld you can give it any name as it's a default export

A little about export

As the name says, it's used to export functions, objects, classes or expressions from script files or modules

Utiliites.js

export function cube(x) {
  return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;

This can be imported and used as

App.js

import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

Or

import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo);    // 4.555806215962888

When export default is used, this is much simpler. Script files just exports one thing. cube.js

export default function cube(x) {
  return x * x * x;
};

and used as App.js

import Cube from 'cube';
console.log(Cube(3)); // 27

Simplest Understanding for default export is

Export is ES6's feature which is used to Export a module(file) and use it in some other module(file).

Default Export:

1. default export is the convention if you want to export only one object(variable, function, class) from the file(module).
2. There could be only one default export per file, but not restricted to only one export(Named export).
3. When importing default exported object we can rename it as well.

Export or Named Export:

1. It is used to export the object(variable, function, calss) with the same name.

2. It is used to export multiple objects from one file.

3. It cannot be renamed when importing in another file, it must have the same name that was used to export it, but we can create its alias by using as operator.

In React, Vue and many other frameworks the Export is mostly used to export reusable components to make modular based applications.

In Simple Words -

The export statement is used when creating JavaScript modules to export functions, objects, or primitive values from the module so they can be used by other programs with the import statement.

Here is a link to get clear understanding : MDN Web Docs

In simple word export means letting the script we wrote to be used by another script. If we say export, we mean any module can use this script by importing it.