---
title: Mappestruktur
info: En detaljert gjennomgang av vår mappestruktur
image: /images/user-guide/fields/field.png
---

<Frame>
  <img src="/images/user-guide/fields/field.png" alt="Header" />
</Frame>

I denne veiledningen vil du utforske detaljene i prosjektets mappestruktur og hvordan det bidrar til organiseringen og vedlikeholdbarheten til Twenty.

Ved å følge denne konvensjonen for mappestruktur er det enklere å finne filene som er relatert til spesifikke funksjoner og sikre at applikasjonen er skalerbar og vedlikeholdbar.

```
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...
```

## Sider

Inkluderer toppnivåkomponentene definert av applikasjonsrutene. De importerer flere lavnivåkomponenter fra mappen modules (flere detaljer nedenfor).

## Moduler

Hver modul representerer en funksjon eller en gruppe funksjoner, og består av spesifikke komponenter, tilstander og operasjonslogikk.
De bør alle følge strukturen nedenfor. Du kan legge moduler inne i moduler (referert til som undermoduler), og de samme reglene gjelder.

```
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils
```

### Kontekster

En kontekst er en måte å sende data gjennom komponenttreet uten å måtte sende props manuelt ned på hvert nivå.

Se [React Context](https://react.dev/reference/react#context-hooks) for flere detaljer.

### GraphQL

Inkluderer fragmenter, spørringer og mutasjoner.

Se [GraphQL](https://graphql.org/learn/) for flere detaljer.

- Fragmenter

Et fragment er en gjenbrukbar del av en spørring, som du kan bruke på forskjellige steder. Ved å bruke fragmenter er det lettere å unngå duplisering av kode.

Se [GraphQL Fragmenter](https://graphql.org/learn/queries/#fragments) for flere detaljer.

- Spørringer

Se [GraphQL Spørringer](https://graphql.org/learn/queries/) for flere detaljer.

- Mutasjoner

Se [GraphQL Mutasjoner](https://graphql.org/learn/queries/#mutations) for flere detaljer.

### Hooks

Se [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) for flere detaljer.

### Tilstander

Inneholder logikken for tilstandsadministrasjon. [RecoilJS](https://recoiljs.org) håndterer dette.

- Velgere: Se [RecoilJS Velgere](https://recoiljs.org/docs/basic-tutorial/selectors) for flere detaljer.

React sitt innebygde tilstandshåndtering håndterer fortsatt tilstander innenfor en komponent.

### Verktøy

Bør bare inneholde gjenbrukbare, rene funksjoner. Ellers, lag tilpassede hooks i mappen `hooks`.

## UI

Inneholder alle gjenbrukbare UI-komponenter brukt i applikasjonen.

Denne mappen kan inneholde undermapper, som `data`, `visning`, `tilbakemelding`, og `input` for spesifikke typer komponenter. Hver komponent bør være selvstendig og gjenbrukbar, slik at du kan bruke den i forskjellige deler av applikasjonen.

Ved å skille UI-komponentene fra de andre komponentene i mappen `modules`, er det enklere å opprettholde et konsistent design og gjøre endringer i UI uten å påvirke andre deler (forretningslogikk) av kodebasen.

## Grensesnitt og avhengigheter

Du kan importere annen modul-kode fra enhver modul bortsett fra `ui`-mappen. Dette vil holde koden enkel å teste.

### Intern

Hver del (hooks, states, ...) av en modul kan ha en `internal`-mappe, som inneholder deler som kun brukes innen modulen.