Open Access

Интернационализация (i18n) в React

Ishita Srivastava
Интернационализация (i18n) в React

Интернационализация, часто сокращаемая как i18n (где 18 означает количество букв между “i” и “n”), относится к процессу разработки программного приложения таким образом, чтобы оно могло быть адаптировано к различным языкам и регионам без технических изменений. Поскольку мир становится все более взаимосвязанным, важность i18n в веб-приложениях трудно переоценить. Это позволяет разработчикам создавать приложения, которые могут охватывать глобальную аудиторию, обеспечивая беспрепятственный доступ пользователей к различным языкам и культурным контекстам.

React, популярная библиотека JavaScript для создания пользовательских интерфейсов, предлагает надежную поддержку i18n. Интегрируя i18n в проект React, разработчики могут обеспечить доступность и удобство использования своих приложений для людей по всему миру.

Понимание интернационализации (i18n)

Интернационализация (i18n) – это процесс проектирования и подготовки вашего приложения к работе с несколькими языками и регионами. Он включает в себя абстрагирование и перенос всех пользовательских строк и информации, относящейся к конкретной локали, из базы кода. Локализация (l10n), с другой стороны, представляет собой процесс адаптации интернационализированного приложения к определенному языку и региону. Это включает перевод текста и настройку форматирования для дат, времени, чисел и валют.

Различия между i18n и l10n

Хотя i18n и l10n тесно связаны, они служат разным целям:

  • Интернационализация (i18n) позволяет адаптировать ваше приложение к различным языкам и регионам без внесения изменений в кодовую базу.
  • Локализация (l10n) – это процесс перевода и настройки вашего приложения для конкретного языка.

Преимущества внедрения i18n в веб-приложениях

Внедрение i18n в веб-приложениях дает ряд преимуществ:

  • Глобальный охват: Расширяет потенциальную базу пользователей, делая приложение доступным для носителей разных языков.
  • Удобство для пользователя: Повышает удобство для пользователя за счет предоставления контента на родном языке пользователя.
  • Соответствие требованиям: обеспечивает соответствие местным правилам и стандартам, которые могут требовать, чтобы приложения были доступны на местном языке.
  • Имидж бренда: Улучшает имидж бренда, демонстрируя приверженность принципам открытости и учета культурных особенностей.

Настройка проекта React для i18n

Чтобы реализовать i18n в проекте React, вам потребуется настроить необходимые инструменты и библиотеки. Одной из самых популярных библиотек для этой цели является react-i18next, которая создана поверх библиотеки i18next.

Создание нового проекта React

Сначала создайте новый проект React с помощью Create React App. Этот инструмент настраивает современную среду React с разумными настройками по умолчанию.

npx create-react-app my-i18n-app
cd my-i18n-app

Установка необходимых зависимостей

Далее установите библиотеки react-i18next и i18next next, а также необходимый сервер для загрузки переводов из файлов JSON.

npm install react-i18next i18next i18next-http-backend

Базовая настройка i18n в проекте React

Создайте в каталоге src новую папку с названием locales для хранения файлов перевода. Внутри папки locales создайте подпапки для каждого языка, который вы хотите поддерживать. Например, создайте en для английского и fr для французского. В каждой вложенной папке создайте перевод.json-файл. Вот пример структуры:

src/
  └── locales/
      ├── en/
      │   └── translation.json
      └── fr/
          └── translation.json

Добавьте несколько переводов к тексту перевода.файлы в формате json:

src/locales/en/translation.json

{
  "welcome": "Welcome to React",
  "description": "This is an internationalized React application."
}

src/locales/fr/translation.json

{
  "welcome": "Bienvenue à React",
  "description": "Ceci est une application React internationalisée."
}

Теперь создайте файл i18n.js в каталоге src для конфигурации i18n:

src/i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    backend: {
      loadPath: '/locales/{{lng}}/translation.json'
    },
    interpolation: {
      escapeValue: false // React already escapes values to prevent XSS
    }
  });

export default i18n;

