---
title: İlk Component'inizi Oluşturma
description: Basit bir Title component'i yazıp theme editöründe tanımlayarak prop değerlerini kullanmayı öğrenin.
---
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.
[İlk temanızı oluşturma](https://builders.ikas.com/docs/headless-theme/getting-started/introduction#creating-your-first-theme) ve [Theme editörünü açma](https://builders.ikas.com/docs/headless-theme/getting-started/editor#opening-the-theme-editor) adımlarını tamamladıysanız ilk component'inizi oluşturmaya hazırsınız.
## Component dosyalarını oluşturma
Öğrenme amacıyla, prop olarak bir `string` alan ve bunu sayfanın ortasında gösteren çok basit bir `Title` component'i oluşturalım.
`index.tsx` dosyasının kodu:
```tsx title="src/components/title/index.tsx"
import { observer } from 'mobx-react-lite';
import styles from './style.module.css';
const Title = () => {
return ;
};
export default observer(Title);
```
Burada özel bir şey yok, yalnızca boş bir `div` render ediyoruz. Ancak `observer`'ı nasıl import ettiğimize ve component'i `observer` ile sarmalayarak default export olarak dışa aktardığımıza dikkat edin. Bir ikas teması geliştirmek için MobX hakkında bilmeniz gereken tek şey budur: `observer`'ı import etmeli ve yazdığınız her component'i `observer` ile sarmalanmış bir default export olarak dışa aktarmalısınız. Component'lerinizi bu şekilde dışa aktarmazsanız editöre ekleyemezsiniz.
Örneği sade tutmak için düz CSS yazacağız; stil yazma yöntemini daha sonra dilediğiniz gibi seçebilirsiniz.
## Component tanımlama
Bu component'i herhangi bir sayfaya section olarak ekleyebilmek için önce [theme editöründe](https://builders.ikas.com/docs/headless-theme/getting-started/editor) tanımlamamız gerekir.
Editörde `Component` yerine `Section` kelimesini kullanıyoruz, çünkü son kullanıcı için daha az teknik bir ifade. Yine de geliştiriciye özel ekranlarda `Component` kelimesini görmeye devam edeceksiniz.
- Editörünüzü açın: `https://your-store.myikas.com/admin/storefront/partner/theme/edit`
## Prop değerlerini kullanma
Şu ana kadar yalnızca component'imizin satıcıdan ne tür bir veri beklediğini tanımladık. Ancak component'imizi ne editörde ne de `http://localhost:3333` adresinde görebiliyoruz, çünkü hâlâ boş bir `div` render ediyoruz. Şimdi component'imizi, editörden gelen `title` değerini gösterecek şekilde değiştirelim. Aşağıdaki kodları ilgili dosyalara kopyalayın.
```tsx title="src/components/title/index.tsx"
import { observer } from 'mobx-react-lite';
import styles from './style.module.css';
import { TitleProps } from '../__generated__/types';
const Title: React.FC = (props) => {
const { title } = props;
return {title}
;
};
export default observer(Title);
```
```css title="src/components/title/style.module.css"
.title {
padding: 36px 0;
font-size: 48px;
font-weight: 500;
text-align: center;
}
```
Component'imizin prop tiplerini artık TypeScript ile açıkça tanımlıyoruz. Bunu otomatik oluşturulan `types` dosyası sayesinde yapıyoruz. Bu dosya, tüm component'lerinizin prop tiplerini ve tüm custom data tanımlarınızı dışa aktarır. Mevcut component'imiz için bu dosyadan dışa aktarılan `TitleProps` tipini kullanıyoruz.
```tsx title="src/components/__generated__/types.ts"
...
export type TitleProps = {
title: string;
};
...
```
Bu adımları tamamladıktan sonra dosyalarınızı kaydedip editöre dönün. Sayfanın en altına indiğinizde component'inizin, girdiğiniz başlıkla birlikte render edildiğini görürsünüz.
Hepsi bu kadar, ilk component'inizi oluşturdunuz. Tıpkı gerçek bir satıcı gibi aynı component'ten sayfaya birden fazla ekleyebilir, sıralarını değiştirebilir ve başlık değerlerini düzenleyebilirsiniz.