Generering af komponenter
Knapper, kort og formularer efter behov.
Generering af komponenter er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Byg i dele, ikke det hele på én gang
Det kan føles overvældende at skrive en prompt til en hel side. Det professionelle trick er at generere én komponent ad gangen: en knap, et kort, en formular, en navigationslinje. Hver af dem er en lille, genanvendelig byggesten.
I denne lektion skriver du prompts til v0, Lovable og Bolt for at få rene komponenter efter behov — og lærer at kombinere dem til en ægte grænseflade.
Hvad er en komponent?
En komponent er et selvstændigt stykke UI, som du kan genbruge: for eksempel én knapdefinition, der bruges 50 gange i din app. Ændrer du den én gang, bliver den opdateret overalt.
Når du tænker i komponenter, bliver dine prompts fokuserede, og din app forbliver ensartet. De fleste AI-værktøjer til UI genererer komponenter i React, som er den mest populære måde at bygge moderne grænseflader på.
Common components you'll prompt for:
- Button (primary, secondary, ghost)
- Card (image + title + text + action)
- Form input (label + field + validation)
- Navbar / Footer
- Modal / Dialog
- Avatar, Badge, TabsSkriv en prompt til en knap
Begynd i det små. Bed om en knap, og beskriv alle tilstande: standard, ved markør, deaktiveret. Når du navngiver tilstandene, fortæller du AI'en, at du går op i detaljerne.
Jo flere varianter du beder om fra starten, desto mere genanvendeligt bliver resultatet.
"Create a reusable primary Button component in React.
Rounded corners, a bold accent-blue background, white text.
Include hover (slightly darker) and disabled (greyed out) states.
Accept the label as a prop so I can reuse it."Skriv en prompt til et kort
Kort findes overalt — til produkter, blogindlæg og profiler. Beskriv pladserne: hvad der skal være i kortet, og i hvilken rækkefølge.
Fortæl AI'en, hvilke dele der er billeder, overskrifter og handlinger, så layoutet bliver rigtigt.
"Create a product Card component: a square image on top,
then a bold product title, a short description, a price in the
bottom-left, and an 'Add to cart' button in the bottom-right.
Subtle shadow, rounded corners, lifts slightly on hover."Skriv en prompt til en formular
Det er især i formularer, at detaljerne betyder noget: etiketter, pladsholdere, obligatoriske felter og fejlmeddelelser. Skriv dem tydeligt.
Gode formularer omfatter også validering — de fortæller brugeren, når noget er forkert. Bed udtrykkeligt om det.
"Create a contact form with three fields: Name, Email, and Message.
Each has a label above it. Email shows a red error if it's not valid.
A 'Send' button at the bottom, disabled until all fields are filled.
Clean, modern styling with generous spacing."Læs outputtet (lidt)
Du behøver ikke skrive React, men hvis du genkender formen, bliver du mere sikker. En komponent er en funktion, der returnerer markup. Nedenfor ser du den slags enkle, framework-uafhængige version af en knap, som AI'en måske vil forklare dig.
Du kan køre dette kodestykke — det logger blot etiketten for at simulere, hvad en knap 'gør', når der klikkes på den.
function Button(label) {
return {
label: label,
click: function () {
console.log(label + ' was clicked!');
}
};
}
const saveBtn = Button('Save');
saveBtn.click();Gør den genanvendelig med props
Det ord, der forvandler et engangsdesign til en genanvendelig komponent, er prop (en forkortelse for 'property') — en værdi, du sender ind for at tilpasse den.
Bed AI'en om at gøre tingene konfigurerbare: etiket, farve, størrelse og ikon. Så kan én Button-komponent dække alle knapper i din app.
"Refactor my Button so it accepts props: label, variant
('primary' | 'secondary' | 'ghost'), size ('sm' | 'md' | 'lg'),
and an optional left icon. Give each variant distinct styling."Generér varianter på én gang
Har du brug for et helt sæt? Bed om alle varianter på én gang, og bed om et forhåndsvisningsgalleri, så du kan se dem side om side. Værktøjer som v0 viser alle mulighederne, så du kan sammenligne dem.
"Generate a Badge component with 4 color variants:
success (green), warning (yellow), error (red), and info (blue).
Then show all four side by side in a small preview gallery
so I can compare them."Kombinér komponenter til en side
Når du har knapper, kort og formularer, skal du samle dem. Henvis til de komponenter, du allerede har oprettet, ved navn, så AI'en genbruger dem i stedet for at opfinde nye.
Det holder dit design ensartet — den samme knap overalt og den samme kortstil på tværs af sektioner.
"Build a product listing page that uses my existing Card component
in a 3-column responsive grid, with my primary Button as the
'Load more' action at the bottom. Reuse the components — don't
create new styles."Brug et komponentbibliotek som grundlag
Mange værktøjer bygger oven på gennemarbejdede biblioteker som shadcn/ui. Du kan bruge dem til straks at få tilgængelige komponenter i professionel kvalitet og derefter ændre deres stil med en prompt.
Du behøver ikke installere noget manuelt i v0 eller Lovable — du skal bare bede om det.
"Use shadcn/ui components as the foundation. Build a settings panel
with a Card containing toggle switches, a Select dropdown for language,
and a Save button. Match the rest of my app's spacing and colors."Øv dig på komponentarbejdsgangen
Prøv denne proces i v0 eller Lovable: generér et enkelt Card, finjustér det, indtil du er tilfreds, og bed derefter om et gitter med dem. Når du bygger nedefra og op — med de små dele først — får du langt mere kontrol end ved blindt at skrive en prompt til en hel side.
Gem prompts, der fungerer godt; de bliver til dit personlige komponentværktøj.
"Create a testimonial Card: a round avatar, the person's name and
role, a star rating, and a quote. Then generate a 3-column grid of
three of these cards with placeholder testimonials."Hurtigt tjek
Hvorfor er det så nyttigt at bede AI'en om at gøre en komponent i stand til at acceptere props?
Opsummering: Komponenter efter behov
Du har lært at bygge grænseflader af genanvendelige dele. Skriv prompts til én komponent ad gangen — knap, kort, formular — og beskriv dens pladser og tilstande. Gør komponenterne fleksible med props, generér varianter på én gang, og brug biblioteker som shadcn/ui som grundlag.
Saml derefter komponenterne på sider ved at henvise til dem ved navn, så AI'en genbruger dem i stedet for at opfinde dem igen. Næste emne er at gøre alt smukt med farver, afstand og mørk tilstand — alt sammen ved hjælp af prompts.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Generering af komponenter” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Generering af komponenter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Generering af komponenter”?
Knapper, kort og formularer efter behov. Du øver dig i Vibe-programmering med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Generering af komponenter”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Beskriv en brugerflade med ord
- Generering af komponenter
- Styling og theming
- Gør den responsiv