components directory

src/components/app/index.tsx

@@ -0,0 +1,15 @@
+import MushroomCatImage from './mushroom-cat.png';
+
+import Portrait from '../portrait';
+import { FC } from 'react';
+
+const App: FC = () => {
+    return (
+        <div>
+            <div>Hello, Webpack</div>
+            <Portrait src={MushroomCatImage} />
+        </div>
+    );
+};
+
+export default App;

src/index.tsx

@@ -1,25 +1,8 @@
-import { FC } from 'react';
 import { createRoot } from 'react-dom/client';
-
-import { doWork } from './module';
+import App from './components/app';
 
 import './index.scss';
 
-import MushroomCatImage from './img/mushroom-cat.png';
-
-import Portrait from './portrait';
-
-const App: FC = () => {
-    const num = doWork();
-    console.log('work gave', num);
-    return (
-        <div>
-            <div>Hello, Webpack</div>
-            <Portrait src={MushroomCatImage} />
-        </div>
-    );
-};
-
 const main = document.querySelector('main');
 if (main === null) {
     throw new Error('unable to find main!');

src/module.ts

@@ -1,4 +0,0 @@
-export function doWork(): number {
-    console.log('doing some major work right now B)');
-    return 4;
-}