React Academy · leksjon

Mappestruktur og navnekonvensjoner

Organiser et React-prosjekt med funksjonsbaserte mapper og tydelige filnavn.

Leksjon 4 av 413 trinn

Mappestruktur og navnekonvensjoner er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du utforske vanlige mappestrukturer for React-prosjekter, lære navnekonvensjoner for filer og komponenter og forstå hvordan du organiserer koden etter hvert som prosjektet vokser.

Standardstrukturen

Et minimalt Vite + React-prosjekt har `src/App.jsx` og `src/main.jsx`. Dette fungerer fint for små demoer, men skalerer ikke. Når De legger til funksjoner, bør De opprette egne mapper slik at relatert kode holdes samlet.

src/
  main.jsx
  App.jsx
  index.css

Funksjonsbasert struktur

Grupper filer etter funksjon i stedet for etter type. Hver funksjonsmappe inneholder komponenten, stilene, testene og hjelpefunksjonene sine. Da blir det enkelt å legge til eller slette en hel funksjon 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 av komponentfiler

Gi komponentfiler navn med **PascalCase** som samsvarer med komponentnavnet: `UserCard.jsx`, `NavigationBar.jsx`. Én komponent per fil er standarden. `.jsx` (eller `.tsx`) forteller redigeringsverktøy at filen inneholder JSX.

Navngivning av filer uten komponenter

Hooks, hjelpefunksjoner og konstanter bruker **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Testfiler speiler kildefilen og bruker `.test` eller `.spec`: `useAuth.test.js`.

Indeksfiler for ryddige importer

Hvis De legger til en `index.js` i en mappe, kan De importere fra mappestien i stedet for fra hele filstien. Begrens indeksfiler til re-eksporter – ingen logikk.

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

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

Absolutte importer med sti-aliaser

Konfigurer et `@/`-alias som peker til `src/` i `vite.config.js` og `tsconfig.json`. Da unngår De sårbare relative stier som `../../../../components/Button`.

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

Delte komponenter kontra funksjonskomponenter

Plasser komponenter som bare brukes i én funksjon, i mappen til denne funksjonen. Flytt en komponent til `src/components/` først når to eller flere funksjoner trenger den. Unngå å trekke ut komponenter for tidlig.

Filer for konstanter og konfigurasjon

Lagre magiske strenger, basisadresser for API-er og innpakninger rundt miljøvariabler i `src/lib/constants.js` eller `src/config.js`. Ikke spre strenger som `process.env.VITE_API_URL` rundt i mange filer.

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

Typer og grensesnitt (TypeScript)

I TypeScript-prosjekter bør De plassere typer sammen med funksjonen eller komponenten som bruker dem. For delte typer som brukes på tvers av mange funksjoner, oppretter De `src/types/` med én fil per domeneområde.

Hurtigsjekk

Hva er den største fordelen med en funksjonsbasert mappestruktur sammenlignet med en typebasert struktur?

Besvar den i den interaktive leksjonen

Oppsummering

Bruk funksjonsbaserte mapper, PascalCase for komponentfiler, camelCase for hooks og hjelpefunksjoner, re-eksporter fra index.js for ryddige importer, og et sti-alias som @/ for å eliminere lange relative stier.

Kurset er fullført

Gratulerer! De har fullført **React Strict Mode og beste praksis**. Nå forstår De hvordan StrictMode fungerer, hvordan De skriver rene renderingsfunksjoner, bruker nøkler og refs riktig, og organiserer en skalerbar mappestruktur.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Mappestruktur og navnekonvensjoner» gratis?

Ja – hele teksten i «Mappestruktur og navnekonvensjoner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Mappestruktur og navnekonvensjoner»?

Organiser et React-prosjekt med funksjonsbaserte mapper og tydelige filnavn. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Mappestruktur og navnekonvensjoner»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Hva StrictMode gjør
Rene komponenter og unngå bivirkninger under gjengivelse
Beste praksis for key og ref
Mappestruktur og navnekonvensjoner

← Tilbake til React Academy