React: How to implement i18n (internationalization) in React?

1import i18n from "i18next";
2import { initReactI18next } from "react-i18next";
3import en from "./locales/en.json";
4import ru from "./locales/ru.json";
5
6i18n.use(initReactI18next).init({
7  resources: {
8    en: { translation: en },
9    ru: { translation: ru },
10  },
11  lng: "en",
12  fallbackLng: "en",
13});
14
15// Component
16import { useTranslation } from "react-i18next";
17
18function App() {
19  const { t, i18n } = useTranslation();
20
21  const toggleLanguage = () => {
22    i18n.changeLanguage(i18n.language === "en" ? "ru" : "en");
23  };
24
25  return (
26    <div>
27      <h1>{t("welcome")}</h1>
28      <p>{t("description")}</p>
29      <button onClick={toggleLanguage}>
30        {i18n.language === "en" ? "RU" : "EN"}
31      </button>
32    </div>
33  );
34}

1// en.json
2{
3  "welcome": "Welcome",
4  "description": "This is a multi-language app",
5  "items": "{{count}} items"
6}
7
8// ru.json
9{
10  "welcome": "Добро пожаловать",
11  "description": "Это многоязычное приложение",
12  "items": "{{count}} элементов"
13}

1{t("items", { count: 5 })}
2// "5 items" in English
3// "5 элементов" in Russian

1{t("greeting", { name: "Alice" })}
2// "Hello, Alice!"