Added i18n example

public/locales/translationsAR.json

+{
+  "EntangledAfrica1": "‫املرتابطة‬ ‫أفريقيا‬",
+  "EntangledAfrica2": "...... ca.‬‬ ‫‪6.000‬‬ ‫‪-‬‬ ‫‪500‬‬ ‫‪BP‬‬"
+}
\ No newline at end of file

public/locales/translationsDE.json

+{
+"EntangledAfrica1": "Entangled Africa",
+"EntangledAfrica2": "Innerafrikanische Beziehungen zwischen Regenwald und Mittelmeer, ca. 6.000 - 500 Jahre vor heute"
+}
\ No newline at end of file

public/locales/translationsEN.json

+{
+"EntangledAfrica1": "Entangled Africa",
+"EntangledAfrica2": "Intra-African relations between rain forest and Mediterranean, ca. 6.000 - 500 BP"
+}
\ No newline at end of file

public/locales/translationsFR.json

+{
+"EntangledAfrica1": "Entangled Africa",
+"EntangledAfrica2": "Les relations interafricaines entre la forêt subsaharienne et la Méditerranée, ca. 6.000 - 500 ans avant aujourd‘hui"
+}
\ No newline at end of file

src/components/OurFirstComponentWithAllRelatedFiles/Headings.jsx

+import React from 'react';
+
+// the hook
+import { useTranslation } from 'react-i18next';
+
+export const Headings = () => {
+    const { t, i18n } = useTranslation();
+    return([
+        <h1>{t('EntangledAfrica1')}</h1>,
+        <h2>{t('EntangledAfrica2')}</h2>
+    ])
+};
\ No newline at end of file

src/components/index.js

 //this index.js exports all components from the sub folders
 //by doing this all components can be imported from './components/';
 //named exports are used instead of default export; thus imports need to be destructured
-export { HelloComputerButton } from './HelloComputerButton/HelloComputerButton';
\ No newline at end of file
+export { HelloComputerButton } from './HelloComputerButton/HelloComputerButton';
+export { Headings } from './OurFirstComponentWithAllRelatedFiles/Headings';
\ No newline at end of file

src/index.js

 import React, { useState, useContext } from 'react';
 import ReactDOM from 'react-dom';
 import { HelloComputerButton } from './components/';
+import { Headings } from './components/';
 import { LabelsContext, SettingsContext } from './Contexts';
 import { INIT_LABELS, INIT_SETTINGS } from "./INIT_VALUES";
 import './index.css';
+import './i18n';
+import { useTranslation } from 'react-i18next';
 
 const App = () => {
 
+    const { t, i18n } = useTranslation();
+
+    const changeLanguage = lng => {
+        i18n.changeLanguage(lng);
+    };
+
     const [labels, setLabels] = useState(INIT_LABELS);
     const [settings, setSettings] = useState(INIT_SETTINGS);
 
@@ -23,10 +32,15 @@ const App = () => {
             default:
                 console.log("How did we even get here?");
         }
-    }
+    };
 
     return(
         <LabelsContext.Provider value={labels} ><SettingsContext.Provider value={settings}>
+            <button onClick={() => changeLanguage('de')}>Deutsch</button>
+            <button onClick={() => changeLanguage('en')}>English</button>
+            <button onClick={() => changeLanguage('fr')}>Français</button>
+            <button onClick={() => changeLanguage('ar')}>لعربية</button>
+            <Headings />
             <div>
                 <span>{labels.HelloWorld[settings.language]}</span><br />
                 <HelloComputerButton />
@@ -37,4 +51,4 @@ const App = () => {
         );
     };
 
-ReactDOM.render(<App />, document.getElementById('app' ))
\ No newline at end of file
+ReactDOM.render(<App />, document.getElementById('app' ));
\ No newline at end of file