react i18n_React i18n —如何使您的React应用程序国际化

react i18n

Internationalization is the process of making your website available in different locales. These locales can be US, UK, Germany, China, Arab, India. Translating your application to different locales involves several things such as translating text to their languages, changing the date, time and number formats, changing currencies, and many more. Therefore I decided to write a guide on how to localize a React application to different locales using two popular libraries, React-18next and React-intl.

国际化是使您的网站在不同的语言环境中可用的过程。 这些语言环境可以是美国，英国，德国，中国，阿拉伯，印度。 将您的应用程序转换为不同的语言环境涉及几件事，例如将文本转换为其语言，更改日期，时间和数字格式，更改币种等等。 因此，我决定编写一个指南，说明如何使用两个流行的库React-18next和React-intl将React应用程序本地化到不同的语言环境。

React-i18next (React-i18next)

Let’s first know about React-i18next. It is a powerful framework based on i18next which is used by many developers for the purpose of internationalization. React-i18next can be used to internationalize React and React-Native applications. Here are some interesting facts about React-i18next.

首先让我们了解一下React-i18next。 它是一个基于i18next的强大框架，许多开发人员都将其用于国际化。 React-i18next可用于国际化React和React-Native应用程序。 这是关于React-i18next的一些有趣的事实。

• It’s optimally suitable for server-side rendering.
  它最适合服务器端渲染。
• It includes multiple plugins that detect various languages load translations of multiple languages.
  它包含多个可检测各种语言的插件，可加载多种语言的翻译。
• You have the option to cache the translations.
  您可以选择缓存翻译。
• It’s more flexible than other i18n libraries when it comes to integration with other packages.
  与其他软件包集成时，它比其他i18n库更灵活。
• It’s based on i18next which is not limited to React. Hence learn once and use everywhere.
  它基于不限于React的i18next。 因此，只需学习一次即可在任何地方使用。

React-intl (React-intl)

React-intl uses context API to provide the language switch wrapper for the whole react application. We can also define default text if there is no language available or a certain file is missing. React-intl provides react components and API to translate dates, numbers, currencies, and strings including pluralization.

React-intl使用上下文API为整个React应用程序提供语言切换包装器。 如果没有可用的语言或缺少某个文件，我们还可以定义默认文本。 React-intl提供了React组件和API，可以转换日期，数字，货币和字符串(包括复数形式)。

When you are using React-intl, you have to pay attention to IntelProvider, InjectIntl, defineMessages, FormattedDate, FormattedTime, FormattedRelativeTime, FormattedNumber, FormattedPlural, and FormattedMessage.

使用React-intl时，必须注意IntelProvider，InjectIntl​​，defineMessages，FormattedDate，FormattedTime，FormattedRelativeTime，FormattedNumber，FormattedPlural和FormattedMessage。

使用独立组件构建 (Build with Independent Components)

Regardless of the way you implement your internationalization, make sure you pay special attention to your elementary components.

无论实现国际化的方式如何，请确保特别注意基本组成部分。

Build them as independent building blocks capable of supporting all relevant locales. You can also use tools like Bit (Github) to gradually push new reusable components to your own shared component collection (on Bit.dev).

将它们构建为能够支持所有相关区域设置的独立构建块。 您还可以使用Bit ( Github )之类的工具将新的可重用组件逐渐推送到您自己的共享组件集合(在Bit.dev上 )。

Independent components (managed by Bit) can be examined and tested for different locales and reused whenever they’re needed (instead of building near-duplicates to fit new locales, as you go)

可以检查和测试独立组件(由Bit管理)的不同区域设置，并在需要它们时重用(而不是构建几乎重复的组件以适应新的区域设置)

Example: browsing through shared components on Bit.dev