Wednesday, 4 September 2019

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'