Import

In React, imports and exports helps to split codes and reuse them into multiple files. import helps in importing the functions or components from another component into that component. There are two ways of importing in React.

• Importing from default exports.
• Importing from named exports.

Importing from default exports.

Importing the default exports means importing the whole module or component. Every module should have a default export. While importing the default export from a module, we can use only the name of the module we are importing and specify its path. 
 

Syntax

import MODULE_NAME from PATH

Example

import MyComponent from './MyComponent'       //importing the component

function Component2(){
 return <MyComponent/>     //using the imported component
}

export default Component2

Importing from named exports.

Importing the named exports means importing a specific function from a component. A module may have one , many or no named exports at all. While importing the named export from a module, we wrap the name of the function we are importing with curly braces {} and specify its path. 
 

Syntax

import {NAME} from PATH

Example

import {MyComponent} from './MyComponent'       //importing the component

function Component2(){
 return <MyComponent/>     //using the imported component
}

export default Component2