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.

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

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.

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.

import Whatever from "./App"

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

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?

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

import App from "./App"

It gives me this error

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.

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.

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.

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.

Exports and Imports and Defaults, Oh My!