Exports and Imports and Defaults, Oh My!
Tags: javascript, react, webdev, beginners
Published: 2019-04-29 12:16:04

---
title: Exports and Imports and Defaults, Oh My!
published: true
description: Ever wonder what that 'export default App' code was all about?
tags: javascript, react, webdev, beginner
cover_image: https://sanctuarybaptist.files.wordpress.com/2018/02/b18-dorothy.jpg?w=1130
series: Boilerplate Basics
---

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 we kind of take for granted.

One of the first snippets that caught my attention was the line of code that exports the App component when you generate a new React project.

```jsx
class App extends Component {
  render() {
    return (
      <h1>This is my application.</h1>
    )
  }
}

export default App
```

So I'd like to take this opportunity to walk through this short but powerful piece of code and break down what is happening and why it's there.

# ES6 Modules

ECMAScript, [the standard Javascript is based on](https://dev.to/laurieontech/the-layers-of-javascript-15op), introduced the concept of modules in ES6.

A module is a self-contained unit of code. That code can expose assets to other modules using `export`. It can also consume assets from other modules using `import`.

**The code above is an example of how React uses this concept to pass things around from component to component.**

This is important to keep in mind because the ES6 spec is slightly different.

# One Step at a Time

Let's examine just this line of code.

```jsx
export default App
```

- First we have `export`, that keyword is exposing content to other modules.

- Next, we have `default`. 

Default is one of the types of exports available in ES6. Using the default keyword we're saying that if you import this module and don't specify what you are importing from it, you'll get this! For any given module we can only have one default export.

- Finally, we have the name of the asset we're exporting, in this case that's `App`.

# Ok, Now Let's Use It

Since `App` is exported, we can use it in another module if we `import` it.

```javascript
import App from "./App"
```
*This exact line of code appears in `index.js` when you create a React project.*

We import default exports using the syntax above. What's interesting is that `App` is just a name assignment here. This statement is really saying, you haven't specified an asset from `.App` so I'm going to take the one exported by default and assign it a name for reference purposes.

As a result, it turns out that we don't have to name it `App` at all. It's ONLY a name assignment. 

```javascript
import Whatever from "./App"
```

In this case, `Whatever` is still our App component! And we can use it.

```jsx
ReactDOM.render(<Whatever />, document.getElementById('root'));
```

# Missing Default, aka Named Imports

What about exporting multiple assets or non-default assets? What does that look like?

```jsx
export class App extends Component {
  render() {
    return (
      <h1>This is my application.</h1>
    )
  }
}
```

The above is an example of the same App asset exported, but without using the default keyword.

This will work, but we can't import it the same way. If I try to do this


```javascript
import App from "./App"
```

It gives me this error

![Attempted import error: './App' does not contain a default export](https://tenmilesquare.com/wp-content/uploads/2019/04/Screen-Shot-2019-04-19-at-8.07.39-AM.png)

My import statement doesn't know what it's assigning to that `App` name! 

Without a default export, I need to explicitly name what I'm looking to import. That's why it's called a named import in ES6.

```javascript
import {App} from "./App"
```

This looks whole lot like destructuring assignment! While it's technically different, buildtime vs. runtime, it's a helpful way to remember the syntax. So this statement is really saying, look inside the whole `.App` module. I want the exported asset called `App` inside that module.

# Give Me Everything!

Since it's possible to export multiple assets in a single module it's also necessary to be able to import more than one at a time. We can do this as long as we know the names.

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

And you can have both default and named exports in a single module and import them together. Let's pretend `App` is still the default export.

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

Voila!

# Not Too Bad

It's not super complicated once you break it down. However, too often we see throwaway lines of code inside frameworks and projects that we don't take the time to understand. I encourage you to curiously explore everything you see! It'll make you a better programmer.