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-extractplugin, 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:

...