move ReactDOM.render() into index.js

This also means we no longer need to disable eslint's
"no-unused-expressions" rule for each route in index.js

src/renderer/about.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {productName, version} from '../../package.json';
 
 import logo from '../icon/ScratchDesktop.svg';
@@ -37,5 +36,4 @@ const AboutElement = () => (
     </div>
 );
 
-const appTarget = document.getElementById('app');
+export default <AboutElement />;
-ReactDOM.render(<AboutElement />, appTarget);

src/renderer/app.jsx

@@ -3,7 +3,6 @@ import bindAll from 'lodash.bindall';
 import omit from 'lodash.omit';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import {connect} from 'react-redux';
 import {compose} from 'redux';
 import GUI from 'scratch-gui/src/index';
@@ -181,4 +180,4 @@ const WrappedGui = compose(
     ScratchDesktopHOC
 )(GUI);
 
-ReactDOM.render(<WrappedGui />, appTarget);
+export default <WrappedGui />;

src/renderer/index.js

@@ -3,6 +3,8 @@
 
 import {ipcRenderer} from 'electron';
 
+import ReactDOM from 'react-dom';
+
 ipcRenderer.on('ready-to-show', () => {
     // Start without any element in focus, otherwise the first link starts with focus and shows an orange box.
     // We shouldn't disable that box or the focus behavior in case someone wants or needs to navigate that way.
@@ -11,14 +13,21 @@ ipcRenderer.on('ready-to-show', () => {
 });
 
 const route = new URLSearchParams(window.location.search).get('route') || 'app';
+let routeModulePromise;
 switch (route) {
 case 'app':
-    import('./app.jsx'); // eslint-disable-line no-unused-expressions
+    routeModulePromise = import('./app.jsx');
     break;
 case 'about':
-    import('./about.jsx'); // eslint-disable-line no-unused-expressions
+    routeModulePromise = import('./about.jsx');
     break;
 case 'privacy':
-    import('./privacy.jsx');
+    routeModulePromise = import('./privacy.jsx');
     break;
 }
+
+routeModulePromise.then(routeModule => {
+    const appTarget = document.getElementById('app');
+    const routeElement = routeModule.default;
+    ReactDOM.render(routeElement, appTarget);
+});

src/renderer/privacy.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import styles from './privacy.css';
 
@@ -58,5 +57,4 @@ const PrivacyElement = () => (
     </div>
 );
 
-const appTarget = document.getElementById('app');
+export default <PrivacyElement />;
-ReactDOM.render(<PrivacyElement />, appTarget);