DEV Community

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...

Read full post

Tyler V. (he/him) • Apr 29 '19

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?

Laurie • Apr 29 '19 • Edited

Yup!

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

import {App as Whatever} from "./App"

Guillaume Martigny • May 1 '19

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();

Laurie • May 1 '19

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 :)

Salun Marvin • Apr 29 '19

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

Youth • Apr 30 '19

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';

Laurie • Apr 30 '19

Definitely. Another nice piece of syntax to understand.

John De Costa • Apr 30 '19

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

Laurie • Apr 30 '19

Thank you so much!

Vincent Milum Jr • Apr 30 '19

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.

Laurie • Apr 30 '19

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.

worc • Apr 30 '19

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.

Tamara Temple • Apr 30 '19

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!