+page vacatures refactoren code aantekeningen

[yujing-student]

denk je na hoe dit zou kunnen werken

en is bekijken altijd blauw

en is de naam altijd hetzelfde

je pakt de hele inhoud van vavancy en je kopieert die naar je vacany component en alle slots haal je dan weg

Design Lead

LANGUAGE COMPANY 32-40 AMSTERDAM

        <Link
            slot="link"
            href="/"
            clazz="detail-link"
        >
            <span slot="link-text">BEKIJKEN</span>
            <svg slot="svg-icon-right"
            width="16" height="16" viewBox="0 0 24 24" fill="none" aria-label="ga naar bekijken">
            <path d="M7 17L17 7M17 7H8M17 7V16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        </Link>
    </Vacancy>

dit worden dynamisch props

---

de knop bekijken kan je ook dynamisch maken

boven in het script zet je export let title

vervolgens kan je de props importeren

 <Vacancy title='design lead'
    language="dutch"
    company="compamy"

als dit refactor met je html

je weet zeker dat je html strucuur is hetzelfe als in je component

vervolgens kan je in script je data fetchen
en je hebt met een stukje html en je component rendert

ook heb je minder code op de +page svelte

---

als je geen cms hebt zoals de studenten in jaar 1 en die hardcode al die tekst in de html

zelfs als je geen cms hebt zie je hoe fijn het is om je data te definieren

als je de data in een array zet kan je de data in 1 keer aanpassen

en in directus modueleer je je model

en implementeer je dit

je verweidert je let hier

zo kan je stapsgewijs werken

ontkoppel de data en dan hoef je niet op 7 plekken de code aan te passen als je een wijziging wilt maken

de data moet van de html ontkoppeld worden en de props moet je doorgeven

pagina's daar doe je data fetching

in componetns doe je geen data fetching

de ontkoppeling van dat in de strcutuur