---
title: Giriş
description: Örnek tema üzerinden eksiksiz bir headless temanın component'lerini ve en önemli özelliklerini inceleyin.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Bu bölümde eksiksiz bir temanın component'lerini adım adım inceleyecek, bu sırada en önemli özellikleri de öğreneceğiz. Her konuda yalnızca ilgili kodu gösteriyor, dosyanın tamamına ihtiyaç duyduğunuzda göz atabilmeniz için kaynak koda bağlantı veriyoruz. Temanın tüm kaynak kodu [burada](https://github.com/ikascom/ikas-examples/tree/main/ikas-theme).

<Callout type="warn" title="Ön koşul">
Bu bölüm, [Başlarken](https://builders.ikas.com/docs/headless-theme/getting-started/introduction) bölümünü okuduğunuzu varsayar. Bu nedenle tema editöründe component ve prop oluşturma adımları burada tekrar anlatılmaz.
</Callout>

## Kod stili [#code-style]

Örnek temamızda düz CSS yerine [Styled Components](https://styled-components.com/) kullanıyoruz. Bu kütüphane sayesinde render metotlarını olabildiğince sade ve okunabilir tutuyor, component'in gerçekte neyi render ettiğini daha net ifade ediyoruz.

Aşağıdaki örnekte yalnızca component adlarını okuyarak header'ın nasıl bir yerleşime sahip olduğunu kolayca hayal edebilirsiniz.

```tsx
<S.Header>
  <Container>
    <S.InnerContainer>
      <LeftSide {...props} />
      <Center {...props} />
      <RightSide {...props} />
    </S.InnerContainer>
  </Container>
</S.Header>
```

Aynı render metodunu class adları verilmiş düz HTML elementleriyle yazsaydık sonuç aşağıdaki gibi olurdu. Özellikle iç içe ikiden fazla `div` ve her `div` için birden fazla class olduğunda bu yapıyı okumak çok daha zorlaşır.

```jsx
<div classname="header">
  <Container>
    <div classname="inner-container">
      <LeftSide {...props} />
      <Center {...props} />
      <RightSide {...props} />
    </div>
  </Container>
</div>
```

Kendi temalarınızda bu kütüphaneyi kullanmak zorunda değilsiniz. Biz yalnızca örnek kodları mümkün olduğunca okunabilir kılmak için tercih ettik.