Export Component as a default in Reactjs

The export statement is used when creating JavaScript modules to export live bindings to functions, objects, or primitive values from the module so they can be used by other programs with the import statement. Bindings that are exported can still be modified locally; when imported, although they can only be read by the importing module the value updates whenever it is updated by the exporting module.

let’s learn it with an example

in React, when you create a component something like this:

then when you try to use this component in another place in your React app you’re get the following error:

Attempted import error: ‘./Hello.js’ does not contain a default export (imported as ‘Hello’).

and that says you’re importing components in your App.js file then don’t export this component as a default.

for resolving this error you should in the end of your component export it as an default so it’s look something like this:

by doing this step and exporting your component as a default you get this massage.

Compiled successfully!

before the end of this article I leave some useful resource for you :

developer.mozilla.org > export

developer.mozilla.org > import

Importing a Component (Create react app)

good luck:)

Hello! My name’s Arvin. I’m a developer that loves simplifying things. I love breaking down complex problems into simple, easy to understand solutions.