react-i18next-tutorial: https://bigcheeseapp.com/2020/06/28/translate-your-react-app-with-react-i18next/

2-App.js

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';

import './i18n.config';

const App = () => {
  /**
   * Use useTranslation hooks
   */
  const { t } = useTranslation();
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const handleLanguageSelect = (event) => {
    setSelectedLanguage(event.target.value);
  }

  return (
    <div>
      <label>
        English
        <input
          type="radio"
          value="en"
          checked={selectedLanguage === 'en'}
          onClick={handleLanguageSelect}
        />
      </label>
      <label>
        中文
        <input
          type="radio"
          value="zh"
          checked={selectedLanguage === 'zh'}
          onClick={handleLanguageSelect}
        />
      </label>
      <p>Your selected language is: {selectedLanguage} </p>
      <p>Your have switch language for 0 times</p>
      {/**
        * Use the key in the language file to get the translated text
        */}
      <p>{t('welcome')}</p>
    </div>
  );
}

export default App;

2-en.json

{
  "selectedLanguage": "Your selected language is: {{language}}", 
  "welcome": "Welcome to the world of wonder"
}

2-i18n.config.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './en.json';
import zh from './zh.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: en,
      },
      zh: {
        translation: zh
      },
    },
    fallbackLng: "en",

    interpolation: {
      escapeValue: false,
      /**
       * Add interpolation format method to customize the formatting
       */
      format: (value, format, lng) => {
        if (format === 'uppercase') {
          return value.toUpperCase();
        }

        return value;
      }
    }
  });

2-zh.json

{
  "selectedLanguage": "您选择的语言是: {{language}}",
  "welcome": "欢迎来到奇幻的世界"
}

3-App.js

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
/**
 * Import i18next
 */
import i18next from 'i18next';

import './i18n.config';

const App = () => {
  const { t } = useTranslation();
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const handleLanguageSelect = (event) => {
    setSelectedLanguage(event.target.value);
    /**
     * Set the language to either en or zh
     */
    i18next.changeLanguage(event.target.value);
  }

  return (
    <div>
      <label>
        English
        <input
          type="radio"
          value="en"
          checked={selectedLanguage === 'en'}
          onClick={handleLanguageSelect}
        />
      </label>
      <label>
        中文
        <input
          type="radio"
          value="zh"
          checked={selectedLanguage === 'zh'}
          onClick={handleLanguageSelect}
        />
      </label>
      <p>Your selected language is: {selectedLanguage} </p>
      <p>Your have switch language for 0 times</p>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default App;

3-en.json

{
  "selectedLanguage": "Your selected language is: {{language}}",
  "numOfTimesSwitchingLanguage": "Your have switch language for {{count}} time",
  "numOfTimesSwitchingLanguage_plural": "Your have switch language for {{count}} times",
  "welcome": "Welcome to the world of wonder"
}

3-zh.json

{
  "selectedLanguage": "您选择的语言是: {{language}}",
  "numOfTimesSwitchingLanguage": "您已更换了语言{{count}}次",
  "numOfTimesSwitchingLanguage_plural": "您已更换了语言{{count}}次",
  "welcome": "欢迎来到奇幻的世界"
}

4-App.js

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';

import './i18n.config';

const App = () => {
  const { t } = useTranslation();
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const handleLanguageSelect = (event) => {
    setSelectedLanguage(event.target.value);
    i18next.changeLanguage(event.target.value);
  }

  return (
    <div>
      <label>
        English
        <input
          type="radio"
          value="en"
          checked={selectedLanguage === 'en'}
          onClick={handleLanguageSelect}
        />
      </label>
      <label>
        中文
        <input
          type="radio"
          value="zh"
          checked={selectedLanguage === 'zh'}
          onClick={handleLanguageSelect}
        />
      </label>
      {/**
       * Change the translated text and pass the data as second argument
       */}
      <p>{t('selectedLanguage', { language: selectedLanguage })}</p>
      <p>Your have switch language for 0 times</p>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default App;

4-en.json

{
  "selectedLanguage": "Your selected language is: {{language, uppercase}}",
  "numOfTimesSwitchingLanguage": "Your have switch language for {{count}} time",
  "numOfTimesSwitchingLanguage_plural": "Your have switch language for {{count}} times",
  "welcome": "Welcome to the world of wonder"
}

4-zh.json

{
  "selectedLanguage": "您选择的语言是: {{language, uppercase}}",
  "numOfTimesSwitchingLanguage": "您已更换了语言{{count}}次",
  "numOfTimesSwitchingLanguage_plural": "您已更换了语言{{count}}次",
  "welcome": "欢迎来到奇幻的世界"
}

5-App.js

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import i18next from 'i18next';

import './i18n.config';

const App = () => {
  const { t } = useTranslation();
  /**
   * Create a count state
   */
  const [count, setCount] = useState(0);
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const handleLanguageSelect = (event) => {
    setSelectedLanguage(event.target.value);
    i18next.changeLanguage(event.target.value);
    /**
     * Increment count whenever we change language
     */
    setCount(count + 1);
  }

  return (
    <div>
      <label>
        English
        <input
          type="radio"
          value="en"
          checked={selectedLanguage === 'en'}
          onClick={handleLanguageSelect}
        />
      </label>
      <label>
        中文
        <input
          type="radio"
          value="zh"
          checked={selectedLanguage === 'zh'}
          onClick={handleLanguageSelect}
        />
      </label>
      <p>{t('selectedLanguage', { language: selectedLanguage })}</p>
      {/**
       * Pass in count as data
       */}
      <p>{t('numOfTimesSwitchingLanguage', { count })}</p>
      <p>{t('welcome')}</p>
    </div>
  );
}

export default App;

App.js

import React, { useState } from 'react';
/** Import the config that just created */
import './i18n.config';

const App = () => {
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const handleLanguageSelect = (event) => {
    setSelectedLanguage(event.target.value);
  }

  return (
    <div>
      <label>
        English
        <input
          type="radio"
          value="en"
          checked={selectedLanguage === 'en'}
          onClick={handleLanguageSelect}
        />
      </label>
      <label>
        中文
        <input
          type="radio"
          value="zh"
          checked={selectedLanguage === 'zh'}
          onClick={handleLanguageSelect}
        />
      </label>
      <p>Your selected language is: {selectedLanguage} </p>
      <p>Your have switch language for 0 times</p>
      <p>Welcome to the world of wonder</p>
    </div>
  );
}

export default App;

en.json

{
  "welcome": "Welcome to the world of wonder"
}

i18n.config.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './en.json';
import zh from './zh.json';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {
      en: {
        translation: en, // Add translation for English
      },
      zh: {
        translation: zh, // Add translation for Chinese
      },
    },
    fallbackLng: "en",
    interpolation: {
      escapeValue: false // No need to escape for react
    }
  });

zh.json

{
  "welcome": "欢迎来到奇幻的世界"
}