"Import App" while it should be "Import AppFunction"

[kami1]

In the index.js file of the react js course, when it comes to import the component, it’s written:

import App from “./Container/AppFunction”;

However, the component name is AppFunction in the AppFunction.js file:

…
export default function AppFunction() {
…
}

I’m surprised that the code is still working. When I changed the ‘App’ to ‘AppFunction’, the code also works perfectly. What’s going on?!

[mtrtmk]

It is because of the default export (as opposed to a named export).

Documentation: export - JavaScript | MDN
See documentation for more details and examples.

Every module can have two different types of export, named export and default export . You can have multiple named exports per module but only one default export.