Make Your Own File

 Step 1

Src/Home

    1 Home.js

===============================Open===================================

export default function () {

    return <>
       <h1>Home Component</h1>
    </>
}

===============================Close===================================

2 Nayan.js

===============================Open===================================

export default function () {
return <>
<h1>Nayan</h1>
</>
}

===============================Close===================================

Prem.js

===============================Open===================================

export class Prem {
     NamePrint() {
        return <><h1>Prem</h1></>
    }

    NamePrint1() {
        return <><h1>Prem1</h1></>
    }
    NamePrint100() {
        return <><h1>Prem100</h1></>
    }
}

===============================Close===================================

3 Tejas.js

===============================Open===================================

export  function TejasName() {
    return<>
    <h1>Name:Tejas</h1>
    </>
}

export  function tejasAddress() {
    return<>
        <h1>Address:Tejas</h1>
    </>
}

===============================Close===================================

App.js

===============================Open===================================

import logo from './logo.svg';
import './App.css';
import React from "react";
import Home from "./Home/Home";
import Nayan from "./Home/Nayan";
import {TejasName,tejasAddress} from "./Home/Tejas";
import {Prem} from "./Home/Prem";


function App() {
    const objPrem=new Prem();
    let products=[1,2,3,4,5,6];


    return <>
        <Home/>
        <Nayan/>
        <TejasName/>
        <tejasAddress/>
        <objPrem.NamePrint/>
        <objPrem.NamePrint1/>
        <objPrem.NamePrint100/>
      <h1>Sabirs</h1>
      {
          products.map((item)=>(<ProdoctCard src={item} />))
      }
  </>;
}

export default App;

function ProdoctCard({src}) {

    return  <img src={`./img/${src}.webp`}/>;
}

===============================Close===================================