8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
4.1 KiB
Plaintext
115 lines
4.1 KiB
Plaintext
---
|
||
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.
|