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

@@ -2,21 +2,12 @@ import Navbar from './components/navs/Navbar';
 import Router from './routes/Router';
 import HeaderMain from './components/headers/HeaderMain';
 import FooterMain from './components/footers/FooterMain';
-import { Navigate, useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
 
 function App() {
-  // const navigate = useNavigate();
-
-  // useEffect(() => {
-  //   navigate('/contact');
-  // }, []);
-
   return (
     <>
       <HeaderMain />
       <Navbar />
-      <Navigate to="/contact" />
       <main id="main">
         <Router />
       </main>

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

@@ -0,0 +1,14 @@
+const ExampleUseEffectMount = (props) => {
+  // const { } = props;
+
+  console.log(document.querySelector('.box'));
+
+  return (
+    <div className="example-use-effect-mount">
+      <div className="box">
+        <p>Box was rendered</p>
+      </div>
+    </div>
+  );
+};
+export default ExampleUseEffectMount;

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

@@ -1,8 +1,23 @@
+import ExampleUseEffectMount from '../components/examples/ExampleUseEffectMount';
+
 function HomePage() {
   return (
     <div className="page-home container py-5">
-      <h2>Home</h2>
+      <h1>Example Hooks</h1>
-      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, voluptatibus.</p>
+      <div className="alert alert-warning">
+        <h3>Hooks-Regeln</h3>
+        <p>Es gibt zwei wichtige Regeln für die Verwendung von Hooks:</p>
+        <ul className="list">
+          <li>Hooks sollten nur in Funktionskomponenten oder anderen Hooks verwendet werden.</li>
+          <li>
+            Hooks sollten immer oben in der Komponente verwendet werden, nicht in Schleifen, Bedingungen oder
+            verschachtelten Funktionen.
+          </li>
+        </ul>
+      </div>
+      <hr />
+      <h2>Example useEffect (mount)</h2>
+      <ExampleUseEffectMount />
     </div>
   );
 }