Menu
Exports without a default tag are Named exports. Exports with the default tag are Default exports. Using one over the other can have effects on your code readability, file structure, and component organization. Named and Default exports are not React-centric ideas.
The export statement is used when creating JavaScript modules to export objects, functions, variables from the module so they can be used by other programs with the help of the import statements. There are two types of exports. One is Named Exports and other is Default Exports.
Export Default is used to export only one value from a file which can be a class, function, or object. The default export can be imported with any name.
There are two different types of export, named and default. You can have multiple named exports per module but only one default export.
It's easiest to just look at what the three different ES6 import/export styles compile down to in CommonJS.
// Three different export styles
export foo;
export default foo;
export = foo;
// The three matching import styles
import {foo} from 'blah';
import foo from 'blah';
import * as foo from 'blah';
Roughly compiles to:
exports.foo = foo;
exports['default'] = foo;
module.exports = foo;
var foo = require('blah').foo;
var foo = require('blah')['default'];
var foo = require('blah');
(Actual compiler output may differ)
If your need is to export multiple objects go with named exports(without default keyword).
function x1(){};
function x2(){};
export {x1},{x2}; //my-module.js
import {x1},{x2} from 'my-module';
otherwise for a single export, default export works well
export default function x1() {};
import x1 from 'my-module';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With