This page is meant to gather some tips for the development of the DatafariUI web app based on React.

i18n management

The library i18next is used to manage the translation key, translation file loading and management etc.

Basics

The “t” function is used to signify anything that must be translated and the argument of the function is used as the default display text if the key is not defined in the translation file. If a key is not translated in a language, English should be used as a default fallback.

...

import React from 'react';

import { useTranslation } from 'react-i18next';

const TestComponent = () => {
  const { t } = useTranslation();

  return (
    <div>{t('Hello World')}</div>
  )
};

export default TestComponent;

Localization files

Locales files are located in the files public/locales/{localeid}/translation.json where {localeid} is the name of any locale (it, fr, en, …). Files look like this:

...

"Results {{ start }} - {{ end }} of {{ total }}": "Resultats {{ start }} - {{ end }} de {{ total }}",

Automatic extraction of keys from code files

Thanks to the babel-plugin-i18next-extract plugin, it is possible to automatically extract the translation keys from the code. To do so, run the following command from the root folder of the project:

...

Translating a new string

Let say we want to add the String “Welcome to Datafari” in the top menu of DatafariUI. We also want this String to be translated to French and German if those are the selected languages, else it should appear in English.

...

1. Modify the top bar component to add the String calling the translation function

2. Adding the translations to the French and German localization files

3. Compiling DatafariUI

Modifying the top bar component

The top bar component is defined in src/Components/TopMenu/TopMenu.js.

...

Adding the translations to the localization files

The function argument is the English version of the text, so adding a translation to the English localization file is not necessary. However, it is still a good habit to create it. We will also add the French and German translations.

...

  "less than a month": "Weniger als 1 Monat",
  "less than a year": "Weniger als 1 Jahr",
  "less than five years": "Weniger als 5 Jahre",
  "Welcome to Datafari": "Willkommen bei Datafari"
}

Building the project and deploying

You can then build DatafariUI (React datafariUI: build, deploy and dev setups ) and deploy it with the new translated String.

Modifying a translated String in a deployed DatafariUI instance

If String already translated in DatafariUI end up being wrong for some reason, it is possible to correct them without rebuilding and deploying DatafariUI all over again.

...