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: Folder Architecture
|
|
info: A detailed look into our folder architecture
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
I denna guide kommer du utforska projektkatalogens struktur och hur den bidrar till organisationen och underhållbarheten av Twenty.
|
|
|
|
Genom att följa denna mappstrukturkonvention är det enklare att hitta filerna relaterade till specifika funktioner och säkerställa att applikationen är skalbar och lätt att underhålla.
|
|
|
|
```
|
|
front
|
|
└───modules
|
|
│ └───module1
|
|
│ │ └───submodule1
|
|
│ └───module2
|
|
│ └───ui
|
|
│ │ └───display
|
|
│ │ └───inputs
|
|
│ │ │ └───buttons
|
|
│ │ └───...
|
|
└───pages
|
|
└───...
|
|
```
|
|
|
|
## Pages
|
|
|
|
Includes the top-level components defined by the application routes. They import more low-level components from the modules folder (more details below).
|
|
|
|
## Moduler
|
|
|
|
Each module represents a feature or a group of feature, comprising its specific components, states, and operational logic.
|
|
De bör alla följa strukturen nedan. Du kan nästa moduler inom moduler (kallas undermoduler) och samma regler gäller.
|
|
|
|
```
|
|
module1
|
|
└───components
|
|
│ └───component1
|
|
│ └───component2
|
|
└───constants
|
|
└───contexts
|
|
└───graphql
|
|
│ └───fragments
|
|
│ └───queries
|
|
│ └───mutations
|
|
└───hooks
|
|
│ └───internal
|
|
└───states
|
|
│ └───selectors
|
|
└───types
|
|
└───utils
|
|
```
|
|
|
|
### Sammanhang
|
|
|
|
A context is a way to pass data through the component tree without having to pass props down manually at every level.
|
|
|
|
Se [React Context](https://react.dev/reference/react#context-hooks) för mer detaljer.
|
|
|
|
### GraphQL
|
|
|
|
Inkluderar fragment, frågor och mutationer.
|
|
|
|
Se [GraphQL](https://graphql.org/learn/) för mer detaljer.
|
|
|
|
- Fragment
|
|
|
|
Ett fragment är en återanvändbar del av en fråga, som du kan använda på olika ställen. Genom att använda fragment är det enklare att undvika att duplicera kod.
|
|
|
|
Se [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) för mer detaljer.
|
|
|
|
- Frågor
|
|
|
|
Se [GraphQL Queries](https://graphql.org/learn/queries/) för mer detaljer.
|
|
|
|
- Mutationer
|
|
|
|
Se [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) för mer detaljer.
|
|
|
|
### Hooks
|
|
|
|
Se [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) för mer detaljer.
|
|
|
|
### States
|
|
|
|
Innehåller tillståndshanteringslogik. [RecoilJS](https://recoiljs.org) hanterar detta.
|
|
|
|
- Selektorer: Se [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) för mer detaljer.
|
|
|
|
Reacts inbyggda tillståndshantering hanterar fortfarande tillstånd inom en komponent.
|
|
|
|
### Verktyg
|
|
|
|
Bör bara innehålla återanvändbara rena funktioner. Otherwise, create custom hooks in the `hooks` folder.
|
|
|
|
## UI
|
|
|
|
Innehåller alla återanvändbara UI-komponenter som används i applikationen.
|
|
|
|
Denna mapp kan innehålla undermappar, som `data`, `display`, `feedback`, och `input` för specifika typer av komponenter. Varje komponent bör vara självständig och återanvändbar, så att du kan använda den i olika delar av applikationen.
|
|
|
|
Genom att separera UI-komponenterna från de andra komponenterna i mappen `modules`, är det lättare att bibehålla en konsekvent design och att göra ändringar i UI utan att påverka andra delar (affärslogik) i kodbasen.
|
|
|
|
## Gränssnitt och beroenden
|
|
|
|
Du kan importera annan modul kod från vilken modul som helst utom för mappen `ui`. Detta kommer att hålla dess kod lätt att testa.
|
|
|
|
### Intern
|
|
|
|
Each part (hooks, states, ...) av en modul kan ha en `intern` mapp, som innehåller delar som bara används inom modulen.
|