What Is "Export Default" in JavaScript

What is export default in JavaScript?

It's part of the ES6 module system, described here. There is a helpful example in that documentation, also:

If a module defines a default export:

// foo.js
export default function() { console.log("hello!") }

then you can import that default export by omitting the curly braces:

import foo from "foo";
foo(); // hello!

---

Update: As of June 2015, the module system is defined in §15.2 and the export syntax in particular is defined in §15.2.3 of the ECMAScript 2015 specification.

What does export default do in JSX?

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

Difference between export default and export { default }

What is the difference

There is a huge difference between the two, one is in standard ES6 and the other is yet a proposal.

// Standard ES6
export { default } from './Button';

This is standard ES6: it is exporting the Default of Button from the current module (without altering the local scope of the current module)

// A Proposal
export default from './Button';

This is a proposal, and that explains why it does not work at vscode
Here is the proposal https://github.com/tc39/proposal-export-default-from (still stage 1)

Basically according to the proposal both should work exactly the same, the proposal is just another more elegant way of writing it - so that it matches how we export default in Standarad ES6.

Look here if you want to see why exactly the author of the proposal made it
https://github.com/tc39/proposal-export-default-from#common-concerns

Why they both work

JavaScript as it is often used today is no longer a mere interpreted language. It is more like a transpiled langauge, where what we write ( though in JavaScript or something similar) is still not the same that we send for the JS engine.

Now it works for you ( In your Code ) because part of your build system is taking code written with this proposal and transpiling it to standarad ES6. If we were to speak about Babel the most popular JS transpiler, this syntax is enabled with the following plugin https://babeljs.io/docs/en/next/babel-plugin-proposal-export-default-from.html.

Should I keep using the proposal

Preferably no, this is a proposal in state 1, even if Babel - or any other transpiler - makes it work, there is a chance that it never makes it to Standarad JavaScript. And if that happens there will come a time in the future will you will have to re-write that code.

Export and export default a variable

export exports is not valid syntax, it looks similar to something that TypeScript did support but that is deprecated in favour of modern syntax. Do not use it.

export default exports; and import everything from 'my_module'; would work together, but it's not recommended to default-export objects since it doesn't work with named imports.

Instead, use named exports:

export {
    Something,
    SomethingElse
}

(or put the export right on the declarations of Something and SomethingElse), then you can choose to do either

import {Something} from 'my_module';

or

import * as everything from 'my_module';

export * as bar VS export { default as bar }

This one exports all named exports and default export from foo as bar:

export * as bar from 'foo'

This one only exports default export from foo as bar:

export { default as bar } from 'foo'

Purpose of export default App in React-Native

"It is used to export single class, function, or primitive from a script file"

Have a look at this detailed answer.

Without the export you are in simple terms not exposing App and therefore nothing can use/access it.

---

Related Topics