Önemli: Diğer yazılarımla direkt bağlantılı bir yazıdır. İlk olarak bu yazıdan okumaya başladıysanız, eğitim serisine kısaca bir göz atmanızı tavsiye ederim.
Merhabalar.
Bu yazımda context’lerimiz için bir klasör oluşturup context’lerimizi birer component mantığında oluşturup kullanmayı öğreneceğiz.
Bir önceki yazımda oluşturduğum projem üzerinden devam ediyorum. O projeye bakmak için aşağıdaki yazıma göz atabilirsiniz.
src içinde Context isminde bir klasör oluşturuyorum. Bunun içinde de ThemeContext isminde bir dosya oluşturdum.
Proje kodlarımızı aşağıdaki gibi güncelleyelim.
import React, { createContext, useState } from 'react';
export const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState('dark');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
Bu kod, bir React uygulamasında tema yönetimi için bir bağlam (context) oluşturuyor. Kodun içinde iki önemli bölüm var: ThemeContext
ve ThemeProvider
.
ThemeContext
: createContext
fonksiyonu kullanılarak bir bağlam nesnesi oluşturuluyor. Bu bağlam, tema ile ilgili bilgileri depolamak ve paylaşmak için kullanılacak.
ThemeProvider
: Bir bileşen fonksiyonu olarak tanımlanmış bir bileşen. Bu bileşen, ThemeContext.Provider
bileşeni içinde kullanılarak, bağlamdaki değeri tüm iç bileşenlere iletir. Bu sayede, uygulama genelinde temayla ilgili bilgileri paylaşabilir ve bu bilgileri güncelleyebilirsiniz.
useState
hook’u kullanılarak bir theme
state’i ve onu güncellemek için bir setTheme
fonksiyonu oluşturuluyor. Başlangıçta tema ‘dark’ olarak ayarlanmış.
ThemeContext.Provider
içinde, value
prop’u kullanılarak bağlamdaki değerler (theme
ve setTheme
) sağlanıyor. Böylece bu değerlere bağlı olan bileşenler, bu değerlere erişebilir ve tema ile ilgili işlemleri gerçekleştirebilir.
{children}
ifadesi, ThemeProvider
bileşenine içerideki diğer bileşenleri (çocukları) render etme yeteneği kazandırır. Yani, bu bağlamı sağlayan bileşeni kullanırken, içerisine yerleştirdiğiniz diğer bileşenler de bu temaya erişebilir.
Bu şekilde, ThemeProvider
bileşeni ile uygulamanızın herhangi bir yerinde, içerdiği bileşenler temayla ilgili bilgileri kullanabilir veya güncelleyebilir.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { ThemeProvider } from './Context/ThemeContext';
ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);
Context’imi artık kendi dosyasından yönettiğim için index.js’yi standart yapısına getirdim. App component’ini ThemeProvider ile sarmaladım.
import React, { Fragment, useContext } from 'react';
import './Theme.css';
import { ThemeContext } from '../../Context/ThemeContext';
const Theme = () => {
const { theme, setTheme } = useContext(ThemeContext);
const changeTheme = () => {
// Toggle between 'light' and 'dark' theme
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<Fragment>
<header className={`${theme}`}>
<nav>
<div className="logo">BrainTech</div>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
<button onClick={changeTheme}>🌙</button>
</nav>
</header>
<div className={`hero ${theme}`}>
<h1>Welcome to our Technology Company</h1>
<p>We provide high quality tech solutions for your business.</p>
</div>
</Fragment>
);
};
export default Theme
Bu şekilde bundan sonra bütün Context’lerimizi böyle oluşturup ana component’i sarmalayıp kullanabiliriz.
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…