Summary  
This chapter explains how a Vite-generated React project is organized, detailing the purpose of key files and folders (like src, public, configuration files, and dependencies) and highlighting the parts developers work with most.  

General domain of usage  
Front-end web development

Når du opretter et React-projekt med Vite, genererer det et sæt filer og mapper, der udgør **projektstrukturen**. Ved første øjekast kan denne struktur virke overvældende, men du behøver ikke at forstå det hele med det samme.

Undersøg, hvad hver hovedmappe og fil bruges til, og hvilke dele du oftest vil arbejde med.

## Oversigt over projektets rodmappe
Et Vite React-projekt indeholder typisk følgende elementer på rodniveau:
- node_modules;
- public;
- src;
- index.html;
- package.json;
- package-lock.json;
- vite.config.js;
- eslint.config.js;
- .gitignore;
- README.md;

Her gennemgås de vigtigste.

Indeholder alle tredjeparts-pakker og afhængigheder. Oprettes automatisk efter kørsel af `npm install`. **Rediger ikke** denne mappe, og den udelades normalt fra versionskontrol.

Opbevarer statiske aktiver såsom billeder og ikoner. Filer her kan tilgås direkte af browseren.

Hovedmappen hvor din React-kode ligger. Indeholder komponenter, styles og applikationslogik. **Dette er den mappe, du vil arbejde mest i.**

Den eneste HTML-indgangspunkt for appen. React gengiver hele applikationen i denne fil ved hjælp af et root-element.

Beskriver projektets konfiguration. Indeholder afhængigheder og scripts som `npm run dev`.

Låser præcise versionsnumre for afhængigheder. Sikrer ens installationer på tværs af forskellige maskiner.

Konfigurationsfil for Vite. Styrer hvordan appen bygges og serveres. Berøres normalt ikke af begyndere.

Angiver hvilke filer og mapper Git skal ignorere.

Definerer regler for kodekvalitet og linting.

Grundlæggende projektdokumentation og instruktioner.

Hvilken mappe indeholder det meste af din React-applikationskode?

Udforsk grundlæggende principper for opbygning af brugergrænseflader med React. Fokus på komponenter, JSX, dataflow, tilstand og sideeffekter anvendt i daglige React-applikationer.

Undersøg, hvad React er, og hvordan det gengiver brugergrænseflader. Fokus på komponenter, JSX-syntaks og visning af elementer på skærmen.

Dyk ned i overførsel af data mellem komponenter og styring af UI-output. Fokus på props, betinget rendering og rendering af datalister.

Lær, hvordan brugerinteraktioner og eksterne data ændrer brugergrænsefladen over tid. Fokus på håndtering af tilstand og håndtering af sideeffekter med React hooks.

Undersøg almindelige metoder til at style React-komponenter. Fokus på anvendelse af styles med inline-styles og ekstern CSS.

Lær, hvordan man kører et React-projekt og forstår dets struktur. Fokus på at starte et projekt med Vite og navigere i projektfilerne.

Forståelse af React-projektets Struktur

Oversigt over projektets rodmappe