adding translation example for i18n

src/js/README.md

@@ -12,4 +12,5 @@ __BUT__ before you start developing a real large scale project, please do ask yo
 If you read to this point, I assumed you are a very serious developer, please help me to read the following links if you haven't!
 
 [SOLID JavaScript](http://aspiringcraftsman.com/2011/12/08/solid-javascript-single-responsibility-principle/)
+
 [Twelve Factor App](https://12factor.net/)

src/js/Root.jsx

@@ -1,13 +1,14 @@
-import React, { Component } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { Provider } from 'react-redux'
 // You could use BrowserRoute or HashRoute
 // But passing in history directly to Route will
 // give your app more flexibility on deeper integration of `history`
 import { Router } from 'react-router-dom'
-import { IntlProvider } from 'react-intl'
 
-export default class Root extends Component {
+import I18NProvider from 'common/components/Utilities/I18NProvider'
+
+export default class Root extends React.PureComponent {
   get content() {
     const { routes, history } = this.props
 
@@ -18,9 +19,9 @@ export default class Root extends Component {
     const { store } = this.props
 
     return (
-      <IntlProvider locale="en">
+      <I18NProvider>
         <Provider store={store}>{this.content}</Provider>
-      </IntlProvider>
+      </I18NProvider>
     )
   }
 }

src/js/common/components/Utilities/I18NProvider.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { IntlProvider, addLocaleData } from 'react-intl'
+
+// This is react-intl locale data
+import en from 'react-intl/locale-data/en'
+
+// This is your translation files
+// In case you are curious about locale - https://gist.github.com/jacobbubu/1836273
+import enUS from 'common/translations/en-US.json'
+
+// We are adding english here
+addLocaleData([...en]);
+
+// Creating a map of supported messages
+// It will be used in IntlProvider below
+const messages = {
+  'en-US': enUS,
+}
+
+export default class I18NProvider extends React.PureComponent {
+  static propTypes = {
+    children: PropTypes.element.isRequired,
+  }
+
+  render() {
+    // query the browser for language / locale
+    // feel free to modify this logic to fit your need
+    const language = navigator.language.split(/[-_]/)[0];
+    const locale = navigator.language;
+
+    const { children } = this.props
+
+    return (
+      <IntlProvider locale={language} messages={messages[locale]}>
+        { children }
+      </IntlProvider>
+    )
+  }
+}

src/js/common/translations/en-US.json

@@ -0,0 +1,3 @@
+{
+  "greetings.hello": "Hello, {name}, this is a message from translations!"
+}

src/js/views/example/View.jsx

@@ -33,21 +33,35 @@ class ExampleView extends Component {
   render() {
     const { myArbitraryNumber, currentTime } = this.state
 
+    // Note for i18n and i10n
+    // if `id` is found, it will use the matched message
+    // otherwise, it will use defaultMessage as fallback
+
     return (
       <Fragment>
         <LazyExample {...this.props} />
         <h2>This framework supports i18n and i10n out of the box.</h2>
-        <FormattedMessage
-          id="hooray"
-          defaultMessage={`A locallized random number: {myArbitraryNumber, number} {myArbitraryNumber, plural,
-            one {item}
-            other {items}
-          }`}
-          values={{
-            name: <b>Visitor</b>,
-            myArbitraryNumber,
-          }}
-        />
+        <p>
+          <FormattedMessage
+            id="greetings.hello"
+            defaultMessage={'Hello {name}'}
+            values={{
+              name: <b>Visitor</b>,
+            }}
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            id="hooray"
+            defaultMessage={`A locallized random number: {myArbitraryNumber, number} {myArbitraryNumber, plural,
+              one {item}
+              other {items}
+            }`}
+            values={{
+              myArbitraryNumber,
+            }}
+          />
+        </p>
         <p>
           The date is: &nbsp;
           <FormattedDate value={currentTime} />