Как локализовать React-приложения?

Локализация (или международализация) – это процесс адаптации вашего приложения для разных языков и культур. В React рекомендуется использовать внешние библиотеки для более эффективной локализации. Одной из самых популярных библиотек является react-i18next, которая основана на i18next.

Установка

Для начала вам нужно установить react-i18next и сам i18next. Это можно сделать с помощью npm:

npm install react-i18next i18next

Настройка

После установки библиотеки, вам нужно создать файл конфигурации для локализации. Обычно его помещают в папку src/i18n.js:

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // подключение инициализации для React
  .init({
    resources: {
      en: {
        translation: {
          welcome: "Welcome to React",
          description: "This is a simple localization example."
        }
      },
      ru: {
        translation: {
          welcome: "Добро пожаловать в React",
          description: "Это простой пример локализации."
        }
      },
    },
    lng: "en", // язык по умолчанию
    fallbackLng: "en", // язык, используемый в случае отсутствия перевода
    interpolation: {
      escapeValue: false // для React не обязательно экранировать
    }
  });

export default i18n;

В этом примере мы создали два языка: английский (en) и русский (ru), и добавили переводы сообщений.

Использование в компоненте

Теперь вы можете использовать локализацию в своих компонентах. Для этого мы будем использовать хук useTranslation из react-i18next.

Пример компонента:

// src/App.js
import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n';

const App = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ru')}>Русский</button>
    </div>
  );
};

export default App;

В этом компоненте:

• Мы импортируем хук useTranslation и используем его для получения функции t, которая отвечает за получение перевода.
• При нажатии на кнопки "English" и "Русский" меняется язык приложения.

Итог

Локализация приложений на React с помощью react-i18next предоставляет мощный и гибкий способ работы с многими языками. Вы можете легко добавлять новые языки просто добавляя новые записи в объект resources в вашем i18n.js файле. Это значительно упрощает процесс создания многоязычных пользоватльских интерфейсов.

Теперь, когда вы знаете, как локализовать React-приложения, вы можете улучшить доступность и пользовательский опыт вашего приложения для более широкой аудитории.