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

  1. Установите библиотеку react-intl и создайте-реагируйте-приложение, выполнив следующую команду:
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/