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

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

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

Прежде чем перейти к содержанию, позвольте нам иметь четкое представление о следующих темах.

Интернационализация

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

Что такое response-i18next?

Для начала давайте разберемся, что такое response-i18next. Это как раз мощный фреймворк, основанный на i18next, который многие разработчики используют для интернационализации. Это можно использовать в React и React-Native. Поскольку эта структура оптимальна, она лучше всего подходит для рендеринга на стороне сервера и включает в себя несколько компонентов, так что содержимое рендерится при изменении языков. Он предлагает полное решение для локализации продукта с Интернета на мобильные платформы и платформы веб-приложений.

Плюсы react-i18next

Он включает в себя несколько плагинов, которые определяют различные языки, удобны для пользователя и загружают переводы на несколько языков.

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

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

Это высокоэффективный и действенный интерфейс прикладного программного обеспечения.

Давайте разработаем приложение интернационализации React с хуками react-i18next и React

Суть документации

  • Создайте новое приложение React с помощью create-react-app
  • Выберите предпочтительные языки
  • английский
  • Сингальский
  • Тамильский
  • Установка response-i18n и других зависимостей
  • Создать провайдера
  • Сделайте жизнь проще с помощью оболочки FormattedMessage
  • Демо
  • Единичные тесты

Создайте новое приложение React

Давайте создадим приложение React с помощью диспетчера пакетов узлов (npm). Используйте следующую команду

npx create-react-app react-translation-app

вы можете использовать любое имя для приложения React.

После успешного создания приложения перейдите в папку проекта, т.е. приложение response-translation-app:

cd react-translation-app

Откройте проект в коде Visual Studio ( вы можете использовать любые другие редакторы)

Установка

Установим все необходимые для приложения зависимости. Используйте следующие команды и выполните.

npm install i18next react-i18next i18next-xhr-backend
npm install i18next-browser-languagedetector

Создайте файл JavaScript с именем i18next.js в папке src.

Откройте файл i18next.js и:

  • Импортируйте все необходимые модули, как указано ниже.
  • Теперь мы готовы инициализировать языки и другие функции.
  • Создайте массив языков, которые будут реализованы во всем приложении.
const Languages = [“en”, “sin”, “ta”];

Здесь мы использовали английский, сингальский и тамильский языки.

  • Создайте функцию экспорта по умолчанию как i18n
  • Добавьте следующий код

use (Backend): - определяет язык ввода пользователя.

use (LanguageDetector): - передача экземпляра i18n в модуль response-i18next

use (initReactI18next): - создание экземпляра i18next.

fallbackLng: «en»: - языком по умолчанию будет английский.

Откройте файл index.js и

  • Импортируйте файл i18next.js.
import “./i18next”;

Вот это точка входа

  • Давайте вставим функцию приостановки, предоставляемую React. Итак, импортируйте саспенс, как показано ниже
import React, { Suspense } from “react”;

Почему ожидание?

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

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

  • Давайте обернем тег ‹App /› с помощью response Suspense
<Suspense fallback={<div>Loading ……</div>}>
<App />
</Suspense>

Откройте файл App.js и:

  • Избавьтесь от кодов выхода, которые находятся в операторе возврата
  • Импортируйте функцию useTranslation из модуля response-i18n
import { useTranslation } from “react-i18next”;

Добавьте следующие фрагменты кода, которые должны отображаться в операторе возврата.

Инициализируйте функцию useTranslation в функции приложения

const { t, i18n } = useTranslation();

Обычно он получает t как функцию и экземпляр i18n

  • Определим функцию handleClick
function handleClick(lang) {
     i18n.changeLanguage(lang);
}

Давайте определим целевые языки.

Откройте общую папку и создайте в возвращаемой папке с именем locales.

Откройте каталог locales и создайте три каталога как en, sin и ta соответственно.

Убедитесь, что имя, указанное в каталогах, должно быть таким же, как в файле i18next.js, как указано ниже:

const Languages = [“en”, “sin”, “ta”];

