Salt la conținutul principal
Header
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 pentru mai multe detalii.

​
GraphQL

Include fragmente, interogări și mutații. Vezi GraphQL 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 pentru mai multe detalii.
  • Interogări
Vezi GraphQL Queries pentru mai multe detalii.
  • Mutații
Vezi GraphQL Mutations pentru mai multe detalii.

​
Cârlige

Vezi Hooks pentru mai multe detalii.

​
Stări

Conține logica de gestionare a stării. RecoilJS gestionează aceasta. 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.