Upgrade to react 16

js/client.js

@@ -1,17 +1,17 @@
 import 'babel-polyfill';
 import React from 'react';
-import { render } from 'react-dom';
+import { hydrate } from 'react-dom';
 import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import createHistory from 'history/createBrowserHistory';
 import App from './components/App';
 import appReducer from './reducer';
 import actions, { NAVIGATE } from './actions';
-import {isMobileViewport} from '../common/config'
-import {track} from './analytics';
+import { isMobileViewport } from '../common/config';
+import { track } from './analytics';
 
 // Remove .html and map / to index
-const getPageNameFromPath = (path) => {
+const getPageNameFromPath = path => {
   if (path === '/') {
     return 'index';
   }
@@ -20,29 +20,29 @@ const getPageNameFromPath = (path) => {
 
 const historyManager = store => {
   const history = createHistory({
-    basename: '/techradar'
+    basename: '/techradar',
   });
 
   // If browser-back button is pressed, provide new pageName to store
   history.listen((location, action) => {
     if (action === 'POP') {
       const pageName = getPageNameFromPath(location.pathname);
-      store.dispatch(actions.navigate(pageName, false))
+      store.dispatch(actions.navigate(pageName, false));
     }
   });
 
   return next => action => {
-    if(action.type === NAVIGATE && action.pushToHistory === true) {
+    if (action.type === NAVIGATE && action.pushToHistory === true) {
       window.scrollTo(0, 0);
       history.push(`/${action.pageName}.html`);
     }
     return next(action);
-  }
+  };
 };
 
 let reloadTimeout;
 let wasMobileViewport = isMobileViewport();
-window.addEventListener('resize', function () {
+window.addEventListener('resize', function() {
   clearTimeout(reloadTimeout);
   reloadTimeout = setTimeout(() => {
     if (wasMobileViewport != isMobileViewport()) window.location.reload();
@@ -56,16 +56,20 @@ const preloadedState = window.__TECHRADAR__;
 delete window.__TECHRADAR__;
 
 // Create Redux store with initial state
-const store = createStore(appReducer, preloadedState, applyMiddleware(historyManager))
+const store = createStore(
+  appReducer,
+  preloadedState,
+  applyMiddleware(historyManager),
+);
 
-const handleSetTitle = (title) => {
+const handleSetTitle = title => {
   document.title = `${title} | AOE Technology Radar`;
   track();
 };
 
-render(
+hydrate(
   <Provider store={store}>
     <App onSetTitle={handleSetTitle} />
   </Provider>,
-  document.getElementById('root')
-)
+  document.getElementById('root'),
+);

js/components/App.js

@@ -14,7 +14,9 @@ function App(props) {
         <div className="page__header">
           <Header {...props} />
         </div>
-        <div className={classNames('page__content', { 'is-faded': props.isFaded })}>
+        <div
+          className={classNames('page__content', { 'is-faded': props.isFaded })}
+        >
           <Router {...props} />
         </div>
         <div className="page__footer">
@@ -22,10 +24,15 @@ function App(props) {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default connect(
-  ({ items, releases, pageName, pageState }) => ({ items, releases, pageName, pageState }),
-  actions
+  ({ items, releases, pageName, pageState }) => ({
+    items,
+    releases,
+    pageName,
+    pageState,
+  }),
+  actions,
 )(App);