The difference between import something and import {something} from package is justify by the two export declaration forms.
- Name Export
- Default Export
Name Export
Name exports are useful to export several values. During the import, it is mandatory to use the same name of the corresponding object.
//app.js
export let language = 'Javascript'
//admin.js
import language from 'app.js'
the above code example of import wouldn't work because app.js not contains any default export , instead it contains name export so will write {language} instead of language while importing in admin.js .
import {language} from 'app.js'
above line of code is the correct syntax while importing name exports , remember that in this case the name you assign matters while importing because you are importing specific thing by it's export name.
Default Export
Default exports are useful to export only a single object, function, variable. During the import, we can use any name to import.
//app.js
let language = 'Javascript'
export default language;
//admin.js
import language from 'app.js'
or
import anything from 'app.js'
The above code is the example of importing the default exports. In default export case assign value while importing will not enclosed in curly brackets { }. Otherwise it wouldn't work.
In this matter no matter what you name assign while importing because it will always resolve to whatever is something default export of app.js
A module can only have one something default export, but as many named exports as you like. You can import them together
Top comments (0)