Meydan okuma: Tema sağlayıcı
- React kursu
- Orta seviye
- Ders 78/80
- 6 dk
Context + useReducer ile koyu/açık tema sağlayıcı yazarsın.
Meydan okuma: Tema sağlayıcı
Bu meydan okumada bir tema context'i ve ThemeProvider bileşeni yazacaksın. theme state'i "light" veya "dark" tutar; toggleTheme onları değiştirir.
Context değer olarak { theme, toggleTheme } verir. Tüketen bileşenler useContext ile okur.
Bu yapı, karanlık/aydınlık tema geçişi için standart bir kalıptır.
Uygulama ThemeProvider yaz
ThemeContext oluştur (createContext). ThemeProvider bileşeni yaz: useState("light") ile theme tut, toggleTheme fonksiyonu tanımla (light ise dark, dark ise light). ThemeContext.Provider ile value={{ theme, toggleTheme }} ver ve children bas. export ile ThemeProvider ve ThemeContext'i dışa aktar.
Başlangıç kodu
import { createContext, useState } from "react";
// ThemeContext ve ThemeProvider'ı buraya yazÖrnek çözüm
import { createContext, useState } from "react";
export const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState("light");
const toggleTheme = () => setTheme(theme === "light" ? "dark" : "light");
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Context'in değer olarak vermesi gereken?
- Yalnızca tema rengi
- Yalnızca toggleTheme
- Tema ve toggleTheme fonksiyonu Doğru cevap
- Tüm CSS stilleri
Açıklama: { theme, toggleTheme } hem durumu hem değiştirici verir.
2 toggleTheme
function toggleTheme() {
setTheme(theme === "light" ? "dark" : ____);
}function toggleTheme() {
setTheme(theme === "light" ? "dark" : "light");
}Açıklama: Dark ise light, light ise dark yap.