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);

package.json

@@ -45,8 +45,8 @@
     "postcss-custom-media": "^6.0.0",
     "postcss-easy-import": "3.0.0",
     "postcss-nested": "2.1.2",
-    "react": "15.4.2",
-    "react-dom": "15.4.2",
+    "react": "16.1.1",
+    "react-dom": "16.1.1",
     "react-redux": "5.0.6",
     "redux": "3.7.2",
     "walk": "2.3.9",

tasks/build.js

@@ -1,24 +1,19 @@
-import {
-  createRadar,
-  groupByQuadrants,
-  outputRadar,
-} from '../common/radar';
+import { createRadar, groupByQuadrants, outputRadar } from '../common/radar';
 import { save } from '../common/file';
 import { getPageNames } from '../common/config';
 import { renderPage } from '../js/server';
 
-
 (async () => {
   try {
     const radar = await createRadar();
 
-    getPageNames(radar).map((pageName) => {
+    getPageNames(radar).map(pageName => {
       const pageHtml = renderPage(radar, pageName);
       save(pageHtml, `${pageName}.html`);
     });
 
     console.log('Built radar');
-  } catch(e) {
+  } catch (e) {
     console.error('error:', e);
   }
 })();

yarn.lock

@@ -1605,18 +1605,6 @@ faye-websocket@0.11.x:
   dependencies:
     websocket-driver ">=0.5.1"
 
-fbjs@^0.8.1, fbjs@^0.8.4:
-  version "0.8.12"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
@@ -2922,7 +2910,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10:
+prop-types@^15.5.10, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -2996,13 +2984,14 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@15.4.2:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.2.tgz#015363f05b0a1fd52ae9efdd3a0060d90695208f"
+react-dom@16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.1.1.tgz#b2e331b6d752faf1a2d31399969399a41d8d45f8"
   dependencies:
-    fbjs "^0.8.1"
+    fbjs "^0.8.16"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 react-redux@5.0.6:
   version "5.0.6"
@@ -3015,13 +3004,14 @@ react-redux@5.0.6:
     loose-envify "^1.1.0"
     prop-types "^15.5.10"
 
-react@15.4.2:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.4.2.tgz#41f7991b26185392ba9bae96c8889e7e018397ef"
+react@16.1.1:
+  version "16.1.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.1.1.tgz#d5c4ef795507e3012282dd51261ff9c0e824fe1f"
   dependencies:
-    fbjs "^0.8.4"
+    fbjs "^0.8.16"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.0"
 
 read-cache@^1.0.0:
   version "1.0.0"