+
+
+
+ );
+};
+export default InputAmount;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/components/lists/ListTodo.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/components/lists/ListTodo.jsx
new file mode 100644
index 0000000..9663ed6
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/components/lists/ListTodo.jsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from 'react';
+
+const ListTodo = (props) => {
+ // const { } = props;
+
+ const [todos, setTodos] = useState([]);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ // AbortController instanziieren (seit mid 2018)
+ const controller = new AbortController();
+
+ setIsLoading(true);
+ setError(null);
+
+ fetch('https://dummyjson.com/todos/random/6', {
+ signal: controller.signal, // signal mitsenden
+ })
+ .then((res) => {
+ if (!res.ok) {
+ throw new Error('HTTP-Request went wrong');
+ }
+ return res.json(); // -> Promise HTTP-Response->Body
+ })
+ .then((data) => {
+ setTodos(data);
+ })
+ .catch((err) => {
+ console.log(err);
+ if (err?.name === 'AbortError') {
+ console.error('Fetch wurde abgebrochen.');
+ } else if (err instanceof Error) {
+ console.error(err.message);
+ setError(err);
+ }
+ })
+ .finally(() => {
+ if (!controller.signal.aborted) {
+ setIsLoading(false);
+ }
+ });
+
+ return () => {
+ // cleanup
+ controller.abort(); // The abort() method of the AbortController interface aborts an asynchronous operation before it has completed.
+ };
+ }, []);
+
+ return (
+ <>
+ {isLoading ? (
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+ -
+ {todos.length > 0 &&
+ todos.map(({ completed, id, todo }, idx) => (
+
-
+ + + ++
+ ))}
+
+
+ )}
+
+ );
+};
+export default ListTodo;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/components/lists/ListUser.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/components/lists/ListUser.jsx
new file mode 100644
index 0000000..ceb3878
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/components/lists/ListUser.jsx
@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const ListUser = (props) => {
+ // const { } = props;
+
+ const [users, setUsers] = useState([]);
+
+ useEffect(() => {
+ const fetchUsers = async () => {
+ try {
+ const { data } = await axios.get('https://dummyjson.com/users?limit=5&select=firstName,lastName,age,email');
+
+ if (!data) throw Error('Something went wrong');
+ setUsers(data.users);
+ } catch (error) {
+ console.error(error);
+ throw Error(`Error: ${error}`);
+ }
+ };
+
+ fetchUsers();
+
+ // axios
+ // .get('https://dummyjson.com/users?limit=10&select=firstName,lastName,age,email')
+ // .then(({ data }) => {
+ // setUsers(data.users);
+ // })
+ // .catch((err) => {
+ // console.error(err);
+ // });
+
+ return () => {};
+ }, []);
+
+ return (
+ {error?.message}
+-
+ {users.length > 0 &&
+ users.map(({ firstName, lastName, age, email }, idx) => (
+
-
+
+ Name: {firstName} {lastName} +
+
+ Age: {age} +
+ Email: {email} +
+ ))}
+
+
+ );
+}
+
+export default AboutPage;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/ApiPage.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/ApiPage.jsx
new file mode 100644
index 0000000..2715797
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/ApiPage.jsx
@@ -0,0 +1,20 @@
+import ListTodo from '../components/lists/ListTodo';
+import ListUser from '../components/lists/ListUser';
+
+const ApiPage = (props) => {
+ // const { } = props;
+
+ return (
+ About
++ sit amet consectetur adipisicing elit. Minima, voluptatibus nobis molestiae, dignissimos id dolores minus iste + quisquam harum vitae rem dolorem debitis natus asperiores amet rerum ratione laboriosam quam. Sit corporis + voluptate laboriosam doloribus incidunt voluptatibus repellat. Excepturi vitae perferendis odit +
+
+
+ );
+};
+export default ApiPage;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/ContactPage.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/ContactPage.jsx
new file mode 100644
index 0000000..ca4e431
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/ContactPage.jsx
@@ -0,0 +1,20 @@
+import FormContact from '../components/forms/joi/FormContact';
+
+function ContactPage() {
+ return (
+
+ );
+}
+
+export default ContactPage;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/HomePage.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/HomePage.jsx
new file mode 100644
index 0000000..b9d1853
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/HomePage.jsx
@@ -0,0 +1,34 @@
+import ExampleUseEffectDidUpdate from '../components/examples/ExampleUseEffectDidUpdate';
+import ExampleUseEffectMount from '../components/examples/ExampleUseEffectMount';
+import ExampleUseEffectUnMount from '../components/examples/ExampleUseEffectUnMount';
+
+function HomePage() {
+ return (
+
+
+
+ APIs auslesen mit React
+Users
++
Todos
+
+
+
+
+
+ );
+}
+
+export default HomePage;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/UserPage.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/UserPage.jsx
new file mode 100644
index 0000000..3d35b61
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/UserPage.jsx
@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom';
+
+const UserPage = (props) => {
+ // const { } = props;
+
+ return (
+ Example Hooks
+
+
+ Hooks-Regeln
+Es gibt zwei wichtige Regeln für die Verwendung von Hooks:
+-
+
- Hooks sollten nur in Funktionskomponenten oder anderen Hooks verwendet werden. +
- + Hooks sollten immer oben in der Komponente verwendet werden, nicht in Schleifen, Bedingungen oder + verschachtelten Funktionen. + +
+
Example useEffect (mount)
++
Example useEffect (did update)
++
Example useEffect (unmount)
+
+
+ );
+};
+export default UserPage;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/UserProfilePage.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/UserProfilePage.jsx
new file mode 100644
index 0000000..053f8ce
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/pages/UserProfilePage.jsx
@@ -0,0 +1,19 @@
+import { useParams } from 'react-router-dom';
+import Badge from '../components/common/Badge';
+
+function UserProfilePage() {
+ const { userId } = useParams();
+
+ return (
+
+
+
+
+
+
+
+
+ User
+The nested user site:
++
+
+ User Profile
+
+ );
+}
+
+export default UserProfilePage;
diff --git a/06_react/unterricht/tag39/01_react-api-with-hooks/src/routes/Router.jsx b/06_react/unterricht/tag39/01_react-api-with-hooks/src/routes/Router.jsx
new file mode 100644
index 0000000..2e86b9b
--- /dev/null
+++ b/06_react/unterricht/tag39/01_react-api-with-hooks/src/routes/Router.jsx
@@ -0,0 +1,79 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+//import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+// Pages Komponenten
+import HomePage from '../pages/HomePage';
+import AboutPage from '../pages/AboutPage';
+import ContactPage from '../pages/ContactPage';
+import UserProfilePage from '../pages/UserProfilePage';
+import UserPage from '../pages/UserPage';
+import ApiPage from '../pages/ApiPage';
+
+// import Layout from '../layouts/Layout';
+
+// Alternative Definition von Routes über "createBrowserRouter" mit Objekten
+// const router = createBrowserRouter([
+// { path: '/', element:
+ User Profile
+ + sit amet consectetur adipisicing elit. Minima, voluptatibus nobis molestiae, dignissimos id dolores minus iste +
+
+
+
+ }>Admin Dashboard Page
+Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero atque eveniet hic temporibus
+