В этой конфигурации мы используем HttpBackend для загрузки файлов перевода из папки районов. Запасным вариантом задает язык по умолчанию (английский в данном случае), и возможностью отладки позволяет отладочную информацию в консоль.

Наконец, инициализация i18n в своем index.js файл:

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // Import the i18n configuration

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

Теперь вы можете использовать механизм перевода use из react-i18next для перевода строк в ваших компонентах:

src/App.js

import React from 'react';
import { useTranslation } from 'react-i18next';
import './App.css';

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

  return (
    <div className="App">
      <header className="App-header">
        <h1>{t('welcome')}</h1>
        <p>{t('description')}</p>
      </header>
    </div>
  );
}

export default App;

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

Реализация переключения языков

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

Реализация переключения языков

Переключение языков – важнейшая функция в интернационализированном приложении. Она позволяет пользователям изменять язык интерфейса в соответствии со своими предпочтениями. Реализация этой функции в React с помощью react-i18next включает в себя несколько этапов.

Создание компонента переключения языков

Чтобы создать средство переключения языков, вам понадобится компонент, который позволяет пользователям выбирать предпочитаемый язык. Функция use Translation из react-i18next предоставляет методы для динамического изменения языка.

Пример: LanguageSwitcher.js

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

function LanguageSwitcher() {
  const { i18n } = useTranslation();

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

  return (
    <div>
      <button onClick={() => handleLanguageChange('en')}>English</button>
      <button onClick={() => handleLanguageChange('fr')}>Français</button>
    </div>
  );
}

export default LanguageSwitcher;

В этом примере функция handle Language Change изменяет язык на английский или французский при нажатии соответствующей кнопки. Метод i18n.changeLanguage динамически обновляет язык приложения.

Сохранение языковых настроек пользователя

Чтобы обеспечить согласованное взаимодействие с пользователем, важно помнить о выборе языка пользователем. Этого можно достичь, сохранив выбранный язык в локальном хранилище.

Пример: Изменение LanguageSwitcher.js

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

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  useEffect(() => {
    const savedLanguage = localStorage.getItem('language') || 'en';
    i18n.changeLanguage(savedLanguage);
  }, [i18n]);

  const handleLanguageChange = (lng) => {
    i18n.changeLanguage(lng);
    localStorage.setItem('language', lng);
  };

  return (
    <div>
      <button onClick={() => handleLanguageChange('en')}>English</button>
      <button onClick={() => handleLanguageChange('fr')}>Français</button>
    </div>
  );
}

export default LanguageSwitcher;

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

Обработка плюрализации и форматирования

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

Использование плюрализации

Плюрализация – это процесс изменения формы слова для обозначения более чем одного элемента. В разных языках существуют разные правила для множественного числа. Например, в английском обычно есть формы единственного и множественного числа, но в других языках могут быть дополнительные формы в зависимости от количества.

Плюрализация с помощью i18next

Библиотека i18next упрощает плюрализацию, позволяя вам определять разные формы для каждого языка в ваших файлах перевода. Вот как вы можете обрабатывать плюрализацию в приложении React с помощью i18next.

Пример: Файлы перевода

Во-первых, определите правила плюрализации в ваших файлах перевода.

src/locales/en/translation.json

{
  "item_count": "You have {{count}} item",
  "item_count_plural": "You have {{count}} items"
}

src/locales/fr/translation.json

{
  "item_count": "Vous avez {{count}} article",
  "item_count_plural": "Vous avez {{count}} articles"
}

В этом примере мы определяем форму единственного и множественного числа для сообщения о количестве элементов. Переменная {{count}} используется для динамической вставки фактического количества элементов.

src/ItemCount.js

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

function ItemCount({ count }) {
  const { t } = useTranslation();

  return (
    <div>
      {t('item_count', { count })}
    </div>
  );
}

export default ItemCount;

В этом компоненте функция t автоматически выбирает соответствующую форму множественного числа на основе значения count. Библиотека i18next использует ключи item_count и item_count_plural для определения того, какое сообщение отображать.

Обработка сложных правил множественного числа

