Vai al contenuto principale
Header
In questa guida, esplorerai i dettagli della struttura delle directory del progetto e come contribuisce all’organizzazione e alla manutenibilità di Twenty. By following this folder architecture convention, it’s easier to find the files related to specific features and ensure that the application is scalable and maintainable. 
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...

​
Pagine

Include i componenti di alto livello definiti dalle rotte dell’applicazione. Importano componenti di livello inferiore dalla cartella moduli (vedi dettagli sotto).

​
Moduli

Ogni modulo rappresenta una funzionalità o un gruppo di funzionalità, comprendente i suoi componenti specifici, stati e logica operativa. Dovrebbero tutti seguire la struttura sottostante. Puoi nidificare moduli all’interno di moduli (indicati come sottomoduli) e le stesse regole si applicano. 
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils

​
Contesti

Un contesto è un modo per passare dati attraverso l’albero dei componenti senza dover trasmettere i props manualmente a ogni livello. Vedi React Context per ulteriori dettagli.

​
GraphQL

Include frammenti, query e mutazioni. Vedi GraphQL per ulteriori dettagli.
  • Frammenti
Un frammento è un pezzo riutilizzabile di una query, che puoi usare in posti diversi. Usando i frammenti, è più facile evitare la duplicazione di codice. Vedi GraphQL Fragments per ulteriori dettagli.
  • Query
Vedi GraphQL Queries per ulteriori dettagli.
  • Mutazioni
Vedi GraphQL Mutations per ulteriori dettagli.

​
Hook

Vedi Hooks per ulteriori dettagli.

​
Stati

Contiene la logica di gestione degli stati. RecoilJS se ne occupa. La gestione degli stati integrata di React si occupa ancora dello stato all’interno di un componente.

​
Utilità

Dovrebbe contenere solo funzioni pure riutilizzabili. Otherwise, create custom hooks in the hooks folder.

​
UI

Contiene tutti i componenti UI riutilizzabili usati nell’applicazione. Questa cartella può contenere sottocartelle, come data, display, feedback e input per tipi specifici di componenti. Ogni componente dovrebbe essere autonomo e riutilizzabile, così da poterlo utilizzare in diverse parti dell’applicazione. Separando i componenti UI dagli altri componenti nella cartella moduli, è più facile mantenere un design coerente e apportare modifiche alla UI senza influenzare altre parti (logica di business) del codice.

​
Interfaccia e dipendenze

Puoi importare codice di altri moduli da qualsiasi modulo eccetto dalla cartella ui. Questo manterrà il suo codice facile da testare.

​
Interni

Ogni parte (hook, stati, …) di un modulo può avere una cartella interni, che contiene le parti che vengono utilizzate solo all’interno del modulo.