# Need to understand relationship between what you import and what you export

**URL:** <https://forum.kirupa.com/t/need-to-understand-relationship-between-what-you-import-and-what-you-export/640119>\
**Category:** programming\
**Created:** [August 2, 2019, 2:48am UTC](https://forum.kirupa.com/t/need-to-understand-relationship-between-what-you-import-and-what-you-export/640119 "2019-08-02T02:48:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![naikvi](https://avatars.discourse-cdn.com/v4/letter/n/aeb1de/32.png) [@naikvi](https://forum.kirupa.com/u/naikvi)\
**Post date:** [August 2, 2019, 2:48am UTC](https://forum.kirupa.com/t/need-to-understand-relationship-between-what-you-import-and-what-you-export/640119/1 "2019-08-02T02:48:27Z")

</div>

In the the book entitled “Learning React” Second Edition chapter 20, we have the steps to make a react application using redux. In there, we have index.js importing the following:

import App from “./App”;

while App.js exports the following:

export default connectedComponent;

As I was learning react, I thought that you essentially had to export components which then you import when you want to use them. In this case, you never had an “App” component and never exported it. So how is the index.js file able to get an App component? I thought I understood this but it seems this is not so straightforward.

Thank you in advance for replying. 🙂

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [August 2, 2019, 10:47am UTC](https://forum.kirupa.com/t/need-to-understand-relationship-between-what-you-import-and-what-you-export/640119/2 "2019-08-02T10:47:40Z")

</div>

This is a special case using the _default export_. Notice that the export includes the `default` keyword.

```javascript
    export default connectedComponent;

```

This is different from a _named import_ in that you aren’t required to use the exported variable name in the import. Instead, you call it whatever you want in your import. Default imports don’t use the curly braces when importing, you instead just specify a name directly after the `import` keyword.

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

```

Which could just as easily have been

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

```

Compared to a named export/import…

```javascript
    export { connectedComponent };
    // or you may also see it in context with declaration
    // export var connectedComponent = ...

```

and…

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

```

Here, `connectedComponent` needs to be specified specifically by name, and it needs to be included in curly braces (`{}`).

Note that in reality, default exports are actually named, and in fact are named “default”. The name-your-own-import syntax is shorthand for a renamed named import.

```javascript
    import App from "./App";
    // is the same as
    import { default as App } from "./App";

```

---

<div class="post-metadata">

**Author:** ![naikvi](https://avatars.discourse-cdn.com/v4/letter/n/aeb1de/32.png) [@naikvi](https://forum.kirupa.com/u/naikvi)\
**Post date:** [August 2, 2019, 3:57pm UTC](https://forum.kirupa.com/t/need-to-understand-relationship-between-what-you-import-and-what-you-export/640119/3 "2019-08-02T15:57:20Z")

</div>

Thanks! Based on your answer, I tested some modifications and it makes a lot of sense now. 🙂