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

programming
1

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

2

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

    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.

    import App from "./App";

Which could just as easily have been

    import FooBar from "./App";

Compared to a named export/import…

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

and…

    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.

    import App from "./App";
    // is the same as
    import { default as App } from "./App";
1 Like
3

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

1 Like