React Academy · Pelajaran

Pengalih Bahasa & Pemuatan Terjemahan Malas

Buat pengalih lokal dan muat paket terjemahan sesuai permintaan untuk mengurangi ukuran awal.

Pelajaran 4 dari 413 langkah

Pengalih Bahasa & Pemuatan Terjemahan Malas adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat Datang

Dalam pelajaran ini, Anda akan membuat komponen pengalih bahasa dan mengonfigurasi i18next untuk memuat paket terjemahan sesuai kebutuhan, sehingga mengurangi muatan JavaScript awal.

Pengalih Bahasa Sederhana

Panggil i18n.changeLanguage() saat tombol diklik untuk mengganti bahasa aktif. Semua komponen yang menggunakan useTranslation akan dirender ulang secara otomatis dengan bahasa baru.
function LanguageSwitcher() {
  const { i18n } = useTranslation();
  return (
    <div>
      {['en', 'tr', 'fr'].map(lng => (
        <button
          key={lng}
          onClick={() => i18n.changeLanguage(lng)}
          style={{ fontWeight: i18n.language === lng ? 'bold' : 'normal' }}
        >
          {lng.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

Menyimpan Pilihan Bahasa

Simpan bahasa yang dipilih di localStorage agar tetap tersimpan setelah halaman dimuat ulang. Plugin LanguageDetector menanganinya secara otomatis dengan urutan detektor `localStorage`.
i18n.init({
  detection: {
    order: ['localStorage', 'navigator'],
    caches: ['localStorage'],
  },
});

Mengapa Terjemahan Dimuat Secara Malas?

Menyertakan semua terjemahan dalam paket JavaScript akan meningkatkan waktu pemuatan awal. Pemuatan malas hanya mengirim bahasa bawaan saat pemuatan pertama dan mengambil bahasa lain ketika pengguna beralih bahasa.

Mengonfigurasi Backend HTTP

Plugin i18next-http-backend mengambil berkas terjemahan dari pola URL. Terjemahan berada di folder `public/` dan disajikan sebagai aset statis — tidak diperlukan kode sisi server.
import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json',
  },
  ns: ['common', 'auth'],
  defaultNS: 'common',
});

Menambahkan Berkas Terjemahan

Buat satu berkas JSON untuk setiap bahasa dan ruang nama di `public/locales/`. Backend HTTP akan mengambilnya secara otomatis ketika bahasa atau ruang nama tersebut pertama kali diperlukan.
public/locales/
  en/common.json
  en/auth.json
  tr/common.json
  tr/auth.json

Menampilkan Status Pemuatan Saat Mengganti Bahasa

Setelah memanggil changeLanguage(), i18next memuat berkas bahasa baru secara asinkron. Berlanggananlah ke peristiwa `i18n.on('languageChanged')` atau periksa `i18n.isInitialized` untuk menampilkan indikator pemuatan.
const [switching, setSwitching] = useState(false);

const change = async (lng) => {
  setSwitching(true);
  await i18n.changeLanguage(lng);
  setSwitching(false);
};

Memuat Ruang Nama Tertentu Secara Malas

Muat ruang nama hanya saat pertama kali diperlukan menggunakan `i18n.loadNamespaces(['dashboard'])`. Panggil ini dalam useEffect ketika rute dasbor dipasang agar ruang nama tersebut tidak dimuat untuk pengguna yang belum terautentikasi.
useEffect(() => {
  i18n.loadNamespaces('dashboard');
}, []);

CDN untuk Terjemahan

Untuk produksi, simpan berkas terjemahan di CDN (S3 + CloudFront). Perbarui `loadPath` ke URL CDN. Dengan demikian, pembaruan terjemahan terpisah dari penerapan kode.
backend: {
  loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
}

Lokal dalam URL

Banyak aplikasi menyertakan lokal dalam URL (misalnya, /en/products, /tr/products). Gabungkan React Router dengan i18n: baca lokal dari parameter URL, panggil changeLanguage, lalu perbarui URL ketika pengguna beralih bahasa.

Pemeriksaan Singkat

Apa yang dilakukan plugin i18next-http-backend?

Ringkasan

Buat pengalih bahasa dengan i18n.changeLanguage(). Simpan pilihan menggunakan detektor localStorage. Gunakan i18next-http-backend untuk memuat berkas terjemahan secara malas. Tampilkan status pemuatan saat mengganti bahasa. Simpan berkas di CDN untuk produksi.

Kursus Selesai

Selamat! Anda telah menyelesaikan **Internasionalisasi (i18n) dalam React**. Kini Anda dapat menyiapkan react-i18next, menerjemahkan teks dengan ruang nama, menangani bentuk jamak dan interpolasi, serta memuat berkas terjemahan secara malas.
Gratis untuk memulai

Belajar React dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus
88
Pelajaran
324

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengalih Bahasa & Pemuatan Terjemahan Malas” gratis?

Ya — teks lengkap “Pengalih Bahasa & Pemuatan Terjemahan Malas” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengalih Bahasa & Pemuatan Terjemahan Malas”?

Buat pengalih lokal dan muat paket terjemahan sesuai permintaan untuk mengurangi ukuran awal. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pengalih Bahasa & Pemuatan Terjemahan Malas” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menyiapkan react-i18next
  2. Menggunakan Hook useTranslation
  3. Bentuk Jamak & Interpolasi
  4. Pengalih Bahasa & Pemuatan Terjemahan Malas
← Kembali ke React Academy