begin react foundations course & take notes

2025-12-22 22:16:28 +01:00 · 2025-04-18 21:10:53 +02:00 · 2025-04-18 21:10:53 +02:00 · 507b113ce9
commit 507b113ce9
parent db91ca0269
2 changed files with 239 additions and 0 deletions
--- a/react-foundations-course/react.html
+++ b/react-foundations-course/react.html
@ -0,0 +1,53 @@
+<html>
+  <body>
+    <div id="app"></div>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <script type="text/jsx">
+        const app = document.getElementById("app");
+
+        function createTitle(title){
+          if(title){
+            return title;
+          }
+          else{
+            return "Default createTitle";
+          }
+        }
+
+        function Header({ title }){
+          return (<h1>{createTitle(title)}</h1>);
+        }
+
+        function HomePage(){
+          const names = ['Max Meier', 'Josef Berchtold', 'Margrit Barmettler'];
+
+          const [likes, setLikes] = React.useState(0);
+
+          function handleClick(){
+            setLikes(likes + 1);
+          }
+
+          return (
+            <div>
+              <Header title="React" />
+              <Header title="something new" />
+
+              <ul>
+                {names.map((name) => (
+                  <li key={name}>{name}</li>
+                ))}
+              </ul>
+
+              <button onClick={handleClick}>Like ({likes})</button>
+            </div>
+          );
+        }
+
+        const root = ReactDOM.createRoot(app);
+
+        root.render(<HomePage />);
+    </script>
+  </body>
+</html>