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

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

React Tutorial 2023 50 – useContext Hook’u 4 – useContext Kullanımı

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