Давайте создадим файл JSON для каждого каталога, то есть каталогов en, sin и ta.

Назовите файл json как translation.json.

Откройте файл json в каталоге en и добавьте наши настраиваемые коды, как показано ниже:

Мы можем использовать любую информацию, которая может быть предоставлена

Точно так же откройте файл json в каталоге sin и добавьте следующие фрагменты кода:

В конце концов, вставьте следующее в файл json в каталоге ta:

Теперь давайте запустим приложение React.

npm start serve

И готово!

Подход для нескольких пространств имен в языке с использованием React и response-i18next

Давайте посмотрим, есть ли несколько пространств имен перевода для языка, упомянутого ниже.

Включите текст во вновь созданные файлы json:

ru / responseworld.json

{
      “title”: “This is a basic example in english”
}

sin / reactworld.json

{
      “title”: “This is a basic example in sinhala”
}

ta / responseworld.json

{
       “title”: “This is a basic example in tamil”
}

Вы можете объединить свои примеры в вышеупомянутые файлы.

Локализуйте изображения с помощью response-i18n и кеширования

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

Перейдем к содержанию.

Как и в приведенных выше примерах, давайте пропустим установку и другие зависимости импорта. Некоторые файлы и компоненты остаются без изменений.

Определите следующее в файле i18n.js

const fallbackLng = [‘en’];

Если нет доступного языка. Мы будем использовать только английский язык

const availableLanguages = [‘en’, sin, ‘ta’];

Здесь нам нужно указать доступные языки, которые используются для перевода.

Добавьте следующий код:

checkWhitelist: true

Обнаруживать только доступные языки в белом списке.

Мы успешно определили все функции в файле i18n.js.

Создайте актив каталога в папке src, затем обязательно добавьте три изображения в папку изображений, которая будет в каталоге ресурсов.

Команда React рекомендует добавлять изображения в каталог src, а не в общую папку.

Почему это рекомендуется?

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

Откройте файл App.js и:

  • Избавьтесь от кодов выхода, которые находятся в операторе возврата
  • Импортируйте функцию useTranslation из модуля response-i18n
import { useTranslation } from “react-i18next”;
  • Импортируйте следующие модули, необходимые для приложения React
import i18next from “./i18n/i18next”;
import imgEng from “./assets/images/1.jpg”;
import imgSin from “./assets/images/2.jpg”;
import imgTa from “./assets/images/3.jpg”;
  • Инициализируйте функцию useTranslation в функции приложения
const { t } = useTranslation();

Обычно он получает t как функцию и экземпляр i18n

  • Определим функцию handleClick
function handleClick(lang) {
        i18next.changeLanguage(lang);
}

Добавьте следующие фрагменты кода, которые должны отображаться в операторе возврата.

Давайте определим целевые языки.

Откройте общую папку и создайте в возвращаемой папке с именем locales.

Откройте каталог locales и создайте три каталога как en, sin и ta соответственно.

Убедитесь, что имя, указанное в каталогах, должно быть таким же, как в файле i18next.js, как указано ниже.

const Languages ​​= [«en», «sin», «ta»];

Давайте создадим файл JSON в каждом каталоге, то есть каталогах en, sin и ta.

Назовите файл json как translation.json.

Откройте файл json в каталоге en и добавьте наши настраиваемые коды, как показано ниже.

{
"Wish": {
    "text": "Thank you"
  },
"Message": {
    "text": "for Reading this article"
  }
}

Мы можем использовать любую информацию, которая может быть предоставлена.

Точно так же откройте файл json в каталоге sin и добавьте следующие фрагменты кода:

{
"Wish": {
      "text": "මෙම ලිපිය කියවීමට"
  },
"Message": {
     "text": "ස්තූතියි"
  }
}

В конце концов, вставьте следующее в файл json в каталоге ta:

{
"Wish": {
    "text": "இந்த கட்டுரையைப் படித்ததற்கு"
  },
"Message": {
    "text": "நன்றி"
  }
}

Теперь давайте запустим приложение React.

npm start serve

И готово!