Default and Named exports in ReactJs

There are two ways you can import your classes it based on how you will do the exports.

import React from 'react'  // Default Export

import {Component} from 'react' // Named Export

Here you can see the import is with bracket and another one is without bracket.

As I told in the first line export are two type:

1. Default Export

2. Named Export

Any of the components can have one default export and can have 0 or more than 1 named export.

Example of Named export as like.

export const Greet = () => <h1> Hello Satya</h1>

Than it will be import to the another component as like

import {Greet} from './myComponentes/Greets' // named export

import {Greet as SomeName} from './myComponentes/Greets';

If you will see the above Greet is in side of curly bracket.

Example of default export

Exporting a function values like below.

function Greet()

{

    return <h1> Hello Satya</h1>

}

//export const Greet = () => <h1> Hello Satya</h1>

export default Greet;

Now you can import it to the other component as like

import Greet from './myComponentes/Greets'