React-приложение с интернационализацией

Чтобы создать новое React-приложение с поддержкой интернационализации с помощью react-intl, вы можете выполнить следующие шаги

1. Установите библиотеку react-intl и create-react-app, выполнив следующую команду:

npm install react-intl create-react-app

2. Создайте новое React-приложение с помощью create-react-app:

npx create-react-app my-app

3. Перейдите в каталог проекта:

cd my-app

4. Добавьте библиотеку react-intl в свой проект, выполнив следующую команду:

npm install react-intl

5. Создайте папку для ваших переводов, например src/translations.

6. Создайте файл перевода для каждого языка, который будет поддерживать ваше приложение. Например, src/translations/en.json для английского языка и src/translations/fr.json для французского.

7. Определите свои переводы в каждом файле, используя следующий формат:

{
  "greeting": "Hello, World!",
  "goodbye": "Goodbye, World!"
}

8. В своем компоненте React импортируйте компонент FormattedMessage из react-intl и используйте его для рендеринга перевода для определенного сообщения.

import React from 'react';
import { FormattedMessage } from 'react-intl';

function App() {
  return (
    <div>
      <FormattedMessage id="greeting" defaultMessage="Hello, World!" />
    </div>
  );
}

9. Для переключения между языками вы можете использовать компонент IntlProvider, предоставленный react-intl, и передать в качестве реквизитов соответствующий файл перевода и локаль.

import React from 'react';
import { IntlProvider } from 'react-intl';
import en from './translations/en.json';
import fr from './translations/fr.json';

function App() {
  const [locale, setLocale] = useState('en');
  const messages = locale === 'en' ? en : fr;

  return (
    <IntlProvider locale={locale} messages={messages}>
      {/* The rest of your application goes here */}
      <button onClick={() => setLocale(locale === 'en' ? 'fr' : 'en')}>
        Toggle Language
      </button>
    </IntlProvider>
  );
}

Для получения дополнительной информации о том, как использовать react-intl, вы можете обратиться к документации: https://formatjs.io/docs/react-intl/