egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Добавляем интернационализацию (i18n) в React app с React Intl
Add Internationalization (i18n) to a React app using React Intl
★5 (всего оценок - 22)
Продолжительность
0 ч 38 мин
Категория
React.jsКоличество уроков
11 Видео
Дата добавления
11 янв. 2018 г., 19:31
Язык
Английский
Дата выхода
4 июл. 2017 г., 00:00
Дата обновления
28 апр. 2026 г., 23:05
Интернационализация (i18n) в React — один из ключевых шагов для масштабируемости и удобства использования приложения. В этом материале мы разберём, как эффективно внедрить react-intl в проект на базе create-react-app и react-router, оптимизируя структуру контента и улучшая качество кода.
Зачем использовать react-intl в React‑приложении
Библиотека react-intl делает работу с i18n проще и надёжнее. Она предоставляет готовые инструменты для:
- форматирования строк, дат и чисел;
- организации централизованных языковых файлов;
- повторного использования контента в разных частях приложения;
- поддержки нескольких локалей без ручного дублирования данных.
Если вам знаком подход с языковыми файлами в Rails (например, yml), то структура react-intl покажется интуитивной.
Начальная настройка и интеграция react-intl
Курс начинается с настройки среды проекта. Мы добавим необходимые компоненты и структуры данных, обеспечивающие корректную работу react-intl уже на входе в приложение.
Подключение к структуре приложения
Вы научитесь интегрировать провайдеры локализации, организовывать файлы переводов и подключать их к маршрутам react-router.
Создание и управление локалями
Мы рассмотрим удобные подходы к хранению языковых файлов и переключению локалей без перезагрузки приложения.
Форматирование данных с помощью react-intl
Важная часть курса — практическое использование компонентов библиотеки:
- форматирование строк — динамические сообщения, вставка переменных;
- форматирование дат — локализованные форматы времени и календарей;
- форматирование чисел — валюты, проценты, единицы измерения.
Лучшие практики использования
Вы узнаете, как избегать дублирования ключей и поддерживать единый стиль в интерфейсе.
Тестирование компонентов с react-intl
Помимо реализации, курс охватывает и тестирование. Мы будем использовать Jest и Enzyme для создания надёжных тестов компонентов, работающих с локализацией.
Обёртки и тестовые провайдеры
Разберём, как правильно конфигурировать тестовое окружение, чтобы компоненты с локализованными данными корректно рендерились.
Полезные ресурсы и репозиторий
Вы можете ознакомиться с кодом уроков в репозитории:
- Урок 1.00:04:22Install and Configure the Entry Point of react-intl
- Урок 2.00:04:12Convert a Hard Coded String using react-intl FormattedMessage
- Урок 3.00:03:36Render Content with Placeholders using react-intl FormattedMessage
- Урок 4.00:01:21Render Content with Markup Using react-intl FormattedHTMLMessage
- Урок 5.00:02:22Format Date and Time Using react-intl FormattedDate and FormattedTime
- Урок 6.00:02:12Format a Date Relative to the Current Date Using react-intl FormattedRelative
- Урок 7.00:02:29Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- Урок 8.00:03:37Render Content Based on a Number using react-intl FormattedMessage
- Урок 9.00:03:33Use a react-intl Higher Order Component to format messages and get current locale
- Урок 10.00:07:31Write tests for react-intl output using enzyme and Jest
- Урок 11.00:03:11Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers
Автор - egghead
Комментарии