Initial React-Intl setup

src/app.js

@@ -3,20 +3,26 @@ import ReactDOMServer from 'react-dom/server';
 import Helmet from 'react-helmet';
 import { BrowserRouter, ServerRouter } from 'react-router';
 import { Provider } from 'react-redux';
+import { IntlProvider, addLocaleData } from 'react-intl';
+import en from 'react-intl/locale-data/en';
 import configureStore from './store';
 import Routes from './Routes';
 import routesConfiguration from './routesConfiguration';
+import localeData from './translations/en.json';
 
 export const ClientApp = props => {
   const { store } = props;
+  addLocaleData([ ...en ]);
   return (
-    <BrowserRouter>
-      {({ router }) => (
-          <Provider store={store}>
-            <Routes router={router} routes={routesConfiguration} />
-          </Provider>
-        )}
-    </BrowserRouter>
+    <IntlProvider locale="en" messages={localeData}>
+      <BrowserRouter>
+        {({ router }) => (
+            <Provider store={store}>
+              <Routes router={router} routes={routesConfiguration} />
+            </Provider>
+          )}
+      </BrowserRouter>
+    </IntlProvider>
   );
 };
 
@@ -26,14 +32,17 @@ ClientApp.propTypes = { store: any.isRequired };
 
 export const ServerApp = props => {
   const { url, context, store } = props;
+  addLocaleData([ ...en ]);
   return (
-    <ServerRouter location={url} context={context}>
-      {({ router }) => (
-          <Provider store={store}>
-            <Routes router={router} routes={routesConfiguration} />
-          </Provider>
-        )}
-    </ServerRouter>
+    <IntlProvider locale="en" messages={localeData}>
+      <ServerRouter location={url} context={context}>
+        {({ router }) => (
+            <Provider store={store}>
+              <Routes router={router} routes={routesConfiguration} />
+            </Provider>
+          )}
+      </ServerRouter>
+    </IntlProvider>
   );
 };
 

src/containers/LandingPage/LandingPage.js

@@ -1,9 +1,15 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
 import { PageLayout } from '../../components';
 
 export default () => (
   <PageLayout title="Landing page">
-    <Link to="/s?location=helsinki">Find studios</Link>
+    <Link to="/s?location=helsinki">
+      <FormattedMessage
+        id="landingpage.examplelink"
+        defaultMessage="Show nice studios! (default)"
+      />
+    </Link>
   </PageLayout>
 )

src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "landingpage.examplelink": "Show nice studios! (from json)"
+}