Если веб-сайт собираются посещать люди разных национальностей, обязательно нужно вывести веб-сайт на новый уровень и сделать его доступным на большем количестве языков.
Вот почему в этой статье мне очень приятно обсудить тему, называемую интернационализацией.
Давайте рассмотрим веб-сайт на английском языке, и мы должны сделать его доступным и на португальском языке. Нам нужно подготовить необходимые переводы. Теперь требуется дать им возможность писать текст на родном для них языке.
Прежде чем перейти к содержанию, позвольте нам иметь четкое представление о следующих темах.
Интернационализация
Это процесс, в котором приложение разрабатывается таким образом, что его можно адаптировать к нескольким языкам и регионам без технических изменений.
Что такое 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
И готово!