В некоторых языках существуют сложные правила плюрализации, которые выходят за рамки единственного и множественного числа. Например, польский и арабский языки имеют разные формы в зависимости от значения числа. Библиотека i18next поддерживает эти сложные правила.

Пример: Перевод на польский

src/locales/pl/translation.json

{
  "item_count_0": "Nie masz żadnych przedmiotów",
  "item_count_1": "Masz {{count}} przedmiot",
  "item_count_2": "Masz {{count}} przedmioty",
  "item_count_5": "Masz {{count}} przedmiotów"
}

В этом примере файл перевода на польский язык определяет несколько форм для разных значений count. Библиотека i18next автоматически использует правильную форму на основе значения count.

Форматирование дат, чисел и валют

Правильное форматирование дат, чисел и валют имеет важное значение для обеспечения удобства работы с локализованными пользователями. В разных регионах существуют разные правила отображения данных такого типа. Библиотека i18next предоставляет встроенную поддержку форматирования, но для более сложных задач вы можете использовать такие библиотеки, как date-fns или Intl object.

Форматирование дат

Intl.Объект DateTimeFormat предоставляет эффективный способ форматирования дат в соответствии с языковыми стандартами пользователя.

Пример: Форматирование дат

src/FormattedDate.js

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

function FormattedDate({ date }) {
  const { t } = useTranslation();

  const formattedDate = new Intl.DateTimeFormat(t('language')).format(date);

  return <p>{t('formatted_date', { date: formattedDate })}</p>;
}

export default FormattedDate;

В этом примере используется Intl.Объект DateTimeFormat используется для форматирования даты в соответствии с текущим языком. Функция t(“язык”) извлекает текущий язык, гарантируя, что дата отформатирована правильно для языка пользователя.

Использование плюрализации и форматирования в интернационализированном приложении React обеспечивает удобство взаимодействия с пользователем, учитывающее культурные особенности. Используя библиотеку i18next и объект Intl, вы можете эффективно управлять динамическим контентом, таким как множественные сообщения и форматированные даты, числа и валюты. Реализация этих функций требует понимания правил и условностей для различных языков и локалей, но в результате получается более доступное и удобное для пользователя приложение.

Тестирование и отладка i18n в React

Тестирование и отладка являются важнейшими этапами процесса разработки. Для обеспечения корректной работы вашей реализации интернационализации на разных языках и в разных регионах требуется как ручное, так и автоматическое тестирование.

Ручное тестирование

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

  • Корректный перевод всех текстовых элементов.
  • Правильное обращение с плюрализмом.
  • Правильное форматирование дат, чисел и валют.
  • Согласованность макета пользовательского интерфейса и дизайна на разных языках.

Автоматическое тестирование

Автоматическое тестирование помогает обеспечить надежность реализации i18n по мере развития вашего приложения. Вы можете использовать библиотеки тестирования, такие как Jest и React Testing Library, для написания тестов для ваших интернационализированных компонентов.

Пример: Тестирование с помощью Jest и React Testing Library

Установка

npm install --save-dev @testing-library/react @testing-library/jest-dom jest

Пример: Тест на перевод

import React from 'react';
import { render } from '@testing-library/react';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n';
import App from './App';

test('renders welcome message in English', () => {
  const { getByText } = render(
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  );

  expect(getByText('Welcome to React')).toBeInTheDocument();
});

test('renders welcome message in French', () => {
  i18n.changeLanguage('fr');
  const { getByText } = render(
    <I18nextProvider i18n={i18n}>
      <App />
    </I18nextProvider>
  );

  expect(getByText('Bienvenue à React')).toBeInTheDocument();
});

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

Устранение неполадок с i18n

Устранение неполадок с i18n часто включает в себя:

  • Проверку консоли на наличие сообщений об ошибках.
  • Проверку правильности загрузки файлов перевода.
  • Обеспечение соответствия ключей в файлах перевода ключам, используемым в ваших компонентах.

Включите режим отладки в вашей конфигурации i18n, чтобы облегчить отладку.

