react named export vs default export
Default export only export one item (object, function,...)
1
// import
2
import MyDefaultComponent from "./MyDefaultExport";
3
​
4
// export
5
const MyComponent = () => {}
6
export default MyComponent;
Copied!
Named export can have multiple name and can be imported selectively
1
// module "my-module.js"
2
function cube(x) {
3
return x * x * x;
4
}
5
const foo = Math.PI + Math.SQRT2;
6
var graph = {
7
options: {
8
color:'white',
9
thickness:'2px'
10
},
11
draw: function() {
12
console.log('From graph draw function');
13
}
14
}
15
export { cube, foo, graph };
16
​
17
​
18
​
19
​
20
// to use it in some other file
21
import { cube, foo, graph } from './my-module.js';
22
graph.options = {
23
color:'blue',
24
thickness:'3px'
25
};
26
graph.draw();
27
console.log(cube(3)); // 27
28
console.log(foo); // 4.555806215962888
Copied!
Last modified 1mo ago
Copy link