1

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 component

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

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

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

Tripti Rawat
  • 645
  • 7
  • 19
  • probably you should read more about `import/export` – The Reason Jan 25 '18 at 11:30
  • 1
    you are using `default` export. https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export – Suraj Rao Jan 25 '18 at 11:30
  • Possible duplicate of [Why es6 react component works only with "export default"?](https://stackoverflow.com/questions/31852933/why-es6-react-component-works-only-with-export-default) – kLabz Jan 25 '18 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 Jan 25 '18 at 11:41
  • The question is different, but the answer is the same (named exported vs default export, default export not being bound to any name and thus allowing you to use them with whatever name you want). – kLabz Jan 25 '18 at 11:54
  • 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 Jan 25 '18 at 12:16
  • Yeah, I used the duplicate flag to provide the answer available there, not to sanction this question. It was more of a "the answer to this question is available there". That, and it was the first link in the "related" section in the right column :) – kLabz Jan 25 '18 at 14:01

3 Answers3

6

[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
Meet Zaveri
  • 2,921
  • 1
  • 22
  • 33
1

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.

Adrian Frunza
  • 96
  • 2
0

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

vinay gosain
  • 171
  • 6