Importing and Exporting Components in React App

In the course of Truly Understanding React, there have been a number of persisting issues which had not come to my full understanding until recently. Part of this issues includes understanding how component importing and exporting truly works in React.

Practically, skipping-that-part-to-understand when learning JavaScript contributes to this.

First, it is important to understand that their are two important ways of create a component in React App, and these include:

• Creating component as a function, and
• Creating component as a class

In the course of this article, including Truly Understanding React Series, the 'Creating Component as a Function' is being used.

Personally, it is has a result of my preference for functional and declarative programming paradigm (until I have discerned more).

In 'Creating component as a Function' there are different ways of doing so, as in the standard JavaScript syntax. The two most common ways are:

• Using named function as in this case:

function NewComponent (params) { 
   ...
}

• Using Arrow function as in this case:

const NewComponent = (params) => {
   ...
}

Exporting a component created using the Arrow function method to is very much the same as doing so with a component created the using named function method, but with a slight difference of limitation.

Exporting

To export a Component that is created with the named function method, there are four methods.
1.

export function NewComponent (params) { 
   ...
}

2.

function NewComponent (params) { 
   ...
}

export default NewComponent

3.

function NewComponent (params) { 
   ...
}

export NewComponent

4.

export default function NewComponent (params) { 
   ...
}

To export a Component that is created with the arrow function method, there are three methods.

1.

export const NewComponent = (params) => {
   ...
}

2.

const NewComponent = (params) => {
   ...
}

export default NewComponent

3.

const NewComponent = (params) => {
   ...
}

export NewComponent

Noticed the difference?

Yes, a component created with the arrow function cannot be exported instantly as default while creating it. It has to be declared after the component is created.

If you do know why, please, let us know in the comment section.

Importing

In importing the component into a new component file, it doesn't matter how the component was created (be it a function Component or a Class Component). What matters now is whether the component is exported as default, or not.

• In the case of the component been exported as default, when importing, we use:

import NewComponent from './newComponentFIle'

• In the case of the component been exported not as default, when importing, we use:

import { NewComponent } from './newComponentFIle'

Special thanks

Special thanks to all those who have found this series note-worthy to be reposted on other platform (and personally blogs).

Public Notice:

If reposting on other sites and platforms, kindly give credits so everyone can be tagged and carried along in this series, thank you.

Resources

Exports: MDN Web Docs. Retrieved from: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

*These React Fundamentals You Skip may be Killing You *: ohans Emmanuel. Retrieved from: https://www.freecodecamp.org/news/these-react-fundamentals-you-skip-may-be-killing-you-7629fb87dd4a/

Stay Blessed, ✌ until next time.
Mr Paul Ishaili C.