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