Tasarım sistemi çekirdeği
- React kursu
- Uzman seviye
- Ders 26/32
- 5 dk
Tema ve temel bileşenleri içeren bir tasarım sistemi çekirdeği yazarsın.
Tasarım sistemi çekirdeği
İkinci adımda bir ThemeProvider yazacaksın. Bu sağlayıcı, tüm uygulamaya tema bilgisi taşır ve createContext ile paylaşılır.
Başlangıç kodu, önceki dersin Button çözümünü içerir; böylece projeyi tek dosyada büyütürsün. ThemeProvider, useState('light') ile tema tutar.
Alt bileşenler useContext ile temayı okur ve değiştirebilir.
Provider ve değer
ThemeProvider, ThemeContext.Provider döndürür. value özelliğine { theme, setTheme } verilir; böylece alt bileşenler hem okur hem değiştirir.
Bu desen, prop'ları katmanlar boyunca elden ele geçirmeden state paylaşmaya olanak tanır. Tasarım sisteminde tema, dil veya sepet durumu için kullanılır.
Provider yeniden çizilse bile değer referansı sabit kalmalıdır.
Uygulama ThemeProvider bileşenini yaz
ThemeProvider yaz. createContext ve useState içe aktar. ThemeContext = createContext(). function ThemeProvider({ children }). useState('light') ile theme ve setTheme. <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider> döndür. Dışa aktar.
Başlangıç kodu
// Button.jsx
function Button({ variant, children }) {
const className = variant === 'primary' ? 'btn-primary' : 'btn-secondary';
return <button className={className}>{children}</button>;
}
export default Button;
// ThemeProvider.jsx
// ThemeProvider bileşenini buraya yazÖrnek çözüm
import { createContext, useState } from 'react';
const ThemeContext = createContext();
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
}
export default ThemeProvider;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: context oluştur
import { createContext, useState } from 'react';
const ThemeContext = ____();import { createContext, useState } from 'react';
const ThemeContext = createContext();Açıklama: createContext ile context oluşur.
2 ThemeProvider ne döndürür?
- useState
- useEffect
- ThemeContext.Provider Doğru cevap
- Button
Açıklama: ThemeProvider bir Provider bileşeni döndürür.
3 Provider kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
createContext |
Context oluşturur |
Provider |
Değeri paylaşır |
value |
Tema ve setter |
useContext |
Değeri okur |