chore: update react app to latest

AtofStryker · AtofStryker · commit be7aceef5df1 · 2024-12-05T12:44:26.000-05:00
diff --git a/react/my-awesome-app/README.md b/react/my-awesome-app/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/react/my-awesome-app/cypress/support/component.js b/react/my-awesome-app/cypress/support/component.js
@@ -19,7 +19,7 @@ import './commands'
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from 'cypress/react'
 
 Cypress.Commands.add('mount', mount)
 
diff --git a/react/my-awesome-app/index.html b/react/my-awesome-app/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/react/my-awesome-app/package-lock.json b/react/my-awesome-app/package-lock.json
diff --git a/react/my-awesome-app/package.json b/react/my-awesome-app/package.json
@@ -9,14 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.42",
-    "@types/react-dom": "^18.2.17",
-    "@vitejs/plugin-react": "^3.1.0",
-    "cypress": "^13.6.1",
-    "vite": "^4.5.1"
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "cypress": "https://cdn.cypress.io/beta/npm/13.16.1/darwin-arm64/feat/support_svelte_5-fe87cdeb0bda14ba83786d31cb9863f308be3ae1/cypress.tgz",
+    "globals": "^15.12.0",
+    "vite": "^6.0.1"
   }
 }
diff --git a/react/my-awesome-app/src/App.css b/react/my-awesome-app/src/App.css
@@ -9,6 +9,7 @@
   height: 6em;
   padding: 1.5em;
   will-change: filter;
+  transition: filter 300ms;
 }
 .logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
diff --git a/react/my-awesome-app/src/App.jsx b/react/my-awesome-app/src/App.jsx
@@ -1,17 +1,18 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
   const [count, setCount] = useState(0)
 
   return (
-    <div className="App">
+    <>
       <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
-        <a href="https://reactjs.org" target="_blank">
+        <a href="https://react.dev" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
         </a>
       </div>
@@ -27,7 +28,7 @@ function App() {
       <p className="read-the-docs">
         Click on the Vite and React logos to learn more
       </p>
-    </div>
+    </>
   )
 }
 
diff --git a/react/my-awesome-app/src/index.css b/react/my-awesome-app/src/index.css
@@ -1,7 +1,6 @@
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
@@ -12,7 +11,6 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
 }
 
 a {
diff --git a/react/my-awesome-app/src/main.jsx b/react/my-awesome-app/src/main.jsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 import './index.css'
+import App from './App.jsx'
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>,
 )
diff --git a/react/my-awesome-app/vite.config.js b/react/my-awesome-app/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<!DOCTYPE html>`
	`1`	`+<!doctype html>`
`2`	`2`	`<html lang="en">`
`3`	`3`	`<head>`
`4`	`4`	`<meta charset="UTF-8" />`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`	`height: 6em;`
`10`	`10`	`padding: 1.5em;`
`11`	`11`	`will-change: filter;`
	`12`	`+ transition: filter 300ms;`
`12`	`13`	`}`
`13`	`14`	`.logo:hover {`
`14`	`15`	`filter: drop-shadow(0 0 2em #646cffaa);`