Use Vite instead or React tools, fix vulnerabilities.

Also: rename .JS files to .JSX; change require to import, as require does not work in Vite
strazdinsg · Jul 24, 2024 · 0e21a7f · 0e21a7f
1 parent 54e539c
commit 0e21a7f
Show file tree

Hide file tree

Showing 42 changed files with 8,992 additions and 131,172 deletions.
diff --git a/public_html/examples/react/00-empty-skeleton/vite.config.js b/public_html/examples/react/00-empty-skeleton/vite.config.js
@@ -8,6 +8,6 @@ export default defineConfig({
         port: 3000
     },
     build: {
-        outDir: "../build"
+        outDir: "build"
     },
 });
diff --git a/...act/03-class-components/public/index.html → ...ples/react/03-class-components/index.html b/...act/03-class-components/public/index.html → ...ples/react/03-class-components/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React class-component example</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="src/index.jsx"></script>
   </body>
 </html>
diff --git a/public_html/examples/react/03-class-components/package-lock.json b/public_html/examples/react/03-class-components/package-lock.json
diff --git a/public_html/examples/react/03-class-components/package.json b/public_html/examples/react/03-class-components/package.json
@@ -1,32 +1,16 @@
 {
   "name": "class-components",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "private": true,
   "dependencies": {
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-scripts": "5.0.1",
-    "webpack": "^5.93.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "vite": "^5.3.4",
+    "@vitejs/plugin-react": "^4.3.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
   }
 }
diff --git a/...es/react/03-class-components/src/Board.js → ...s/react/03-class-components/src/Board.jsx b/...es/react/03-class-components/src/Board.js → ...s/react/03-class-components/src/Board.jsx
diff --git a/...s/react/03-class-components/src/Square.js → .../react/03-class-components/src/Square.jsx b/...s/react/03-class-components/src/Square.js → .../react/03-class-components/src/Square.jsx
diff --git a/...es/react/03-class-components/src/index.js → ...s/react/03-class-components/src/index.jsx b/...es/react/03-class-components/src/index.js → ...s/react/03-class-components/src/index.jsx
diff --git a/public_html/examples/react/03-class-components/vite.config.js b/public_html/examples/react/03-class-components/vite.config.js
@@ -0,0 +1,13 @@
+import {defineConfig} from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 3000
+    },
+    build: {
+        outDir: "build"
+    },
+});
diff --git a/.../04-function-components/public/index.html → ...s/react/04-function-components/index.html b/.../04-function-components/public/index.html → ...s/react/04-function-components/index.html
@@ -2,12 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>React function-component example</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="src/index.jsx"></script>
   </body>
 </html>