Как настроить интернационализацию в React приложении?

Question

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

YeaHub · Accepted Answer

Интернационализация (i18n) — это процесс адаптации приложения к разным языкам и культурным особенностям, что позволяет пользователям взаимодействовать с приложением на своем языке. В React-приложениях этот процесс можно упростить с помощью библиотеки react-i18next, которая интегрируется с i18next, популярной библиотекой для интернационализации.Установка: Для начала нужно установить необходимые пакеты:npm install react-i18next i18nextНастройка i18next: Создайте файл конфигурации, чтобы настроить i18next и добавить переводы. Например, создайте i18n.js:import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; i18n .use(initReactI18next) .init({ resources: { en: { translation: { welcome: "Welcome", }, }, ru: { translation: { welcome: "Добро пожаловать", }, }, }, lng: "en", // язык по умолчанию fallbackLng: "en", // язык, если перевод не найден interpolation: { escapeValue: false, // не нужно экранирование для React }, }); export default i18n;Использование в приложении: Включите конфигурацию в корневой компонент вашего приложения, чтобы инициализировать интернационализацию:import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './i18n'; // импортируйте конфигурацию ReactDOM.render(, document.getElementById('root'));Отображение переведенных строк: Теперь вы можете использовать хук useTranslation, чтобы получать переведенные строки в ваших компонентах:import React from 'react'; import { useTranslation } from 'react-i18next'; const Welcome = () => { const { t } = useTranslation(); return

{t('welcome')}

; }; export default Welcome;Смена языка: Чтобы пользователи могли менять язык, добавьте функцию для изменения текущего языка:const changeLanguage = (lng) => { i18n.changeLanguage(lng); };В результате ваш React-приложение будет поддерживать интернационализацию, позволяя пользователям выбирать язык, и предоставляя переведенные строки в зависимости от выбранного языка. Это улучшает пользовательский опыт и делает приложение более доступным для широкой аудитории.