Integration with i18n

package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
+    "react-intl": "^2.4.0",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.0"

src/Pages/Home.js

@@ -1,16 +1,25 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { textChange } from '../Actions';
+import { FormattedMessage } from 'react-intl'
 
 class Home extends Component {
   render() {
     let input
     return (
       <div>
         <h2>
-          Home Page
+          <FormattedMessage
+            id="Home.title"
+            defaultMessage="Home Page"
+          />
         </h2>
-        <div>Write a name and check it in SomePage Link</div>
+        <div>
+          <FormattedMessage
+            id="Home.input"
+            defaultMessage="Write a name and check it in SomePage Link"
+          />
+        </div>
         <input
           type="text"
           onChange={e =>
@@ -23,7 +32,11 @@ class Home extends Component {
           }}
         />
         <div>
-          You typed: {this.props.text}
+          <FormattedMessage
+            id="Home.stateText"
+            defaultMessage="You typed: {text}"
+            values={{text: <b>{this.props.text}</b>}}
+          />
         </div>
       </div>
     );

src/Translations/de.json

@@ -0,0 +1,5 @@
+{
+    "Home.title": "Startseite",
+    "Home.input": "Schreiben Sie einen Namen und überprüfen Sie es in SomePage Link.",
+    "Home.stateText": "Du hast getippt: {text}"
+}

src/Translations/en.json

@@ -0,0 +1,5 @@
+{
+    "Home.title": "Home Page (loaded from en.json)",
+    "Home.input": "Write a name and check it in SomePage Link.(loaded from en.json)",
+    "Home.stateText": "You typed: {text} (loaded from en.json)"
+}

src/index.js

@@ -6,14 +6,29 @@ import { createStore } from 'redux'
 import rootReducer from './Reducers'
 import App from './App';
 import { HashRouter } from 'react-router-dom'
+import { IntlProvider, addLocaleData } from 'react-intl';
+import locale_en from 'react-intl/locale-data/en';
+import locale_de from 'react-intl/locale-data/de';
+import messages_de from "./translations/de.json";
+import messages_en from "./translations/en.json";
+
+const messages = {
+    'de': messages_de,
+    'en': messages_en
+};
+
+addLocaleData([...locale_en, ...locale_de]);
+const language = navigator.language.split(/[-_]/)[0];  // language without region code
 
 const store = createStore(rootReducer)
 
 const render = () =>
   ReactDOM.render(
     <Provider store={store}>
       <HashRouter>
-        <App/>
+        <IntlProvider locale={language} messages={messages[language]}>
+          <App/>
+        </IntlProvider>
       </HashRouter>
     </Provider>,
     document.getElementById('index'));