Локализация приложений React с i18next

Благодаря интернету, стирающему географические границы, веб-разработчики имеют возможность распространять свои приложения по всему миру. Однако тут возникает проблема – интернационализация.

Как быстро и эффективно перевести приложение на другие языки?

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

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

Начнем с разворачивания нового React-проекта для демонстрации:

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

и запустите следующую команду:

Все подготовительные работы выполнены. Можно добавлять интернационализацию.

Конфигурация i18next

Для начала создадим конфигурационный файл i18n.js . Положите его рядом с корневым файлом index.js .

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

Теперь импортируем файл конфигурации в index.js :

Плагин react i18next включен и готов к использованию. Следующий шаг – подключение нужных языков.

Подключение локалей

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

В директорию /public нужно добавить новую папку locales . Для каждого языка будет создана своя подпапка: /en и /ru – в каждой из них json-файл translation.json с переводами.

Файл для английского языка:

Файл для русского языка:

Структура папок с локалями:

Локализация приложений React с i18next

Теперь выведем информацию на домашней странице приложения.

Настройка App.js

Откройте файл App.js и замените его автоматически сгенерированное содержимое на следующее:

Давайте разберемся, что здесь происходит.

Хук useTranslation

Импортируем хук useTranslation плагина i18next:

и подключаем его в коде приложения:

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

Вывод контента

Теперь нужно просто вызвать эту функцию в нужном месте, передав ей идентификатор из файла локали:

Все предельно просто!

Добавим еще две кнопки для переключения языка в реальном времени:

Интернационализация в действии

Если вы все сделали правильно, то магия должна свершиться – перевод выполняется прямо во время работы приложения.

Вы пропустили

AEGIS Algorithms Android Angular Apache Airflow Apache Druid Apache Flink Apache Spark API API Canvas AppSec Architecture Artificial Intelligence Astro Authentication Authorization AutoGPT AWS AWS Aurora AWS Boto3 AWS EC2 AWS Lambda Azure Babylon.js Backend bash Beautiful Soup Bento UI Big Data Binary Tree Browser API Bun Career Cassandra Charts ChatGPT Chrome Extension Clean Code CLI ClickHouse Coding Codux Combine Compose Computer Context Fusion Copilot Cosmo Route CProgramming cron Cryptography CSS CTF Cypress DALL-E Data Analysis Data science Database dbt dbt Cloud deno Design Design Patterns Detekt Development Distributed Systems Django Docker Docker Hub Drizzle DRY DuckDB Express FastAPI Flask Flutter For Beginners Front End Development Game Development GCN GCP Geospatial Git GitHub Actions GitHub Pages Gitlab GMS GoFr Golang Google Google Sheets Google Wire GPT-3 GPT3 Gradio Gradle Grafana Graphic Design GraphQL gRPC Guidance HMS Hotwire HTML Huawei HuggingFace IndexedDB InfoSec Interview iOS Jackknife Java JavaScript Jetpack Compose JSON Kafka Kotlin Kubernetes LangChain Laravel Linux LlaMA LLM localStorage Logging Machine Learning Magento Math Mermaid Micro Frontends Mobile Mobile App Development mondayDB MongoDB Mongoose MySQL Naming NestJS NET NetMock Networks NextJS NLP Node.js Nodejs NoSQL NPM OOP OpenAI OTP Pandas PDF PHP Playwright Plotly Polars PostgreSQL Prefect Productivity Programming Prometheus Puppeteer Pushover Python Pytorch Quarkus Rabbitmq RAG Ramda Raspberry Pi React React Native Reactor Redis REST API Revolut Riverpod RProgramming Ruby Ruby on Rails Rust Scalene SCDB ScyllaDB Selenium Servers Sklearn SLO SnowFlake Snowkase Software Architecture Software Development Solara Solid Spring Boot SQL SQLite Streamlit SudoLang Supabase Swift SwiftUI Tailwind CSS Taipy Terraform Testing Transformers TURN TypeScript Ubuntu UI Design Unix UX UX Design Vim Vite VSCode Vue Web Architecture Web Components Web Development Web Frameworks Web Scraping Web-разработка Webassembly Websocket Whisper Widgets WordPress YAML YouTube Zed Наука о данных Разное Тренды

Как исследовать и визуализировать данные МО для обнаружения объектов на изображениях