[javascript] What does "export default" do in JSX?

I want to ask what the last sentence means and does (export default HelloWorld;) but I can't find any tutorials about it.

// hello-world.jsx

import React from 'react';

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

export default HelloWorld;

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.
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 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.

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

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 const HelloWorld = () => (<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

• Before learning about Export Default lets understand what is Export and Import is: In the general term: exports are the goods and services that can be sent to others, similarly, export in function components means you are letting your function or component to use by another script.
• Export default means you want to export only one value the is present by default in your script so that others script can import that for use.
• This is very much necessary for code Reusability.

Let's see the code of how we can use this

  import react from 'react'

function Header()
{
    return <p><b><h1>This is the Heading section</h1></b></p>;
}
**export default Header;**

• Because of this export it can be imported like this-

import Header from './Header';

• if any one comment the export section you will get the following error:

  

You will get error like this:-