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;

package.json

@@ -5,7 +5,7 @@
   "main": "server/server.js",
   "scripts": {
     "start": "npm run build && node server/server.js",
-    "dev": "npm run build && nodemon server/server.js",
+    "dev": "npm run build && nodemon server/server.js --ext js,jsx,json",
     "build": "npm run build:server && npm run build:client",
     "build:server": "exit 0",
     "build:client": "webpack --env=production --config webpack.config.js",
@@ -26,9 +26,18 @@
     "express": "^4.17.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "html-webpack-plugin": "^5.0.0-alpha.14",
     "nodemon": "^2.0.7",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-loadable": "^5.5.0",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "webpack": "^5.15.0",
     "webpack-bundle-analyzer": "^4.3.0",
     "webpack-cli": "^4.3.1"

webpack.config.js

@@ -11,14 +11,33 @@ module.exports = ({ production, analyzer }) => {
 
 	return {
 		mode: production ? "production" : "development",
-		entry: path.resolve(__dirname, 'client', 'client.js'),
+		entry: path.resolve(__dirname, 'client', 'client.jsx'),
 		output: {
 			path: path.resolve(__dirname, 'public'),
-			filename: '[name].[chunkhash].js'
+			filename: '[name].[chunkhash].js',
+			sourceMapFilename: '[name].[chunkhash].js.map'
 		},
+		devtool: 'source-map',
 		resolve: {
 			extensions: ['.js', '.jsx']
 		},
+		module: {
+			rules: [
+				{
+					test: /\.(js|jsx)$/,
+					exclude: /(node_modules)/,
+					use: [
+						{
+							loader: 'babel-loader',
+							options: {
+								presets: ['@babel/preset-env', '@babel/preset-react'],
+								plugins: ['react-loadable/babel', '@babel/plugin-syntax-dynamic-import']
+							}
+						}
+					]
+				}
+			]
+		},
 		plugins: [
 			new CleanWebpackPlugin({
 				cleanOnceBeforeBuildPatterns: ['*', '!content*']