06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseEffectDidUpdate.jsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+import { FaPlus } from 'react-icons/fa6';
+const ExampleUseEffectDidUpdate = (props) => {
+  // const { } = props;
+
+  const [value, setValue] = useState(0);
+
+  useEffect(() => {
+    // mount
+    console.log('first render and rerender: ', value);
+
+    return () => {
+      // unmount
+    };
+  }, [value]); // <-- wenn state sich ändert, wird useEffect erneut ausgeführt (did update)
+
+  return (
+    <div className="example-use-effect-did-update">
+      <p>The value is: {value}</p>
+      <button
+        type="button"
+        className="btn btn-dark button-count-up"
+        aria-label="count up"
+        onClick={(e) => setValue(value + 1)}>
+        <FaPlus /> Count Up
+      </button>
+    </div>
+  );
+};
+export default ExampleUseEffectDidUpdate;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseEffectMount.jsx

@@ -1,11 +1,21 @@
+import { useEffect } from 'react';
+
 const ExampleUseEffectMount = (props) => {
   // const { } = props;
 
-  console.log(document.querySelector('.box'));
+  console.log(document.querySelector('#box')); // null
+  useEffect(() => {
+    //mount
+    console.log(document.querySelector('#box')); // <div class="box"></div> // JSX Element liegt als gerendertes HTML vor.
+
+    document.querySelector('#box').style.color = 'white';
+    document.querySelector('#box').style.backgroundColor = '#2a2a2a';
+    document.querySelector('#box').style.padding = '1rem';
+  }, []);
 
   return (
     <div className="example-use-effect-mount">
-      <div className="box">
+      <div id="box">
         <p>Box was rendered</p>
       </div>
     </div>

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseEffectUnMount.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+const ExampleUseEffectUnMount = (props) => {
+  // const { } = props;
+
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    // mount
+    const interval = setInterval(() => {
+      setTimer((time) => time + 1);
+    }, 1000);
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      // cleanup - unmount
+      clearInterval(interval);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []); // didupdate
+
+  // EventHandler
+  const handleResize = (e) => {
+    // console.log('Event: ', e);
+    const { x, y, width: w, height: h } = document.body.getBoundingClientRect(); // window.outerWidth,
+    console.log({ x, y, w: parseInt(w), h: parseInt(h) });
+  };
+
+  return (
+    <div className="example-use-effect-unmount">
+      <p>Timer: {timer}</p>
+    </div>
+  );
+};
+export default ExampleUseEffectUnMount;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/lists/ListTodo.jsx

@@ -0,0 +1,15 @@
+const ListTodo = (props) => {
+  // const { } = props;
+
+  return (
+    <ul className="list-todo list-group list-group-flush">
+      <li className="list-group-item list-item-todo">
+        <input type="checkbox" name="todo-cb" id="input-todo-1" className="form-check-input" checked={true} />
+        <label htmlFor="input-todo-1" className="form-check-label">
+          Gassi Gehen
+        </label>
+      </li>
+    </ul>
+  );
+};
+export default ListTodo;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/navs/Navbar.jsx

@@ -53,6 +53,17 @@ function Navbar() {
                 Contact
               </NavLink>
             </li>
+            <li className="nav-item">
+              <NavLink
+                className={({ isActive }) =>
+                  isActive
+                    ? 'nav-link active' //
+                    : 'nav-link'
+                }
+                to="/api">
+                APIs
+              </NavLink>
+            </li>
           </ul>
           <ul className="navbar-nav">
             <li className="nav-item dropdown">

06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/ApiPage.jsx

@@ -0,0 +1,17 @@
+import ListTodo from '../components/lists/ListTodo';
+
+const ApiPage = (props) => {
+  // const { } = props;
+
+  return (
+    <div className="page-api">
+      <div className="container py-5">
+        <h1>APIs auslesen mit React</h1>
+        <hr />
+        <h2>Todos</h2>
+        <ListTodo />
+      </div>
+    </div>
+  );
+};
+export default ApiPage;

06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/HomePage.jsx

@@ -1,4 +1,6 @@
+import ExampleUseEffectDidUpdate from '../components/examples/ExampleUseEffectDidUpdate';
 import ExampleUseEffectMount from '../components/examples/ExampleUseEffectMount';
+import ExampleUseEffectUnMount from '../components/examples/ExampleUseEffectUnMount';
 
 function HomePage() {
   return (
@@ -18,6 +20,12 @@ function HomePage() {
       <hr />
       <h2>Example useEffect (mount)</h2>
       <ExampleUseEffectMount />
+      <hr />
+      <h2>Example useEffect (did update)</h2>
+      <ExampleUseEffectDidUpdate />
+      <hr />
+      <h2>Example useEffect (unmount)</h2>
+      <ExampleUseEffectUnMount />
     </div>
   );
 }

06_react/unterricht/tag38/02_react-api-with-hooks/src/routes/Router.jsx

@@ -7,6 +7,7 @@ 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';
 
@@ -41,6 +42,7 @@ const Router = () => {
       <Route path="/" element={<HomePage />} />
       <Route path="/about" element={<AboutPage />} />
       <Route path="/contact" element={<ContactPage />} />
+      <Route path="/api" element={<ApiPage />} />
 
       {/* Dynamic Routes */}
       <Route path="/flights/:from/:to" element={<h2>Flights</h2>} />