Zum Hauptinhalt springen
Header
In diesem Leitfaden erkunden Sie die Details der Projektverzeichnisstruktur und wie sie zur Organisation und Wartbarkeit von Twenty beiträgt. Indem Sie diesem Ordnerarchitekturkonzept folgen, können Sie Dateien, die sich auf spezifische Funktionen beziehen, leichter finden und sicherstellen, dass die Anwendung skalierbar und wartbar ist. 
front
└───modules
│   └───module1
│   │   └───submodule1
│   └───module2
│   └───ui
│   │   └───display
│   │   └───inputs
│   │   │   └───buttons
│   │   └───...
└───pages
└───...

​
Seiten

Enthält die Top-Level-Komponenten, die durch die Anwendungsrouten definiert werden. They import more low-level components from the modules folder (more details below).

​
Module

Jedes Modul repräsentiert eine Funktion oder eine Gruppe von Funktionen und umfasst deren spezifische Komponenten, Zustände und Betriebslogik. Sie sollten alle der untenstehenden Struktur folgen. Sie können Module innerhalb von Modulen (als Submodule bezeichnet) verschachteln, und die gleichen Regeln gelten. 
module1
  └───components
  │   └───component1
  │   └───component2
  └───constants
  └───contexts
  └───graphql
  │   └───fragments
  │   └───queries
  │   └───mutations
  └───hooks
  │   └───internal
  └───states
  │   └───selectors
  └───types
  └───utils

​
Kontexte

A context is a way to pass data through the component tree without having to pass props down manually at every level. Weitere Details finden Sie unter React Context.

​
GraphQL

Enthält Fragmente, Abfragen und Mutationen. Weitere Details finden Sie unter GraphQL.
  • Fragmente
Ein Fragment ist ein wiederverwendbares Stück einer Abfrage, das an verschiedenen Stellen verwendet werden kann. By using fragments, it’s easier to avoid duplicating code. Weitere Details finden Sie unter GraphQL Fragmente.
  • Abfragen
Weitere Details finden Sie unter GraphQL Abfragen.
  • Mutationen
Weitere Details finden Sie unter GraphQL Mutationen.

​
Hooks

Weitere Details finden Sie unter Hooks.

​
Zustände

Contains the state management logic. RecoilJS übernimmt dies. React’s eingebautes Zustandsmanagement verarbeitet weiterhin den Zustand innerhalb einer Komponente.

​
Utils

Sollte nur wiederverwendbare reine Funktionen enthalten. Andernfalls erstellen Sie benutzerdefinierte Hooks im hooks-Ordner.

​
UI

Enthält alle wiederverwendbaren UI-Komponenten, die in der Anwendung verwendet werden. Dieser Ordner kann Unterordner wie daten, anzeige, feedback und eingabe für bestimmte Komponententypen enthalten. Jede Komponente sollte in sich geschlossen und wiederverwendbar sein, sodass Sie sie in verschiedenen Teilen der Anwendung verwenden können. Indem Sie die UI-Komponenten von den anderen Komponenten im module-Ordner trennen, ist es einfacher, ein konsistentes Design beizubehalten und Änderungen an der UI vorzunehmen, ohne andere Bereiche (Geschäftslogik) des Codebases zu beeinflussen.

​
Schnittstelle und Abhängigkeiten

Sie können Code anderer Module aus jedem Modul importieren, mit Ausnahme des ui-Ordners. This will keep its code easy to test.

​
Intern

Jeder Teil (Hooks, Zustände, …) eines Moduls kann einen intern-Ordner haben, der Teile enthält, die nur innerhalb des Moduls verwendet werden.