React Academy · Lektion

Mappestruktur og navngivningskonventioner

Organisér et React-projekt med feature-baserede mapper og tydelige filnavne.

Lektion 4 af 413 trin

Mappestruktur og navngivningskonventioner er en gratis React Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Velkommen

I denne lektion undersøger du almindelige mappestrukturer til React-projekter, lærer navngivningskonventioner for filer og komponenter og forstår, hvordan du organiserer kode, efterhånden som projektet vokser.

Standardstrukturen

Et minimalt Vite + React-projekt har `src/App.jsx` og `src/main.jsx`. Det er fint til små demonstrationer, men kan ikke skaleres. Efterhånden som du tilføjer funktioner, bør du oprette dedikerede mapper, så relateret kode holdes samlet.

src/
  main.jsx
  App.jsx
  index.css

Funktionsbaseret struktur

Gruppér filer efter funktion i stedet for efter type. Hver funktionsmappe indeholder sin komponent, sine typografiske definitioner, tests og hjælpefunktioner. Det gør det nemt at tilføje eller slette en hel funktion på én gang.

src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Navngivning af komponentfiler

Navngiv komponentfiler med **PascalCase**, der matcher komponentens navn: `UserCard.jsx`, `NavigationBar.jsx`. Én komponent pr. fil er standarden. Når du bruger `.jsx` (eller `.tsx`), fortæller du editorer, at filen indeholder JSX.

Navngivning af filer uden komponenter

Hooks, hjælpeværktøjer og konstanter bruger **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Testfiler afspejler deres kildefil med `.test` eller `.spec`: `useAuth.test.js`.

Indeksfiler til ryddelige importer

Hvis du tilføjer en `index.js` til en mappe, kan du importere fra mappestien i stedet for den fulde filsti. Begræns indeksfiler til geneksporter – de må ikke indeholde logik.

// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Absolutte importer med sti-aliaser

Konfigurér et `@/`-alias, der peger på `src/`, i `vite.config.js` og `tsconfig.json`. Det undgår skrøbelige relative stier som `../../../../components/Button`.

// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Delte komponenter kontra funktionskomponenter

Placér komponenter, der kun bruges i én funktion, i den pågældende funktionsmappe. Flyt først en komponent til `src/components/`, når mindst to funktioner har brug for den. Undgå at udtrække komponenter for tidligt.

Filer med konstanter og konfiguration

Gem magiske strenge, API-basis-URL'er og indpakninger omkring miljøvariabler i `src/lib/constants.js` eller `src/config.js`. Spred aldrig strenge som `process.env.VITE_API_URL` ud over mange filer.

// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Typer og grænseflader (TypeScript)

I TypeScript-projekter bør du placere typer sammen med den funktion eller komponent, der bruger dem. For delte typer, der bruges på tværs af mange funktioner, kan du oprette `src/types/` med én fil pr. domæneområde.

Hurtigt tjek

Hvad er den største fordel ved en funktionsbaseret mappestruktur sammenlignet med en typebaseret struktur?

Besvar den i den interaktive lektion

Opsummering

Brug funktionsbaserede mapper, PascalCase til komponentfiler, camelCase til hooks og hjælpeværktøjer, geneksporter fra index.js til ryddelige importer samt et sti-alias som @/ for at fjerne lange relative stier.

Kurset er gennemført

Tillykke! Du har gennemført **React Strict Mode & Best Practices**. Du forstår nu StrictMode-adfærd, hvordan du skriver rene renderingsfunktioner, bruger nøgler og refs korrekt samt opbygger en skalerbar mappestruktur.

Gratis at komme i gang

Lær React 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: 88
Lektioner: 324

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Mappestruktur og navngivningskonventioner” gratis?

Ja — hele teksten til “Mappestruktur og navngivningskonventioner” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Mappestruktur og navngivningskonventioner”?

Organisér et React-projekt med feature-baserede mapper og tydelige filnavne. Du øver dig i React Academy 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å React Academy?

Der kræves ingen tidligere erfaring. React Academy 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 4 af 4.

Hvor lang tid tager lektionen “Mappestruktur og navngivningskonventioner”?

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 React Academy-lektion?

Ja. Alle React Academy-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

Hvad StrictMode gør
Pure Components og undgåelse af sideeffekter i render
Bedste praksis for keys og refs
Mappestruktur og navngivningskonventioner

← Tilbage til React Academy