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