here is one file (clock.js) for my React app

class Clock extends Component { ...
...}
export default Clock;

here's another where I'm importing the Clock ponent

import Clock_1 from './clock/clock';
...
<Route exact path="/clock" ponent={Clock_1} />

as you can see, I exported it with name Clock and imported it with name Clock_1, still it is piling and running successfully. Why?

PS: Apologies beforehand if this question sounds lame/ too simple/ stupid. I'm a beginner.

here is one file (clock.js) for my React app

class Clock extends Component { ...
...}
export default Clock;

here's another where I'm importing the Clock ponent

import Clock_1 from './clock/clock';
...
<Route exact path="/clock" ponent={Clock_1} />

as you can see, I exported it with name Clock and imported it with name Clock_1, still it is piling and running successfully. Why?

PS: Apologies beforehand if this question sounds lame/ too simple/ stupid. I'm a beginner.

• javascript
• reactjs
• ecmascript-6
• react-redux
• es6-class

• probably you should read more about import/export – The Reason Commented Jan 25, 2018 at 11:30
• 1 you are using default export. developer.mozilla/en-US/docs/web/javascript/reference/… – Suraj Rao Commented Jan 25, 2018 at 11:30
• Possible duplicate of Why es6 react ponent works only with "export default"? – kLabz Commented Jan 25, 2018 at 11:30
• @kLabz thank u for replying. My question is in different context than the one you shared in this link. The link argues about the existence of 'exports default' whereas I am discussing the nature of 'imports/ exports' functionality. Though some parts of the link's answer DOES intersect with my question's answer, it is not same scenario, hence not duplicate. – Tripti Rawat Commented Jan 25, 2018 at 11:41
• 1 Could be, coz I'm still reading about this topic, but since you already know, it could be the same answer. But ques are not same, are they? Sry if i sound rude arguing about this :D I just think if tomorrow a person has the same problem like mine, he won't search for a question like the one on the link, but something similar to what i posted here. Since when i searched for this problem, the link never came up in my search result, bcoz of which I had to post this question. But then again, I should have gone deep into the imports/exports docs & u did good pointing out that link.Thnx again :) – Tripti Rawat Commented Jan 25, 2018 at 12:16

3 Answers 3

[ES6 Feature] First of all default keyword with export allows us to set Anonymous Name we want to set when we import it.

If you export it with

export const Clock,

then you have to import it strictly(ES6 way - using object destructuring syntax for named exports) with

import { Clock } from './Clock

or also can use import * as Clocks from './Clock' if you want to import all constants/variables(i.e. all named exports jammed into one object). This will make Clocks as an object with all exported variables/anything within it.

Like Clocks = { Clock : Clock \\ import {Clock} from './Clock', .... }

Named exports are useful to export several values. During the import, it is mandatory to use the same name of the module as it was defined in source file.

But a default export can be imported with any name for example:

export default k = 12; // in file test.js

import m from './test' // note that we got the freedom to use import m instead of import k, because k was default export

console.log(m);        // will log 12

Because you use export default. Which means that you export only that class so the name is not that relevant. Anyway, that's why TSLint(a set of rules) says that it's forbidden to use export default.

its es6 feature, its just like giving an alias name or assigning one variable reference to another with some other name

behind the curtain it is like this when you import with some other name:

Clock_1 = Clock