---
title: Ordnerarchitektur
info: Ein detaillierter Einblick in unsere Ordnerarchitektur
image: /images/user-guide/fields/field.png
---

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

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](https://react.dev/reference/react#context-hooks).

### GraphQL

Enthält Fragmente, Abfragen und Mutationen.

Weitere Details finden Sie unter [GraphQL](https://graphql.org/learn/).

- 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](https://graphql.org/learn/queries/#fragments).

- Abfragen

Weitere Details finden Sie unter [GraphQL Abfragen](https://graphql.org/learn/queries/).

- Mutationen

Weitere Details finden Sie unter [GraphQL Mutationen](https://graphql.org/learn/queries/#mutations).

### Hooks

Weitere Details finden Sie unter [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks).

### Zustände

Contains the state management logic. [RecoilJS](https://recoiljs.org) übernimmt dies.

- Selektoren: Weitere Einzelheiten finden Sie unter [RecoilJS Selektoren](https://recoiljs.org/docs/basic-tutorial/selectors).

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.
