Atomic Design Pattern Klasör Yapısı

Atomic Design Pattern, bileşen tabanlı bir mimaridir ve bileşenleri küçükten büyüğe beş kategoriye ayırır: Atomlar, Moleküller, Organizmalar, Şablonlar ve Sayfalar. Bu yapı, yeniden kullanılabilir bileşenlerin oluşturulmasını ve yönetilmesini kolaylaştırır.

Atomic Design Pattern’a dayalı bir proje klasör yapısının nasıl olabileceğine basit bir örnek ;

src/
│
├── components/
│   ├── atoms/
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   ├── Input/
│   │   │   ├── Input.jsx
│   │   └── ... (diğer atomik bileşenler)
│   │
│   ├── molecules/
│   │   ├── Form/
│   │   │   ├── Form.jsx
│   │   ├── Navbar/
│   │   │   ├── Navbar.jsx
│   │   └── ... (diğer moleküler bileşenler)
│   │
│   ├── organisms/
│   │   ├── Header/
│   │   │   ├── Header.jsx
│   │   ├── Footer/
│   │   │   ├── Footer.jsx
│   │   └── ... (diğer organizma bileşenler)
│   │
│   ├── templates/
│   │   ├── MainTemplate/
│   │   │   ├── MainTemplate.jsx
│   │   └── ... (diğer şablon bileşenler)
│   │
│   └── pages/
│       ├── HomePage/
│       │   ├── HomePage.jsx
│       └── ... (diğer sayfa bileşenler)
│
├── hooks/
│   ├── useAuth.js
│   ├── useFetch.js
│   └── ... (diğer custom hooklar)
│
├── contexts/
│   ├── AuthContext.js
│   └── ... (diğer context dosyaları)
│
├── store/
│   ├── store.js
│   └── ... (diğer state management dosyaları)
│
├── utils/
│   ├── helpers.js
│   └── ... (diğer yardımcı fonksiyonlar)
│
├── styles/
│   ├── themes.js
│   └── ... (diğer stil dosyaları)
│
├── assets/
│   ├── images/
│   ├── fonts/
│   └── ... (diğer asset dosyaları)
│
└── App.js

Atomic Design Pattern’ın Bileşenleri

• Atomlar: En küçük ve temel bileşenlerdir. Tek bir buton, giriş alanı veya ikon gibi. Her atom, tek bir fonksiyonelliğe sahiptir ve tek başına anlamlı olabilir.

Örnek: Button, Input, Label

• Moleküller: İki veya daha fazla atomun birleşmesiyle oluşan bileşenlerdir. Genellikle belirli bir işlevi yerine getiren küçük UI parçalarıdır.

Örnek: Form, Navbar

• Organizmalar: Moleküllerin ve atomların birleşmesiyle oluşan daha büyük bileşenlerdir. Daha kompleks yapıları temsil ederler.

Örnek: Header, Footer

• Şablonlar (Templates): Sayfa düzenlerini oluşturmak için kullanılan bileşenlerdir. Organizmaların, moleküllerin ve atomların düzenli bir yapıda bir araya gelmesiyle oluşur.

Örnek: MainTemplate, AuthTemplate

• Sayfalar (Pages): Kullanıcıya gösterilen son arayüzlerdir. Şablonları ve organizmaları kullanarak sayfa içeriğini oluştururlar.

Örnek: HomePage, LoginPage

Ekstra Klasörler

• hooks: Custom hook’larınızı bu klasörde saklayabilirsiniz.
• contexts: React context API ile oluşturduğunuz context dosyalarını bu klasörde saklayabilirsiniz.
• store: State management için kullandığınız dosyalar burada yer alır.
• utils: Yardımcı fonksiyonlar ve araçlar için bir klasör.
• styles: Stil dosyaları, temalar ve stil yönetimi için klasör.
• assets: Görseller, fontlar ve diğer statik varlıklar.

Atomic Design Pattern, bileşenlerin modüler ve yeniden kullanılabilir olmasını sağlar. Bu yapı, büyük ve kompleks projelerde bileşenlerin yönetimini kolaylaştırır ve kodun daha sürdürülebilir olmasına katkıda bulunur.

Okuduğunuz için teşekkürler

• 👏 Beğendiyseniz alkışlayın ve beni takip edin 👉
• 📰 Daha fazla içerik görüntülemek için tıklayın
• 🔔 Beni takip edin: LinkedIn!

Her zaman gelişmek için yer olduğunu anlıyorum. Lütfen düşüncelerinizi paylaşmaktan çekinmeyin.