Add bootstrap, init components dir

package-lock.json

@@ -12,6 +12,7 @@
         "@babel/core": "^7.24.4",
         "@babel/preset-env": "^7.24.4",
         "@babel/preset-react": "^7.24.1",
+        "bootstrap": "^5.3.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -1915,6 +1916,16 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.5",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
@@ -2654,6 +2665,24 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",

package.json

@@ -30,6 +30,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/preset-react": "^7.24.1",
+    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

src/App.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
+import ListGroup from "./components/ListGroup.tsx";
 
 export default function App() {
   return (
     <main>
-      <p>App</p>
+      <ListGroup></ListGroup>
     </main>
   );
 }

src/components/ListGroup.tsx

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+export default function ListGroup() {
+  return <h1>List Group</h1>;
+}

src/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
 import App from "./App.tsx";
+import "bootstrap/dist/css/bootstrap.css";
 
 const rootElement = document.getElementById("root");
 
@@ -8,4 +9,4 @@ const root = ReactDOM.createRoot(rootElement!);
 
 root.render(
     <App />
-);
+);

webpack.config.js

@@ -9,22 +9,14 @@ module.exports = {
   },
   module: {
     rules: [
-      {
+	{
-        test: /\.(ts|tsx)$/,
+            test: /\.(ts|tsx)$/,
-        exclude: /node_modules/,
+            use: "babel-loader",
-        use: "babel-loader",
+	},
-      },
+	{
-      {
+            test: /\.css$/,
-        test: /\css$/,
+            use: [ 'style-loader', 'css-loader' ]
-        use: [
+        },
-          {
-            loader: "style-loader",
-          },
-          {
-            loader: "css-loader",
-          },
-        ],
-      },
     ],
   },
   plugins: [