CodeBlanks Logo Icon CodeBlanks
Giriş Yap Kayıt Ol

Tema kullanımı

ThemeProvider ile tema değerlerini tüm bileşenlere aktarmayı öğrenirsin.

Tema kullanımı

Tema, renk ve boyutları tek bir nesnede toplayıp uygulamaya sunar. ThemeProvider ile sararsın; alt bileşenler props.theme üzerinden değerleri okur.

Örnek: tema {primary: "blue"}; şablonda color: ${props => props.theme.primary}. Tema değişince her yer güncellenir.

Karanlık/aydınlık mod bu yapıyla kolayca yapılır. Tema nesnesini değiştirip ThemeProvider'a vermen yeter; tüm alt bileşenler yeni renkleri hemen alır. Bu, tutarlı bir tasarım dilini bütün uygulamada korur.

ThemeProvider

ThemeProvider'ı uygulamanın en üstüne sararsın: <ThemeProvider theme={myTheme}><App /></ThemeProvider>. İçerideki tüm stilli bileşenler temayı görür.

Tema nesnesini ayrı bir dosyada tutmak temizliktir; renkleri tek yerden değiştirirsin.

Bu yapı, tutarlı tasarım sistemlerinin temelidir. Bir renk ya da boyutu değiştirmek için yalnızca tema nesnesine dokunman yeter; tüm bileşenler anında güncellenir.

Uygulama Temalı düğme

Aşağıdaki iskeleti tamamla. ThemedButton adında stilli bileşen oluştur; styled.button\`color: ${props => props.theme.primary};\` ile tanımla. Dışa aktar.

Başlangıç kodu

App.jsx
// ThemedButton bileşenini buraya tanımla

Örnek çözüm

App.jsx
const ThemedButton = styled.button`color: ${props => props.theme.primary};`;

export default ThemedButton;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 Tema değerine şablonda nasıl erişilir?

App.jsx
ThemeProvider provides props.theme.
  • props.theme.x Doğru cevap
  • this.theme
  • theme.x
  • window.theme

Açıklama: props.theme üzerinden okunur.

2 Tema kullanımı: eksik parçayı tamamla

Soru 
color: ${props => props.theme.____};
Cevap 
color: ${props => props.theme.primary};

Açıklama: theme.primary ile ana rengi aldın.

3 Tema kullanımı: kavramları eşleştir

Kavram Anlamı
ThemeProvider Tema sağlayıcı
props.theme Tema erişimi
theme={x} Tema geçme
{primary: "blue"} Tema nesnesi

Başlangıç bölümündeki tüm dersler

1 React girişi

  1. React nedir?
  2. Kurulum ve Vite
  3. İlk bileşen
  4. Özet - React girişi

2 JSX temelleri

  1. JSX nedir?
  2. İfadeler ve süslü parantez
  3. Öznitelikler ve className
  4. Özet - JSX temelleri

3 Bileşenler

  1. Bileşen mantığı
  2. Bileşen ağacı
  3. İsimlendirme kuralları
  4. Özet - Bileşenler

4 Profil kartı

  1. Proje: Profil kartı
  2. Avatar bileşeni
  3. Bilgi listesi
  4. Kartı birleştir

5 Props

  1. Props nedir?
  2. Props okuma
  3. Children prop
  4. Varsayılan props
  5. Özet - Props

6 Koşullu render

  1. Koşullu render nedir?
  2. Ternary operatör
  3. Mantıksal AND (&&)
  4. Erken return
  5. Özet - Koşullu render

7 Liste render

  1. Liste render nedir?
  2. key özniteliği
  3. Diziden bileşen
  4. Filtreleme ve sıralama
  5. Özet - Liste render

8 Alışveriş listesi

  1. Proje: Alışveriş listesi
  2. Öğe bileşeni
  3. Liste gövdesi
  4. Boş durum

9 Olaylar

  1. Olaylar (events)
  2. Olay nesnesi
  3. Form olayları
  4. Özet - Olaylar

10 useState

  1. State nedir?
  2. useState çağrısı
  3. State güncelleme
  4. Birden fazla state
  5. Özet - useState

11 Sayaç uygulaması

  1. Proje: Sayaç uygulaması
  2. Sayı ve buton
  3. Azaltma ve sıfırlama
  4. Sınır kontrolü

12 Formlar

  1. Kontrollü input
  2. Form gönderimi
  3. Birden çok alan
  4. Özet - Formlar

13 Stil

  1. CSS ile stil
  2. CSS Modules
  3. Inline stiller
  4. Özet - Stil

14 styled-components

  1. styled-components nedir?
  2. Props ile stil
  3. Tema kullanımı
  4. Özet - styled-components

15 useReducer

  1. useReducer nedir?
  2. Aksiyon ve state
  3. useState vs useReducer
  4. Özet - useReducer

16 useEffect

  1. useEffect nedir?
  2. Bağımlılık dizisi
  3. Temizlik fonksiyonu
  4. Özet - useEffect

17 Context

  1. Context nedir?
  2. createContext
  3. Provider ve useContext
  4. Özet - Context

18 useRef

  1. useRef nedir?
  2. DOM erişimi
  3. Zamanlayıcı örneği
  4. Özet - useRef

19 Todo uygulaması

  1. Proje: Todo uygulaması
  2. Todo giriş formu
  3. Todo listesi
  4. Filtre ve özet

20 Başlangıç finali

  1. Meydan okuma: Hava durumu kartı
  2. Meydan okuma: Sepet özeti
  3. Meydan okuma: Sayaç ve sıfırlama
  4. Meydan okuma: Açılır menü