Пример: Включите режим отладки в i18n.js

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    interpolation: {
      escapeValue: false
    }
  });

Аспекты, связанные с производительностью

Производительность – важнейший аспект любого приложения, и интернационализированные приложения не являются исключением. Правильное управление производительностью предполагает оптимизацию загрузки и использования файлов перевода, а также обеспечение эффективного отображения компонентов. 

Отложенная загрузка файлов переводов

Предварительная загрузка всех файлов переводов может привести к увеличению времени начальной загрузки. Отложенная загрузка файлов переводов по мере необходимости может помочь оптимизировать производительность.

Пример: Отложенная загрузка в i18n.js

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    ns: ['common', 'home', 'profile'], // Namespaces
    defaultNS: 'common',
    load: 'languageOnly',
    preload: ['en', 'fr'], // Preload essential languages
    interpolation: {
      escapeValue: false
    }
  });

Запоминание переводов

Используйте функцию useMemo в React, чтобы запомнить переводы и избежать ненужных повторных отображений.

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

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

function Greeting({ count }) {
  const { t } = useTranslation();

  const message = useMemo(() => t('item_count', { count }), [t, count]);

  return <div>{message}</div>;
}

export default Greeting;

Расширенные темы i18n

Темы расширенной интернационализации (i18n) в React включают работу с языками справа налево (RTL), переводы на основе контекста и интеграцию i18n с другими библиотеками и фреймворками. Языковая поддержка RTL, имеющая решающее значение для таких языков, как арабский и иврит, включает в себя установку атрибута dir на значение rtl и соответствующую настройку макета и стилей, что обеспечивает удобство работы с пользователем.

Переводы, основанные на контексте, позволяют получать более точные переводы, предоставляя разные переводы для одного и того же ключа в зависимости от контекста, что особенно полезно для обработки нюансов языковых различий. Интеграция i18n с библиотеками управления состоянием, такими как Redux или MobX, повышает эффективность и масштабируемость управления переводами в приложении, обеспечивая динамическое переключение языков и синхронизацию состояний. Такая интеграция гарантирует, что языковые настройки сохраняются во всем приложении и их легко поддерживать, обеспечивая надежное решение для сложных задач интернационализации в современных веб-приложениях.

Работа с языками, использующими RTL справа налево (RTL)

Поддержка таких языков, как арабский и иврит, требует настройки макета и стилей вашего приложения. Атрибут dir в HTML может использоваться для задания направления текста.

Пример: Настройка направления RTL:

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

function App() {
  const { i18n } = useTranslation();

  useEffect(() => {
    document.documentElement.dir = i18n.dir();
  }, [i18n]);

  return (
    <div>
      <header>
        <h1>{i18n.t('welcome')}</h1>
      </header>
    </div>
  );
}

export default App;

Интернационализация приложения React включает в себя нечто большее, чем просто перевод текста. Это требует тщательного тестирования и отладки, оптимизации производительности и работы с такими сложными темами, как языки RTL и контекстно-зависимые переводы. Следуя рекомендациям и используя возможности библиотеки i18next, вы можете создать надежное, удобное в использовании многоязычное приложение, которое обеспечит отличный пользовательский опыт для глобальной аудитории.

Заключение

Успешная интернационализация приложения React требует пристального внимания к различным аспектам, от настройки и внедрения базовых переводов до работы с более сложными темами, такими как поддержка языка RTL, контекстно-зависимые переводы и интеграция с библиотеками управления состоянием. Благодаря тщательному тестированию и отладке, оптимизации производительности и использованию таких мощных инструментов, как i18next и Intel, разработчики могут создавать приложения, которые обеспечивают бесперебойную работу и соответствуют культурным особенностям пользователей. Такой комплексный подход гарантирует, что приложения не только доступны для глобальной аудитории, но и поддерживают высокие стандарты удобства использования и производительности, тем самым повышая удовлетворенность пользователей и их вовлеченность в различных регионах и на разных языках.


.

Tagged in :

, , , ,
Ishita Srivastava Avatar
Ishita Srivastava