React + lazy loading is working

client/client.js

@@ -1 +0,0 @@
-console.log("Hello world!");

client/client.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './components/app';
+
+ReactDOM.render(
+	<App />,
+	document.querySelector('#root')
+);

client/components/app.jsx

@@ -0,0 +1,25 @@
+//react
+import React from 'react';
+import { BrowserRouter, Switch } from 'react-router-dom';
+
+//library components
+import LazyRoute from './lazy-route';
+
+//styling
+//TODO: styling import
+
+//common components
+//TODO: header
+//TODO: footer
+
+const App = props => {
+	return (
+		<BrowserRouter>
+				<Switch>
+					<LazyRoute exact path='/' component={() => import('./pages/homepage')} />
+				</Switch>
+		</BrowserRouter>
+	);
+};
+
+export default App;

client/components/lazy-route.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import Loadable from 'react-loadable';
+
+const Loading = props => {
+	if (props.error) {
+		return <p>{props.error}</p>;
+	}
+
+	if (props.timedOut) {
+		return (
+			<div className='page'>
+				<p>Page Timed Out</p>
+			</div>
+		);
+	}
+
+	if (props.pastDelay) {
+		return (
+			<div className='page'>
+				<p>Page Loading...</p>
+			</div>
+		);
+	}
+
+	return null;
+};
+
+const LazyRoute = lazyProps => {
+	const component = Loadable({
+		loader: lazyProps.component,
+		loading: Loading,
+		timeout: 10000
+	});
+
+	return <Route {...lazyProps} component={component} />
+};
+
+export default LazyRoute;

client/components/pages/homepage.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const HomePage = props => {
+	return <p>Hello world!</p>;
+};
+
+export default HomePage;