Ana içeriğe atla
Header
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 öğesine bakın.

​
GraphQL

Parçalar, sorgular ve mutasyonları içerir. Daha fazla bilgi için GraphQL 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ı sayfasına bakın.
  • Sorgular
Daha fazla bilgi için GraphQL Sorgular sayfasına bakın.
  • Mutasyonlar
Daha fazla bilgi için GraphQL Mutasyonlar sayfasına bakın.

​
Kancalar

Daha fazla bilgi için Kancalar sayfasına bakın.

​
Durumlar

Durum yönetim mantığını içerir. RecoilJS bunu ele almaktadır. 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.