FrontEnd Developer Road Map

React Tutorial 2023 51 – useContext Hook’u 5 – Context Klasör Mimarisinin Oluşturulması

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.

ThemeContext.jsx

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.

index.js Güncelle

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.

Theme.jsx Güncelle

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

Uygulama Test

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.

Murat Bilginer

21 Şubat 1992'de doğdum. Endüstri Mühendisi olarak lisansımı 2016 yılında tamamladım. Industryolog Akademi - NGenius oluşumlarının kurucusuyum. Şu anda kendi şirketim Brainy Tech ile Web ve Mobil Geliştirme, AWS, Google Cloud Platform Sistemleri için DevOps, Big Data Analiz ve Görselleştirme hizmetleri sunmakta ve Online Eğitimler vermekteyiz.

Share
Published by
Murat Bilginer

Recent Posts

Kedimiz Oly & FIP Süreci 9 – 1 Haftalık GS İğnesi Serüveni – Oly İyileşiyor mu?

Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…

2 gün ago

Kedimiz Oly & FIP Süreci 8 – Yeniden Hayvan Hastanesi – Sonuç Kontrolü ve Sonrası…

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.…

2 gün ago

Kedimiz Oly & FIP Süreci 7 – GS İğnesine Başlama Kararımız ve Oly’de Dikkat Ettiklerimiz

Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…

3 gün ago

Kedimiz Oly & FIP Süreci 6 – İstanbul Üniversitesi Cerrahpaşa Hayvan Hastanesi Serüveni ve Sonrası

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…

4 gün ago

Kedimiz Oly & FIP Süreci 5 – Teşhisten Önce Biz… Veterinerimize Güvenebilir Miydik?

Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…

4 gün ago

Kedimiz Oly & FIP Süreci 4 – Antalya’ya Yolculuk – Bir Şeyler Ters Gidiyor… & İstanbul’a Geri Dönüş

9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…

4 gün ago