What does "export default" do in JSX?

Question

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;

Answer 1

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

Answer 2

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

Answer 3

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, class) 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.

Answer 4

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

Answer 5

• 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 React from 'react';
  import reactDom from 'react-dom';
  import Header from './Header';
  
  reactDom.render(
    <>
      <Header />
    </>, document.getElementById('root')
  )
  

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

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

You will get an error like this:

Answer 6

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.

Answer 7

(My answer might be a bit sloppy. If someone can improve it and take-out this comment, I'd appreciate it.) Many good answers here. So why write another? Anything to do with API's overwhelms newbies with endless options. In reality, only a few are used frequently. This is to cover the common case. Comprehensive details can be found here MDN export.

Most of the time 'export default' is used like it is in the question. Note there can be only one export default per file [export default HelloWorld] This makes HelloWorld() visible in other files that import it using command

import HelloWorld from 'hello-world';

HelloWorld()    // prints [Hello, world!] in the browser

I've seen one variation that confuses newbies--because there can be only one export default, we can call it whatever we want in the importing file. So the following code is also correct:

import abracadabra from 'hello-world';

abracadabra()    // prints [Hello, world!] in the browser