---
title: Klasör Mimarisi
info: Klasör mimarimize detaylı bir bakış
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.

Bu klasör mimarisi konvansiyonunu takip ederek, belirli özelliklerle ilgili dosyaları bulmak daha kolay hale gelir ve uygulamanın ölçeklenebilir ve sürdürülebilir olması sağlanır.

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

## Sayfalar

Uygulama rotaları tarafından tanımlanan üst düzey bileşenleri içerir. They import more low-level components from the modules folder (more details below).

## Modüller

Her bir modül, belirli bileşenlerini, durumlarını ve operasyonel mantığını içeren bir özellik veya özellik grubu temsil eder.
Hepsi aşağıdaki yapıyı takip etmelidir. Modüller içinde modüller (alt modül olarak adlandırılan) yerleştirebilirsiniz ve aynı kurallar uygulanacaktır.

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

### Bağlamlar

Bir bağlam, bileşen ağacı boyunca verileri, her seviyede elle geçmek zorunda kalmadan geçmenin bir yoludur.

Daha fazla detay için [React Context](https://react.dev/reference/react#context-hooks) öğesine bakın.

### GraphQL

Parçalar, sorgular ve mutasyonları içerir.

Daha fazla bilgi için [GraphQL](https://graphql.org/learn/) sayfasına bakın.

- Parçalar

Bir parça, farklı yerlerde kullanabileceğiniz, bir sorgunun yeniden kullanılabilir bir parçasıdır. Parçaları kullanarak, kodun kopyalanmasını önlemek daha kolaydır.

Daha fazla bilgi için [GraphQL Parçaları](https://graphql.org/learn/queries/#fragments) sayfasına bakın.

- Sorgular

Daha fazla bilgi için [GraphQL Sorgular](https://graphql.org/learn/queries/) sayfasına bakın.

- Mutasyonlar

Daha fazla bilgi için [GraphQL Mutasyonlar](https://graphql.org/learn/queries/#mutations) sayfasına bakın.

### Kancalar

Daha fazla bilgi için [Kancalar](https://react.dev/learn/reusing-logic-with-custom-hooks) sayfasına bakın.

### Durumlar

Durum yönetim mantığını içerir. [RecoilJS](https://recoiljs.org) bunu ele almaktadır.

- Seçiciler: Daha fazla bilgi için [RecoilJS Seçiciler](https://recoiljs.org/docs/basic-tutorial/selectors) sayfasına bakın.

React'ın yerleşik durum yönetimi, bir bileşen içinde hala durumu ele alır.

### Yardımcılar

Sadece yeniden kullanılabilir saf fonksiyonları içermelidir. Aksi takdirde, `kancalar` klasöründe özel kancalar oluşturun.

## Kullanıcı Arayüzü

Uygulamada kullanılan tüm tekrar kullanılabilir UI bileşenlerini içerir.

Bu klasör, `veri`, `görüntü`, `geri bildirim` ve `girdi` gibi bileşen türleri için alt klasörler içerebilir. Her bir bileşen, kendi içinde bağımsız ve yeniden kullanılabilir olmalı, böylece uygulamanın farklı kısımlarında kullanılabilir.

UI bileşenlerini diğer bileşenlerden `modüller` klasöründe ayırarak, tutarlı bir tasarım sağlamak ve kullanıcı arayüzündeki değişiklikleri yapmak, kod tabanının diğer bölümlerini (iş mantığı) etkilemeden daha kolay hale gelir.

## Arayüz ve bağımlılıklar

Diğer modül kodlarını, `ui` klasörü hariç, herhangi bir modülden ithal edebilirsiniz. Bu, kodunun test edilmesini kolaylaştıracaktır.

### Dahili

Her bir parça (kancalar, durumlar, ...) bir modül, yalnızca modül içinde kullanılan kısımları içeren bir `dahili` klasöre sahip olabilir.