---
title: Gidsargitektuur
info: "'n Gedetailleerde kykie na ons vouerargitektuur"
image: /images/user-guide/fields/field.png
---

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

In hierdie gids sal jy die besonderhede van die projekgidsstruktuur ondersoek en hoe dit bydra tot die organisasie en onderhoudbaarbaarheid van Twenty.

Deur hierdie vouerargitektuurkonvensie te volg, is dit makliker om die lêers wat verband hou met spesifieke funksies te vind en om te verseker dat die toepassing skaalbaar en onderhoudbaar is.

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

## Bladsye

Sluit die topvlakkomponente in wat deur die aansoekpaaie gedefinieer is. They import more low-level components from the modules folder (more details below).

## Modules

Elke module verteenwoordig 'n funksie of 'n groep funksies, wat sy spesifieke komponente, toestande en operasionele logika insluit.
Hulle moet almal die onderstaande struktuur volg. You can nest modules within modules (referred to as submodules) and the same rules will apply.

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

### Kontekste

'n Konteks is 'n manier om data deur die komponentboom te stuur sonder om props met die hand op elke vlak af te gee.

Sien [React Konteks](https://react.dev/reference/react#context-hooks) vir meer besonderhede.

### GraphQL

Sluit fragmente, navrae en mutasies in.

Sien [GraphQL](https://graphql.org/learn/) vir meer besonderhede.

- Fragmente

'n Fragment is 'n herbruikbare stuk van 'n navraag, wat jy op verskillende plekke kan gebruik. By using fragments, it's easier to avoid duplicating code.

Sien [GraphQL Fragmente](https://graphql.org/learn/queries/#fragments) vir meer besonderhede.

- Navrae

Sien [GraphQL Navrae](https://graphql.org/learn/queries/) vir meer besonderhede.

- Mutasies

Sien [GraphQL Mutasies](https://graphql.org/learn/queries/#mutations) vir meer besonderhede.

### Hooks

Sien [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) vir meer besonderhede.

### States

Bevat die staatbestuurslogika. [RecoilJS](https://recoiljs.org) hanteer dit.

- Selektore: Sien [RecoilJS Selektore](https://recoiljs.org/docs/basic-tutorial/selectors) vir meer besonderhede.

React se ingeboude staatbestuur hanteer steeds toestand binne 'n komponent.

### Gereedskap

Moet net herbruikbare suiwer funksies bevat. Otherwise, create custom hooks in the `hooks` folder.

## UI

Bevat al die herbruikbare UI-komponente wat in die toepassing gebruik word.

Hierdie vouer kan sub-vouers bevat, soos `data`, `display`, `feedback`, en `input` vir spesifieke tipes komponente. Each component should be self-contained and reusable, so that you can use it in different parts of the application.

Deur die UI-komponente van die ander komponente in die `modules` vouer te skei, word dit makliker om 'n konsekwente ontwerp te handhaaf en om veranderinge aan die UI te maak sonder om ander dele (sakelogika) van die kodebasis te beïnvloed.

## Koppelvlakke en afhanklikhede

Jy kan ander module kode van enige module invoer behalwe vir die `ui` vouer. Dit sal sy kode maklik toetsbaar hou.

### Intern

Elke deel (hooks, state, ...) van 'n module kan 'n `intern` vouer hê, wat dele bevat wat net binne die module gebruik word.