---
title: Arhitectura Folderului
info: O privire detaliată asupra arhitecturii folderului nostru
image: /images/user-guide/fields/field.png
---

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

In this guide, you will explore the details of the project directory structure and how it contributes to the organization and maintainability of Twenty.

Respectând convenția de arhitectură a folderului, este mai ușor să găsești fișierele legate de funcțiile specifice și să te asiguri că aplicația este scalabilă și întreținută.

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

## Pagini

Include componentele de nivel superior definite de rutele aplicației. Importă componente de nivel mai scăzut din folderul de module (mai multe detalii mai jos).

## Module

Fiecare modul reprezintă o funcție sau un grup de funcții, cuprinzând componentele, stările și logica operațională specifice.
Toate ar trebui să urmeze structura de mai jos. Poți introduce module în cadrul altor module (denumite submodule), iar aceleași reguli se vor aplica.

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

### Contexturi

Un context este o modalitate de a transmite date prin arborele de componente fără a fi necesar să transmiți manual proprietățile la fiecare nivel.

Vezi [React Context](https://react.dev/reference/react#context-hooks) pentru mai multe detalii.

### GraphQL

Include fragmente, interogări și mutații.

Vezi [GraphQL](https://graphql.org/learn/) pentru mai multe detalii.

- Fragmente

Un fragment este o bucată reutilizabilă dintr-o interogare, pe care o poți folosi în diferite locuri. Folosind fragmente este mai ușor să eviți duplicarea codului.

Vezi [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) pentru mai multe detalii.

- Interogări

Vezi [GraphQL Queries](https://graphql.org/learn/queries/) pentru mai multe detalii.

- Mutații

Vezi [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) pentru mai multe detalii.

### Cârlige

Vezi [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) pentru mai multe detalii.

### Stări

Conține logica de gestionare a stării. [RecoilJS](https://recoiljs.org) gestionează aceasta.

- Selectori: Vezi [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) pentru mai multe detalii.

Managementul de stare încorporat în React gestionează încă starea în cadrul unei componente.

### Unelte

Ar trebui să conțină doar funcții pure, reutilizabile. În caz contrar, creează cârlige personalizate în folderul `hooks`.

## UI

Conține toate componentele UI reutilizabile folosite în aplicație.

Acest folder poate conține subfoldere, precum `data`, `afișaj`, `feedback` și `intrare` pentru tipuri specifice de componente. Fiecare componentă ar trebui să fie autonomă și reutilizabilă, astfel încât să o poți folosi în diferite părți ale aplicației.

Prin separarea componentelor UI de celelalte componente din folderul `module`, este mai ușor de menținut un design consistent și de efectuat modificări la interfata grafică fără a afecta alte părți (logica de afaceri) ale codului.

## Interfață și dependențe

Poți importa codul altor module din orice modul, cu excepția folderului `ui`. Acest lucru va menține codul ușor de testat.

### Intern

Fiecare parte (cârlige, stări, ...) dintr-un modul poate avea un folder `intern`, care conține părți care sunt doar utilizate în cadrul modulului.
