DEV Community

Cover image for Exports and Imports and Defaults, Oh My!

Exports and Imports and Defaults, Oh My!

Laurie on April 29, 2019

I've been starting projects using cli or starter templates lately and one of the things I've noticed is how many pieces of code are included that w...
Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Not that there's a use for this, but is there a way to assign names to the imports when running

import {App, Dev, Post} from "./App"

For example, is there a way to import App as Whatever and Post as Thing?

Collapse
 
laurieontech profile image
Laurie • Edited

Yup!

If it's a named import it's this.

import {App as Whatever} from "./App"
Collapse
 
gmartigny profile image
Guillaume Martigny

Nice article. You just haven't talked about the * globber for import. You can use it to import everything from a module under a "namespace".

import * as Namespace from "module";
const app = new Namespace.App();
Enter fullscreen mode Exit fullscreen mode
Collapse
 
laurieontech profile image
Laurie

Definitely an important thing to know. I tried to keep it bite sized, so I didn't cover every part of imports and exports (like aliases). But great to have in the comments as additional information :)

Collapse
 
salunmarvin profile image
Salun Marvin

Excellent approach. It's so easy how we get lost about using frameworks and not understand what it does.

Collapse
 
qcgm1978 profile image
Youth

Another interesting style is introducing alias:

//You can import the default export by either

import Test1 from './test';
//or

import {default as Test2} from './test';
Enter fullscreen mode Exit fullscreen mode
Collapse
 
laurieontech profile image
Laurie

Definitely. Another nice piece of syntax to understand.

Collapse
 
thefoxboxman profile image
John De Costa

Thank you Laurie. That is by far the best explanation I have read on this subject. Well done you! Keep up the excellent work.

Collapse
 
laurieontech profile image
Laurie

Thank you so much!

Collapse
 
darkain profile image
Vincent Milum Jr

As someone who doesn't use React, I'm curious as to why so much biolerplate code is even needed for a basic simple one line of text? I work in the Altaform framework, and it would literally just be the line of text with zero boilerplate, and it would just work.

Collapse
 
laurieontech profile image
Laurie

So this is defining a component that can then be used on multiple pages. Components can have the render function as well as other functions, styles, etc. I’ll be doing another post on that.
But frameworks come with different strengths and different “powers”. They all have use cases where they make more sense.

Collapse
 
worc profile image
worc

because the point of the library isn't "a basic simple one line of text." the point is create much larger and much more complex applications. once you're in the react ecosystem you have a much larger toolset to pull from than if you were just generating html strings with your own homegrown solution.

Collapse
 
tamouse profile image
Tamara Temple

Great post, really clear explanation and examples. I think it's very helpful to take a small piece like this, that we see everyday, and break it down. Well done!

Collapse
 
awkale profile image
Alex W Kale

This explanation is so helpful and clear. I finally feel I fully understand imports and exports.

Collapse
 
laurieontech profile image
Laurie

So glad it resonated with you!

Collapse
 
meddy672 profile image
Matt Eddy

Very well put together article.

Collapse
 
darryl profile image
Darryl Young

Nice article, Laurie. Thanks for sharing.