IndianTechnoEra: Named Export | Export Component with Variable Name in ReactJS | IndianTechnoEra

What is Named Export in Modules of ReactJS?

Named export means export a signal variable or export with name the particular code have to render with index.js and do not create render in and component just.

Named Export in React Export with Variable Name | IndianTechnoEra

Firstly create a component with initial Capital latter name like App1.js then import react module.

After that define your variable and create the element whit your required specified web page format 

createElement takes three attributes as follow

createElement('h1',{id:'myid'},'Heading text');

attributes Here like 'h1' here can nay tag of html what you have to use

second will be id or class id can be use as used above but if we have to give class then we need to write as follow

createElement('h1',{className:'myclass'},'Heading text');

After render the class will be show as normal as html class but to use or define in Pure React give with className for class defining

Example 1: Named Export in Modules of ReactJS

App1.js // inline or by name export variable without render into index with render

import React from "react";

export const title1 = React.createElement('h1',{},'Heading 1 with React');

export const title2 = React.createElement('h2',{id:'idt2'},'Heading 2 with React');

export const title3 = React.createElement('h3',{},'Heading 3 with React');

export const title4 = React.createElement('h4',{},'Heading 4 with React');

index.js

import React from 'react'

import ReactDOM from 'react-dom/client'

import { title1 } from './App1'

import { title2 } from './App1'

import { title3 } from './App1'

import { title4 } from './App1'

import { friendList } from './App1'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(

  <>

    {title1}

    {title2}

    {title3}

    {title4}

    {friendList}

  </>

)

Output