---------------- App page ------------------------------------ import Heading, { SubHeading, SubHeading2 } from "./Heading" // optional you can use import * as NameYouWant from "./root" // when using the when call the function use NameYouWant.NamOfFunction ------------------- Heading Page ------------------------- function Heading() { return ( <div> <h1>This is My Componente Heading</h1> <h2 style={customStyle}>{greeting}</h2> </div> ); } function SubHeading() { return ( <ul> <li>This is the Subheading 1</li> </ul> ); } function SubHeading2() { return ( <ul> <li>This is the second Subheading 2</li> </ul> ); } export default Heading; export { SubHeading, SubHeading2 };