i18n: локализация и мультиязычность на вашем сайте

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

Для реализации i18n в веб-приложении используются специальные библиотеки и инструменты. Одним из наиболее популярных инструментов для i18n является библиотека React-Intl.

Рассмотрим пример использования библиотеки React-Intl для локализации веб-сайта на английский и русский языки. Для начала необходимо установить библиотеку:

npm install react-intl --save

Затем необходимо создать файл с локализационными данными (например, messages.js):

const messages = {
    en: {
        greeting: 'Hello, World!'
    },
    ru: {
        greeting: 'Привет, мир!'
    }
};
export default messages;

Далее необходимо настроить компонент IntlProvider, который будет оборачивать корневой компонент приложения и предоставлять локализационные данные. Компонент должен быть настроен на текущий выбранный язык.

import React from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider } from 'react-intl';
import messages from './messages';
const language = navigator.language.split(/[-_]/)[0]; // выбор языка из настроек браузера
const localizedMessages = messages[language] || messages.en; // если локализационный файл для выбранного языка не найден, используется файл для английского языка
ReactDOM.render(
    
        
    ,
    document.getElementById('root')
);

Теперь можно использовать локализационные данные в компонентах приложения. Для этого необходимо использовать компонент форматирования сообщений MessageFormat:

import React from 'react';
import { FormattedMessage } from 'react-intl';
const Greeting = () => {
    return (
        

            
        
    );
};
export default Greeting;

Компонент FormattedMessage будет отображать сообщение с идентификатором, соответствующим определенному локализационному сообщению в файле messages.js.

Однако, чтобы использование библиотеки React-Intl было полностью эффективным, каждый текст в приложении должен быть обернут в компонент FormattedMessage. Это может показаться избыточным, но это обеспечит полную локализацию приложения.