Hướng dẫn cài đặt đa ngôn ngữ i18n trong ReactJS

Trong bài viết này, chúng ta sẽ tìm hiểu cách cài đặt đa ngôn ngữ i18n trong ứng dụng ReactJS của bạn. Điều này giúp bạn dễ dàng thay đổi ngôn ngữ của ứng dụng và cung cấp trải nghiệm tốt hơn cho người dùng.

Tạo ứng dụng React cơ bản

Đầu tiên, hãy tạo một ứng dụng React cơ bản bằng các bước sau:

• Tạo một thư mục với tên "react-i18n-app".
• Trong command prompt (cmd), nhập lệnh "npx create-react-app ." để tạo ứng dụng React.
• Chờ một lúc để ứng dụng được khởi tạo.
• Tiếp theo, trong cửa sổ command prompt đó, nhập lệnh "cd react-i18n-app" để truy cập vào thư mục của ứng dụng.
• Cài đặt hai package "react-i18next" và "i18next" để hỗ trợ đa ngôn ngữ bằng lệnh "npm install react-i18next i18next".
• Cuối cùng, chạy ứng dụng bằng lệnh "npm start".

Giao diện ban đầu

Thêm thư viện Bootstrap để giao diện của ứng dụng trở nên đẹp hơn. Sau đó, code giao diện theo mã mẫu bên dưới:

import React from 'react';

export default function App() {
  return (
    <div className="container text-center">
      <h1 className="my-3">React i18n</h1>
      <button className="btn btn-primary me-2">Change language EN - VI</button>
      <span className="badge rounded-pill text-bg-danger me-1">Search</span>
      <span className="badge rounded-pill text-bg-danger me-1">Cancel</span>
      <span className="badge rounded-pill text-bg-danger me-1">Delete</span>
      <span className="badge rounded-pill text-bg-danger me-1">Save</span>
    </div>
  );
}

Giao diện của ứng dụng sẽ trông như sau:

Tạo các file ngôn ngữ Anh - Việt

Để bắt đầu cấu hình đa ngôn ngữ, tạo hai file ngôn ngữ cho tiếng Anh và tiếng Việt.

• File ngôn ngữ tiếng Anh:

{
  "common": {
    "button": {
      "search": "Search",
      "cancel": "Cancel",
      "delete": "Delete",
      "save": "Save"
    }
  }
}

• File ngôn ngữ tiếng Việt:

{
  "common": {
    "button": {
      "search": "Tìm kiếm",
      "cancel": "Hủy",
      "delete": "Xóa",
      "save": "Lưu"
    }
  }
}

Cấu hình ngôn ngữ

Tạo file riêng để cấu hình ngôn ngữ trong ứng dụng. Import các thư viện cần thiết và khai báo các tài nguyên ngôn ngữ như sau:

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from '../locales/en/translation.json';
import translationVI from '../locales/vi/translation.json';

const resources = {
  en: {
    translation: translationEN
  },
  vi: {
    translation: translationVI
  }
};

i18next.use(initReactI18next).init({
  lng: 'en',
  debug: true,
  resources
});

Để sử dụng file cấu hình ngôn ngữ này, hãy import nó vào file "index.js" như sau:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './config-translation';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Hiển thị ngôn ngữ

Sử dụng hook "useTranslation" từ thư viện "react-i18next" để hiển thị các đoạn văn bản theo ngôn ngữ được chọn.

import React from 'react';
import { useTranslation } from 'react-i18next';

export default function App() {
  const { t } = useTranslation();

  return (
    <div className="container text-center">
      <h1 className="my-3">React i18n</h1>
      <button className="btn btn-primary me-2">Change language EN - VI</button>
      <span className="badge rounded-pill text-bg-danger me-1">{t('common.button.search')}</span>
      <span className="badge rounded-pill text-bg-danger me-1">{t('common.button.cancel')}</span>
      <span className="badge rounded-pill text-bg-danger me-1">{t('common.button.delete')}</span>
      <span className="badge rounded-pill text-bg-danger me-1">{t('common.button.save')}</span>
    </div>
  );
}

Thay đổi ngôn ngữ

Cuối cùng, để thay đổi ngôn ngữ, chúng ta sử dụng hook "useTranslation" và hook "useState" từ thư viện "react".

import React from 'react';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';

export default function App() {
  const { t, i18n } = useTranslation();
  const [currentLanguage, setCurrentLanguage] = useState('en');

  return (
    <button
      className="btn btn-primary me-2"
      onClick={() => {
        setCurrentLanguage(currentLanguage === 'en' ? 'vi' : 'en');
        i18n.changeLanguage(currentLanguage === 'en' ? 'vi' : 'en');
      }}
    >
      Change language EN - VI
    </button>
  );
}

Demo

Bạn có thể xem demo online tại đây: https://codesandbox.io/s/react-i18n-c0yrc4?file=/src/App.tsx

Với những bước trên, bạn đã hoàn tất cài đặt đa ngôn ngữ i18n trong ứng dụng ReactJS của mình. Bây giờ, bạn có thể dễ dàng thay đổi ngôn ngữ và cung cấp trải nghiệm tốt hơn cho người dùng.

Hy vọng bài viết này hữu ích với bạn!