From f08dec4eba5cbdf67e9b70d6abc9e1027ba05578 Mon Sep 17 00:00:00 2001
From: Max <maximilianbrand@web.de>
Date: Tue, 14 Jul 2026 10:09:51 +0200
Subject: [PATCH] =?UTF-8?q?Counter=20+=20Reset=20Komponente;=20Leere=20Rea?=
 =?UTF-8?q?ct-App=20f=C3=BCr=20TodoListe=20erstellt;=20Readme=20hinzugef?=
 =?UTF-8?q?=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../.gitignore                                |   0
 .../.oxlintrc.json                            |   0
 .../README.md                                 |   0
 .../index.html                                |   0
 .../package-lock.json                         |   0
 .../package.json                              |   0
 .../public/favicon.svg                        |   0
 .../public/icons.svg                          |   0
 .../src/App.css                               |   0
 Erster React Test/src/App.jsx                 |  15 +++++++++
 Erster React Test/src/Counter.jsx             |  29 +++++++++++++++++
 .../src/assets/hero.png                       | Bin
 .../src/assets/react.svg                      |   0
 .../src/assets/vite.svg                       |   0
 .../src/index.css                             |   0
 .../src/main.jsx                              |   0
 .../vite.config.js                            |   0
 README.md                                     |  14 ++++++++
 firstReactApp/my-react-app/src/App.jsx        |  26 ---------------
 firstReactApp/my-react-app/src/Counter.jsx    |  30 ------------------
 20 files changed, 58 insertions(+), 56 deletions(-)
 rename {firstReactApp/my-react-app => Erster React Test}/.gitignore (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/.oxlintrc.json (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/README.md (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/index.html (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/package-lock.json (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/package.json (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/public/favicon.svg (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/public/icons.svg (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/src/App.css (100%)
 create mode 100644 Erster React Test/src/App.jsx
 create mode 100644 Erster React Test/src/Counter.jsx
 rename {firstReactApp/my-react-app => Erster React Test}/src/assets/hero.png (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/src/assets/react.svg (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/src/assets/vite.svg (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/src/index.css (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/src/main.jsx (100%)
 rename {firstReactApp/my-react-app => Erster React Test}/vite.config.js (100%)
 create mode 100644 README.md
 delete mode 100644 firstReactApp/my-react-app/src/App.jsx
 delete mode 100644 firstReactApp/my-react-app/src/Counter.jsx

diff --git a/firstReactApp/my-react-app/.gitignore b/Erster React Test/.gitignore
similarity index 100%
rename from firstReactApp/my-react-app/.gitignore
rename to Erster React Test/.gitignore
diff --git a/firstReactApp/my-react-app/.oxlintrc.json b/Erster React Test/.oxlintrc.json
similarity index 100%
rename from firstReactApp/my-react-app/.oxlintrc.json
rename to Erster React Test/.oxlintrc.json
diff --git a/firstReactApp/my-react-app/README.md b/Erster React Test/README.md
similarity index 100%
rename from firstReactApp/my-react-app/README.md
rename to Erster React Test/README.md
diff --git a/firstReactApp/my-react-app/index.html b/Erster React Test/index.html
similarity index 100%
rename from firstReactApp/my-react-app/index.html
rename to Erster React Test/index.html
diff --git a/firstReactApp/my-react-app/package-lock.json b/Erster React Test/package-lock.json
similarity index 100%
rename from firstReactApp/my-react-app/package-lock.json
rename to Erster React Test/package-lock.json
diff --git a/firstReactApp/my-react-app/package.json b/Erster React Test/package.json
similarity index 100%
rename from firstReactApp/my-react-app/package.json
rename to Erster React Test/package.json
diff --git a/firstReactApp/my-react-app/public/favicon.svg b/Erster React Test/public/favicon.svg
similarity index 100%
rename from firstReactApp/my-react-app/public/favicon.svg
rename to Erster React Test/public/favicon.svg
diff --git a/firstReactApp/my-react-app/public/icons.svg b/Erster React Test/public/icons.svg
similarity index 100%
rename from firstReactApp/my-react-app/public/icons.svg
rename to Erster React Test/public/icons.svg
diff --git a/firstReactApp/my-react-app/src/App.css b/Erster React Test/src/App.css
similarity index 100%
rename from firstReactApp/my-react-app/src/App.css
rename to Erster React Test/src/App.css
diff --git a/Erster React Test/src/App.jsx b/Erster React Test/src/App.jsx
new file mode 100644
index 0000000..1992037
--- /dev/null
+++ b/Erster React Test/src/App.jsx	
@@ -0,0 +1,15 @@
+import Counter from './Counter.jsx'
+
+function App() {
+    return (
+        <div className="App">
+            <h1>Hello World!</h1>
+            <div>
+                <Counter /> <br />
+                <Counter storageName={'test-counter'} />
+            </div>
+        </div>
+    );
+}
+
+export default App
diff --git a/Erster React Test/src/Counter.jsx b/Erster React Test/src/Counter.jsx
new file mode 100644
index 0000000..34fafa2
--- /dev/null
+++ b/Erster React Test/src/Counter.jsx	
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+function Counter({storageName = 'default-counter'}) {
+
+    localStorage.setItem(storageName, (parseInt(localStorage.getItem(storageName)) || 0));
+    const [count, setCount] = useState(localStorage.getItem(storageName));
+
+    return (
+        <>
+            <button onClick={() => {
+                localStorage.setItem(storageName, (parseInt(localStorage.getItem(storageName)) || 0) + 1);
+                setCount(localStorage.getItem(storageName));
+            }}>
+                Count: {count}
+            </button>
+            <ResetButton storageName={storageName} />
+        </>
+    );
+}
+
+function ResetButton({storageName = 'default-counter'}) {
+    return (
+        <button onClick={() => localStorage.setItem(storageName, 0)}>
+            Reset Counter
+        </button>
+    );
+}
+
+export default Counter;
diff --git a/firstReactApp/my-react-app/src/assets/hero.png b/Erster React Test/src/assets/hero.png
similarity index 100%
rename from firstReactApp/my-react-app/src/assets/hero.png
rename to Erster React Test/src/assets/hero.png
diff --git a/firstReactApp/my-react-app/src/assets/react.svg b/Erster React Test/src/assets/react.svg
similarity index 100%
rename from firstReactApp/my-react-app/src/assets/react.svg
rename to Erster React Test/src/assets/react.svg
diff --git a/firstReactApp/my-react-app/src/assets/vite.svg b/Erster React Test/src/assets/vite.svg
similarity index 100%
rename from firstReactApp/my-react-app/src/assets/vite.svg
rename to Erster React Test/src/assets/vite.svg
diff --git a/firstReactApp/my-react-app/src/index.css b/Erster React Test/src/index.css
similarity index 100%
rename from firstReactApp/my-react-app/src/index.css
rename to Erster React Test/src/index.css
diff --git a/firstReactApp/my-react-app/src/main.jsx b/Erster React Test/src/main.jsx
similarity index 100%
rename from firstReactApp/my-react-app/src/main.jsx
rename to Erster React Test/src/main.jsx
diff --git a/firstReactApp/my-react-app/vite.config.js b/Erster React Test/vite.config.js
similarity index 100%
rename from firstReactApp/my-react-app/vite.config.js
rename to Erster React Test/vite.config.js
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9cc1cdd
--- /dev/null
+++ b/README.md
@@ -0,0 +1,14 @@
+# React App zum Laufen bringen
+1. 'Erster React Test' Ordner in Eingabeaufforderung oder PowerShell öffnen
+2. `npm install` -> npm installiert Abhängigkeiten für React
+3. `npm run dev` -> npm startet React-Development-Server; Ausgabe sollte ungefähr sein:
+```
+  VITE v8.1.4  ready in 345 ms
+
+  ➜  Local:   http://localhost:5173/
+  ➜  Network: use --host to expose
+  ➜  press h + enter to show help
+```
+4. Eingabeaufforderung / PowerShell geöffnet lassen, da sonst auch der Server beendet wird
+5. Falls sich Browserfenster nicht automatisch öffnet, ist die React App über den Link (siehe oben) erreichbar
+6. Dateien innerhalb von 'Erster React Test/src' verändern, um die React App weiterzuentwickeln
diff --git a/firstReactApp/my-react-app/src/App.jsx b/firstReactApp/my-react-app/src/App.jsx
deleted file mode 100644
index 82a3e03..0000000
--- a/firstReactApp/my-react-app/src/App.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Counter from './Counter.jsx'
-
-const fruitlist = ['apple', 'banana', 'cherry'];
-
-function App() {
-    return (
-        <div className="App">
-            <h1>Hello World!</h1>
-            <ul>
-                {fruitlist.map((fruit, index, array) => {
-                    return (
-                        <li key={fruit}>
-                            Name: {fruit}, Index: {index}, Array: {array}
-                        </li>
-                    );
-                    }
-                )}
-            </ul>
-            <div>
-                <Counter />
-            </div>
-        </div>
-    );
-}
-
-export default App
\ No newline at end of file
diff --git a/firstReactApp/my-react-app/src/Counter.jsx b/firstReactApp/my-react-app/src/Counter.jsx
deleted file mode 100644
index c752022..0000000
--- a/firstReactApp/my-react-app/src/Counter.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useState } from 'react'
-
-function Counter({storageName}) {
-
-    let startValue = parseInt(localStorage.getItem(storageName)) || 0;
-    localStorage.setItem(storageName, startValue);
-    const [count, setCount] = useState(startValue);
-
-    return (
-        <>
-            <button onClick={() => {
-                localStorage.setItem(storageName, count + 1);
-                setCount(count + 1);
-            }}>
-                Count: {count}
-            </button>
-            <CounterReset storageName=storageName />
-        </>
-    )
-}
-
-function CounterReset({storageName = 'default-counter'}) {
-    return (
-        <button onClick={() => localStorage.setItem(storageName, 0)}>
-            Reset Counter
-        </button>
-    )
-}
-
-export default Counter
\ No newline at end of file