diff --git a/06_react/unterricht/tag38/02_react-api-with-hooks/src/App.jsx b/06_react/unterricht/tag38/02_react-api-with-hooks/src/App.jsx index 38600c8..fe1cec5 100644 --- a/06_react/unterricht/tag38/02_react-api-with-hooks/src/App.jsx +++ b/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 ( <> -
diff --git a/06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseEffectMount.jsx b/06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseEffectMount.jsx new file mode 100644 index 0000000..f98749d --- /dev/null +++ b/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 ( +
+
+

Box was rendered

+
+
+ ); +}; +export default ExampleUseEffectMount; diff --git a/06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/HomePage.jsx b/06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/HomePage.jsx index d4a4d32..235f52a 100644 --- a/06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/HomePage.jsx +++ b/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 (
-

Home

-

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, voluptatibus.

+

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)

+
); }