Полное руководство по интернационализации в React с использованием React i18n

Полное руководство по интернационализации в React с использованием React i18n

React — это популярная интерфейсная библиотека JavaScript, которая в последние годы приобрела большую популярность. С ростом глобализации и необходимостью поддержки нескольких языков веб-сайтами React i18n стал важным инструментом для разработчиков. React i18n позволяет разработчикам легко добавлять многоязычную поддержку в свои приложения.

В этой статье мы рассмотрим, как инициализировать React i18n, добавить языки, получить языки из файлов JSON, получить языки из API, изменить язык, кэшировать язык в файлах cookie, структурировать файлы внутри проекта и обновлять переводы.

Инициализация React i18n

Прежде чем вы сможете начать использовать React i18n, вы должны его инициализировать. Это включает в себя создание экземпляра объекта i18n и его настройку с соответствующими параметрами. Вот пример того, как это сделать:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  });

В этом примере мы используем пакеты i18next и react-i18next для инициализации React i18n. Мы устанавливаем язык по умолчанию на en и также устанавливаем резервный язык на en. Для параметра keySeparator установлено значение false, потому что мы хотим использовать полную строку в качестве ключа перевода. Наконец, мы настраиваем интерполяцию так, чтобы она не пропускала никакие значения.

Добавление языков

После инициализации React i18n вы можете начать добавлять языки в свое приложение. Вы можете добавить столько языков, сколько хотите, создав новый файл JSON для каждого языка. Вот пример того, как добавить языковой файл:

{
  "welcome": "Welcome to my website!",
  "description": "This is a demo website to show how to use React i18n."
}

В этом примере мы добавили файл на английском языке с двумя переводами: welcome и description.

Получение языков из файлов JSON

Чтобы получить языки из файлов JSON, вы можете использовать пакет i18next-http-backend. Этот пакет позволяет загружать языковые файлы с удаленного сервера или из локального файла. Вот пример того, как получить языки из файла JSON:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

В этом примере мы используем пакет i18next-http-backend для загрузки языковых файлов из локального файла. Опция loadPath сообщает i18next, откуда загружать языковые файлы. Заполнитель {{lng}} заменяется текущим кодом языка, а заполнитель {{ns}} заменяется пространством имен (по умолчанию translation).

Язык кэширования в файлах cookie

Чтобы убедиться, что языковые предпочтения пользователя сохраняются между сеансами, вы можете кэшировать язык в файле cookie. Вот пример того, как кэшировать язык в куки:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import Cookies from 'js-cookie';
const languageDetector = new LanguageDetector();
languageDetector.addDetector({
  name: 'cookie',
  lookup(options) {
    return Cookies.get('lang');
  },
});
i18n
  .use(HttpBackend)
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });
function handleChangeLanguage(event) {
  const newLang = event.target.value;
  Cookies.set('lang', newLang);
  i18n.changeLanguage(newLang);
}
<select onChange={handleChangeLanguage}>
  <option value="en">English</option>
  <option value="fr">Français</option>
  <option value="es">Español</option>
</select>

В этом примере мы используем пакет js-cookie для установки и получения языковых предпочтений из файла cookie. Мы также используем пакет i18next-browser-languagedetector для определения языковых предпочтений пользователя из файла cookie.

Структурирование файлов внутри проекта

При добавлении нескольких языков в приложение важно правильно структурировать языковые файлы. Одним из распространенных подходов является организация языковых файлов по коду языка и пространству имен. Вот пример того, как структурировать языковые файлы внутри проекта:

locales/
  en/
    common.json
    home.json
  fr/
    common.json
    home.json
  es/
    common.json
    home.json

В этом примере у нас есть каталог locales, который содержит подкаталог для каждого кода языка. Внутри каждого языкового каталога у нас есть файл JSON для каждого пространства имен. Файл common.json содержит переводы, общие для всего приложения, а файл home.json содержит переводы, характерные для домашней страницы.

Обновление переводов

Наконец, важно поддерживать актуальность переводов по мере развития приложения. Вы можете использовать инструмент управления переводами, такой как Crowdin или Lokalise, для управления своими переводами и совместной работы с переводчиками. Вот пример того, как обновить переводы в React i18n:

import i18n from 'i18next';
function updateTranslations() {
  i18n.reloadResources('en', 'common', () => {
    console.log('Translations updated');
  });
}
<button onClick={updateTranslations}>Update Translations</button>

В этом примере мы создаем функцию updateTranslations, которая вызывает метод reloadResources объекта i18n. Этот метод перезагружает указанный язык и пространство имен из серверной части и обновляет переводы. Вы можете использовать этот метод для запуска обновления всякий раз, когда добавляются новые переводы или изменяются существующие переводы.

Помните, что добавление поддержки интернационализации — это непрерывный процесс, требующий постоянных усилий и совместной работы. Обязательно вовлекайте в процесс переводчиков и пользователей и используйте такие инструменты, как Crowdin или Lokalise, для управления своими переводами. Приложив немного усилий, вы сможете сделать свое приложение по-настоящему глобальным и охватить пользователей в любом уголке мира.

Получение языков из API

Помимо загрузки языков из файлов JSON, вы также можете загружать языки из API. Вот пример загрузки языков из API с помощью пакета i18next-http-backend:

import i18n from 'i18next';
import HttpBackend from 'i18next-http-backend';
i18n
  .use(HttpBackend)
  .init({
    backend: {
      loadPath: '/api/translations/{{lng}}/{{ns}}',
    },
    fallbackLng: 'en',
    debug: true,
  });

В этом примере мы используем пакет i18next-http-backend для загрузки переводов из конечной точки API /api/translations/{{lng}}/{{ns}}. Заполнитель {{lng}} заменяется кодом языка, а заполнитель {{ns}} заменяется пространством имен. Вы можете настроить конечную точку API в соответствии со своими потребностями.

По умолчанию пакет i18next-http-backend использует HTTP-метод GET для получения переводов. Если для вашего API требуется другой метод HTTP или аутентификация, вы можете настроить параметры, используя свойство backend метода i18n.init.

Обратите внимание, что загрузка переводов из API может увеличить задержку и замедлить первоначальный рендеринг приложения. Чтобы смягчить это, вы можете использовать методы кэширования и ленивой загрузки для загрузки переводов по запросу.

Заключение

В этой статье мы рассмотрели основы использования React i18n для добавления поддержки интернационализации в ваше приложение React. Мы рассмотрели, как инициализировать объект i18n, добавлять языки, получать языки из файлов JSON и API, изменять язык, кэшировать язык в файлах cookie, структурировать файлы внутри проекта и обновлять переводы. Следуя этим передовым методам, вы можете сделать свое приложение доступным для пользователей по всему миру и обеспечить бесперебойную работу на предпочитаемом ими языке.

Помните, что добавление поддержки интернационализации — это непрерывный процесс, требующий постоянных усилий и совместной работы. Обязательно вовлекайте в процесс переводчиков и пользователей и используйте такие инструменты, как Crowdin или Lokalise, для управления своими переводами. Приложив немного усилий, вы сможете сделать свое приложение по-настоящему глобальным и охватить пользователей в любом уголке мира.