Mengunakan i18next untuk lokalisasi aplikasi React.

<Tutorial >

I18N = Internationalization. Atau bahasa mudah, alih bahasa / translation. So kali ini aku nak share cara menggunakan i18next iaitu satu framework lokalisasi yang boleh di guna pakai untuk memudahkan proses mengalih bahasa aplikasi.

Framework ini support pelbagai bahasa programming termasuk PHP, ruby, javascript dan banyak lagi. Boleh rujuk i18next supported framework untuk senarai lengkap. Tapi seperti yang kita tau, aku suka javascript & reactjs, so aku nak akan tunjukkan cara asas menggunakan i18next di react.

Pertama perlulah ada aplikasi react. Bina 1 aplikasi react:

yarn create react-app react-i18next && cd react-i18next

Struktur asas folder aplikasi react adalah seperti berikut

- public/
---- index.html
---- favicon.ico
---- ... 
- src/
---- App.js
---- index.js
---- ...
- package.json
- README.md
- ...

Kemudian, install dependency i18next untuk react

yarn add i18next react-i18next i18next-http-backend i18next-browser-langiagedetector

Buat satu folder baru dan berikan nama locales/ di folder public/. Kemudian bergantung bahasa apa yang kita nak support, buat folder baru untuk bahasa-bahasa tersebut. Untuk kali ni, aku akan nak support english & bahasa melayu. Aku akan buat folder en/ dan ms/. Buat juga file baharu bernama translation.json di dalam kedua-dua folder bahasa tadi.

- public/
---- locales/
-------- en/
------------ translation.json
-------- ms/
------------ translation.json
---- index.html
---- favicon.ico
---- ... 

Isikan data translation di dalam translation.json yang dibuat tadi

public/locales/en/translation.json

{
  "title": "Welcome to react using react-i18next",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and malay using button above."
  }
}

public/locales/ms/translation.json

{
  "title": "Selamat datang ke react mengunakan react-i18next",
  "description": {
    "part1": "Untuk mula, edit <1>src/App.js</1> dan simpan untuk dimuat semula.",
    "part2": "Tukar bahasa antara bahasa inggeris dan bahasa melayu menggunakan butang di atas."
  }
}

Buat pula 1 file baharu & berikan nama i18n.js di dalam folder src/

- src/
---- App.js
---- index.js
---- i18n.js

Isikan kod dibawah ini untuk persediaan (setup) i18n.

src/i18n.js

import i18n from "i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: "en",
    debug: true,
    detection: {
      order: ["queryString", "cookie"],
      cache: ["cookie"],
    },
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Kemudian buka file src/index.js dan edit kod permulaan di mana kita memulakan aplikasi reactjs.

src/index.js

import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import "./i18n";

ReactDOM.render(
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
      <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Lihat kita import "./i18n"; dimana kita initialize i18n dan kita wrap aplikasi kita dengan Component React <Suspense>. Kita juga letakkan props fallback sebagai ‘backup’ content. Component React.Suspense digunakan untuk ‘suspense’ rendering react selagi bahasa yang dipilih tidak siap diproses. Props fallback pula akan render ‘Loading…’ ketika bahasa yang dipilih sedang diproses.

Untuk mengunakan fungsi ‘translate’ edit file src/App.js

src/App.js

import "./App.css";
import { Trans, useTranslation } from "react-i18next";

function App() {
  // method 2(a)
  const { t, i18n } = useTranslation();
  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };
  return (
    <div className="App">
      <button onClick={() => changeLanguage("en")}>EN</button>
      <button onClick={() => changeLanguage("ms")}>MS</button>
      <hr />
      {/* method 1 */}
      <Trans i18nKey="description.part1">
        To get started, edit <code>src/App.js</code> and save to reload.
      </Trans>
      {/* method 2(b) */}
      <div>{t("description.part2")}</div>
    </div>
  );
}

export default App;

Lihat kod diatas, aku ada maksudkan 2 cara untuk menggunakan i18next.

Cara pertama dengan mengunakan component Trans dari library react-i18next dimana kita wrap content kita dengan component Trans.

Cara kedua pula adalah cara yang aku paling suka iaitu dengan mengunakan hooks. libarary react-i18next menyediakan hook useTranslation untuk digunakan dengan lebih “mantul” pada pandangan aku.

Belanja saya kopi

Artikel lain

Fahami React Context API

Sebagai developer reactjs yang baharu macam aku, aku selalu gunakan teknik prop drilling untuk pass prop ke child component yang aku buat. Cara ini tak bagus kalau projek kita itu adalah projek yang besar. Aku tahu mengenai kewujudan react context API atau state management library lain seperti redux, mobx, recoil dan banyak lagi library untuk… Continue reading Fahami React Context API

Asas Node.js – Built-in module

Dalam Node.js terdapat tidaklah terlalu banyak built-in module. Tapi aku tak akan bincangkan kesemua module tersebut. Aku hanya akan bincangkan beberapa built-in module yang agak penting & digunakan agak kerap ketika pembangunan aplikasi node.js. Antaranya adalah: Path module OS module File System Module Events Module HTTP Module Path module Digunakan untuk handle file path. Contohnya… Continue reading Asas Node.js – Built-in module