Update react templates deps to React v18.x and Vite v4.x

src/templates/Vite-CSharp/.files/react-ts/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app"]
+}

src/templates/Vite-CSharp/.files/react-ts/package.json

@@ -9,14 +9,17 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@vitejs/plugin-react": "^1.0.0",
-    "typescript": "^4.3.2",
-    "vite": "^2.6.4"
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.36.0",
+    "eslint-config-react-app": "^7.0.1",
+    "vite": "^4.1.0",
+    "vite-plugin-eslint": "^1.8.1"
   }
 }

src/templates/Vite-CSharp/.files/react-ts/src/main.tsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+  </React.StrictMode>
+);

src/templates/Vite-CSharp/.files/react-ts/vite.config.ts

@@ -1,24 +1,25 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { readFileSync } from 'fs'
-import { certFilePath, keyFilePath } from './aspnetcore-https'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import eslint from "vite-plugin-eslint";
+import { readFileSync } from "fs";
+import { certFilePath, keyFilePath } from "./aspnetcore-https";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), eslint()],
   server: {
     https: {
       key: readFileSync(keyFilePath),
-      cert: readFileSync(certFilePath)
+      cert: readFileSync(certFilePath),
     },
     port: 5002,
     strictPort: true,
     proxy: {
-      '/api': {
-        target: 'https://localhost:5001/',
+      "/api": {
+        target: "https://localhost:5001/",
         changeOrigin: true,
-        secure: true
-      }
-    }
-  }
-})
+        secure: true,
+      },
+    },
+  },
+});

src/templates/Vite-CSharp/.files/react/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app"]
+}

src/templates/Vite-CSharp/.files/react/package.json

@@ -9,11 +9,14 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^1.0.0",
-    "vite": "^2.6.4"
+    "eslint": "^8.36.0",
+    "eslint-config-react-app": "^7.0.1",
+    "vite": "^4.1.0",
+    "vite-plugin-eslint": "^1.8.1"
   }
 }

src/templates/Vite-CSharp/.files/react/src/main.jsx

@@ -1,11 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import './index.css'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+  </React.StrictMode>
+);

src/templates/Vite-CSharp/.files/react/vite.config.js

@@ -1,24 +1,25 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { readFileSync } from 'fs'
-import { certFilePath, keyFilePath } from './aspnetcore-https'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import eslint from "vite-plugin-eslint";
+import { readFileSync } from "fs";
+import { certFilePath, keyFilePath } from "./aspnetcore-https";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), eslint()],
   server: {
     https: {
       key: readFileSync(keyFilePath),
-      cert: readFileSync(certFilePath)
+      cert: readFileSync(certFilePath),
     },
     port: 5002,
     strictPort: true,
     proxy: {
-      '/api': {
-        target: 'https://localhost:5001/',
+      "/api": {
+        target: "https://localhost:5001/",
         changeOrigin: true,
-        secure: true
-      }
-    }
-  }
-})
+        secure: true,
+      },
+    },
+  },
+});

src/templates/Vite-CSharp/Controllers/WeatherForecastController.cs

@@ -3,12 +3,21 @@
 namespace Vite_CSharp.Controllers;
 
 [ApiController]
-[Route("[controller]")]
+[Route("api/[controller]")]
 public class WeatherForecastController : ControllerBase
 {
     private static readonly string[] Summaries = new[]
     {
-        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
+        "Freezing",
+        "Bracing",
+        "Chilly",
+        "Cool",
+        "Mild",
+        "Warm",
+        "Balmy",
+        "Hot",
+        "Sweltering",
+        "Scorching"
     };
 
     private readonly ILogger<WeatherForecastController> _logger;
@@ -21,12 +30,17 @@ public WeatherForecastController(ILogger<WeatherForecastController> logger)
     [HttpGet]
     public IEnumerable<WeatherForecast> Get()
     {
-        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
-        {
-            Date = DateTime.Now.AddDays(index),
-            TemperatureC = Random.Shared.Next(-20, 55),
-            Summary = Summaries[Random.Shared.Next(Summaries.Length)]
-        })
-        .ToArray();
+        return Enumerable
+            .Range(1, 5)
+            .Select(
+                index =>
+                    new WeatherForecast
+                    {
+                        Date = DateTime.Now.AddDays(index),
+                        TemperatureC = Random.Shared.Next(-20, 55),
+                        Summary = Summaries[Random.Shared.Next(Summaries.Length)]
+                    }
+            )
+            .ToArray();
     }
 }