Truly Understanding React (TUR) - Ep5
Tags: react, tutorial, productivity, devops
Published: 2022-03-05 05:39:14

# Importing and Exporting Components in React App
<br />
In the course of [Truly Understanding React](https://dev.to/mrpaulishaili/truly-understanding-react-tur-ep1-3bn6), 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](https://dev.to/mrpaulishaili/truly-understanding-react-tur-ep1-3bn6) 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:

```jsx
function NewComponent (params) { 
   ...
}
```

- Using **Arrow function** as in this case:

```jsx
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. 

```jsx
export function NewComponent (params) { 
   ...
}
```

2. 
```jsx
function NewComponent (params) { 
   ...
}

export default NewComponent
```
3. 
```jsx
function NewComponent (params) { 
   ...
}

export NewComponent
```
4. 
```jsx
export default function NewComponent (params) { 
   ...
}
```

---

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

1. 
```jsx
export const NewComponent = (params) => {
   ...
}
```

2. 
```jsx
const NewComponent = (params) => {
   ...
}

export default NewComponent
```
3. 
```jsx
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:

```jsx
import NewComponent from './newComponentFIle'
```

- In the case of the component been exported not as default, when importing, we use:
```jsx
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](https://dev.to/mrpaulishaili/truly-understanding-react-tur-ep1-3bn6), 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.`