Counter + Reset Komponente; Leere React-App für TodoListe erstellt;

Readme hinzugefügt

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

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;

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

firstReactApp/my-react-app/src/App.jsx

@@ -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

firstReactApp/my-react-app/src/Counter.jsx

@@ -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