8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
3.8 KiB
Plaintext
115 lines
3.8 KiB
Plaintext
---
|
|
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.
|