i18n learning

This can be understood as a translation plug-in that can make page documents appear in multiple languages.

According to the official website document, take a look at it first.

Install

npm install react-i18next i18next --save

Configure the next step

Create a new folder i18n.js next to index.js

import i18n from "i18next";
//这个东西是很重要的
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
  en: {
    translation: {
      "Welcome to React": "Welcome to React and react-i18next"
    }
  },
  fr: {
    translation: {
      "Welcome to React": "Bienvenue à React et react-i18next"
    }
  }
};

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources,
    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
    // if you're using a language detector, do not define the lng option

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

  export default i18n;

First explain the meaning of this file

From top to bottom, first introduce the required content, one is i18next, and the other is react-i18next

The following are the two translation schemes

One is the translation scheme called en, which corresponds to the translation scheme called fr (the latter should be French in the document)

There is a sentence in each of these two schemes. The text content of the sentence that appears on the left is exactly the same.

Then the corresponding following sentence is the content of our final translation.

Next there is one called i18n, which is responsible for the final assembly logic

Move the specific conversion content to the json file. Then export to the outermost, so that the code and plug-ins can be managed
separately

The above part is roughly composed of the upper and lower sections.

resources is to define which texts are replaced with which languages ​​at that time

The constant of resources, the structure inside is like this
en: {     translation: {         "Text 1": "Text 2"     }    

}，

fr: {     transition: {         "text3": "text4"     } }




 

Obviously this is divided into two types. Like the words in this project, one is in English and the other is in traditional Chinese

Look at the index file of i18n in this project

export const i18nResources = {
  EN: 'EN',
  TW: '繁'
}

i18n.use(initReactI18next).init({
  resources: { [i18nResources.EN]: { translation: enUsTrans }, [i18nResources.TW]: { translation: zhTwTrans } },
  fallbackLng: i18nResources.EN,
  debug: false,
  interpolation: { escapeValue: false }
})

Similar to the structure of the above example

Both enUsTrans and zhTwTrans here are imported from other pages, and there are many fields that need to be translated

probably like this

{
  "menu_farm": "SOSO農場",
  "menu_game": "遊戲",
  "menu_nft": "NFT市場",
    ...
}

This is a part of zhTwTrans , enUsTrans structure is similar, but in English

Take a look at some of the content of the project

There are main contents in resources, i18n.init ({resources})
in the above i18n.use (initReactI18next) function is to transfer i18n to react-i18next

 interpolation: {
      escapeValue: false, 
    },

This seems to prevent xss attacks?

  fallbackLng: i18nResources.EN,

This should refer to the default language

Just get here first, the main thing is to know a little bit first, don’t worry about other APIs hh