React Exports

Default Exports vs Named Exports

• Named exports are useful when you have multiple entities to export
  • Named must be imported with the curly braces {}
  • import { HelloWorld, Foo } from './pages/ExportsExample';
• Default exports are suitable for a single, primary entity. 
  • Default must be import without the curly braces 
  • import Fruit from './pages/Home';

{/* default example */}
function Fruit() {
    return (
            <h1>This is Fruit</h1>
    )
}
export default Fruit;

{/* default example */}

export default function Fruit() {
    return (
            <h1>This is Fruit</h1>
    )
}

{/* named example </a> */}
export const HelloWorld = () => console.log("Hello");

export const Foo = () => { return <h3>Bar</h3>};

import Fruit , { HelloWorld, Foo } from './pages/ExportsExample';