Gelişmiş Bir React Projesinin App.js Dosyası

React Uygulama Yapısı ve Açıklamaları

Aşağıdaki örnekte gelişmiş, büyük ölçekli gerçek bir e-ticaret uygulamasının App.js dosyasını görüyorsunuz.

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { UIContextProvider } from "./modules/_context/UIContext";
import { I18nProvider, useLang } from "_metronic/i18n";
import { LayoutSplashScreen } from "_metronic/layout";
import { Routes } from "./routes/Routes";
import moment from "moment";
import 'moment/locale/de' ;
import 'moment/locale/tr' ;

export default function App({ store, persistor, basename }) {
  //moment dil paketi değiştirme
  const locale = useLang(); // "de" | "en" | "tr"
  moment.locale(locale ?? "de");

  return (
    /* Provide Redux store */
    <Provider store={store}>
      {/* Asynchronously persist redux stores and show SplashScreen while it's loading. */}
      <PersistGate persistor={persistor} loading=<LayoutSplashScreen />>
        {/* Override basename (e.g: homepage in package.json) */}
        <BrowserRouter basename={basename}>
          {/*This library only returns the location that has been active before the recent location change in the current window lifetime.*/}
          {/* Provide react-intl context synchronized with Redux state. */}
          <I18nProvider>
            <UIContextProvider>
              {/* Render routes with provided Layout. */}
              <Routes />
            </UIContextProvider>
          </I18nProvider>
        </BrowserRouter>
      </PersistGate>
    </Provider>
  );
}

Bu dosyanın yapısının anlaşılması, React'te büyük bir projenin genel yapısının nasıl göründüğü konusunda fikir vererek öğrenmeyi kolaylaştırabilir.

Bu React bileşeni, bir uygulamanın temel yapısını oluşturur ve birçok önemli kütüphaneyi bir araya getirir. Şimdi kodu parça parça açıklayalım:

1. Importlar

import React from "react";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { UIContextProvider } from "./modules/_context/UIContext";
import { I18nProvider, useLang } from "_metronic/i18n";
import { LayoutSplashScreen } from "_metronic/layout";
import { Routes } from "./routes/Routes";
import moment from "moment";
import 'moment/locale/de';
import 'moment/locale/tr';

• React: React kütüphanesini kullanmak için gerekli.
• react-router-dom: Uygulamanın yönlendirme (routing) işlemlerini yönetmek için kullanılır.
• react-redux: Redux durum yönetimini sağlamak için kullanılır.
• redux-persist: Redux durumunu yerel depolama (local storage) gibi kalıcı depolama alanına kaydetmek için kullanılır.
• UIContextProvider: Uygulama içi kullanıcı arayüzü durumu sağlayan özel bir bağlam sağlayıcısıdır.
• I18nProvider: Uygulamanın uluslararasılaştırma (i18n) desteği için kullanılır.
• LayoutSplashScreen: Uygulama yüklenirken gösterilen bir bekleme ekranıdır.
• Routes: Uygulamanın yönlendirmeleri için belirlenen rotaları içerir.
• moment: Tarih ve zaman işlemleri için kullanılan bir kütüphanedir. Almanca ve Türkçe dil paketleri de içe aktarılmıştır.

2. App Bileşeni

export default function App({ store, persistor, basename }) {
    // App: Bu, uygulamanın ana bileşenidir ve Redux store'u, persistor nesnesini ve basename değerini props olarak alır.
}

3. Dil Ayarı

const locale = useLang(); // "de" | "en" | "tr"
moment.locale(locale ?? "de");

• useLang(): Uygulamanın geçerli dilini döndüren bir kancadır. Eğer bir dil yoksa, varsayılan olarak Almanca ("de") ayarlanır.
• moment.locale(): moment kütüphanesinin dil ayarını değiştirir. Bu sayede tarih formatları, dil ayarına göre güncellenir.

4. JSX Yapısı

return (
    <Provider store={store}>
        <PersistGate persistor={persistor} loading=<LayoutSplashScreen />>
            <BrowserRouter basename={basename}>
                <I18nProvider>
                    <UIContextProvider>
                        <Routes />
                    </UIContextProvider>
                </I18nProvider>
            </BrowserRouter>
        </PersistGate>
    </Provider>
);

• Provider: Redux store'unu uygulamanın tüm bileşenlerine sağlar.
• PersistGate: Redux durumunu yerel depolama alanına kaydederken bir yükleme durumu (splash screen) gösterir.
• BrowserRouter: React Router kullanarak uygulamanın yönlendirmelerini yönetir. basename prop'u, URL yapısına bir temel yolu ekler.
• I18nProvider: Uygulamanın uluslararasılaştırma desteğini sağlar.
• UIContextProvider: Kullanıcı arayüzü durumunu sağlayan özel bir bağlamdır.
• Routes: Uygulamanın yönlendirme yapılarını içerir ve burada tanımlanmış rotaları render eder.

Özet

Bu bileşen, bir React uygulamasının temelini oluşturarak, durum yönetimi, yönlendirme, uluslararasılaştırma ve kullanıcı arayüzü gibi önemli fonksiyonları bir arada sağlar. Bu yapıyı kullanarak uygulamanızda çeşitli dillerde içerik gösterebilir, kullanıcı arayüzünü yönetebilir ve durumu kalıcı olarak saklayabilirsiniz.