Begrip: Export & export default

In deze cursus gebruiken we voor componenten steeds een default export, dit wil zeggen dat de componenten geïmporteerd kunnen worden zonder accolades te moeten schrijven in het import-statement.

Als we de default modifier weglaten, wordt de component nog steeds geëxporteerd, maar maakt deze deel uit van een object. We spreken in dit geval van een named export.

Alle named exports worden verzameld in een object, via accolades in het import-statement kunnen we aangeven dat we slechts één element uit dat object willen importeren.

Een bestand kan maximaal één default export hebben, maar kan meerdere named exports bevatten. De twee kunnen ook gecombineerd worden binnen één bestand.

/src/helloWorld.tsx

import {FunctionComponent} from 'react';

export const HelloWorld: FunctionComponent = () => {
    const greeting = {
        greeting1: 'World',
        greeting2: 'Universe'
    }

    return (
        <>
            <h1>Hello {greeting.greeting1 + '!'}</h1>
            <h1>Hello {greeting.greeting2}!</h1>
        </>
    )
}

const HelloWorlDefault = HelloWorld;
export default HelloWorlDefault;

/src/main.tsx

import {HelloWorld} from './helloWorld.tsx';
import HelloWorlDefault from './helloWorld.tsx';

:::