Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:react:learningunits:lu01:defining-a-component [2024/12/05 07:00] – kdemirci
+++ modul:ffit:react:learningunits:lu01:defining-a-component [2024/12/05 07:08] (aktuell) – kdemirci
@@ Zeile 20: / Zeile 20: @@
     <div>
       <img src="https://placehold.it/800" alt="Product Image" />
+      <h2>Product Name</h2>
+      <p>Product Description</p>
+      <p>$20</p>
+    </div>
+  );
+}
+</code>
+===== Export the component =====
+Now we have a component. But if we want to use it in other files, we need to export the function. To export a component, you need to add the keywords "export default" before the function declaration. This will mark the function to be exported. Now you can include the file in another file to use this component.
+Product.js
+<code javascript>
+export default function Product() {
+  return (
+    <div>
+      <img src="https://placehold.it/800" alt="Product Image" />
+    </div>
+  );
+}
+</code>
+ProductsList.js
+<code javascript>
+import Product from './Product.js';
+export default function ProductsList() {
+  return (
+    <div>
+      <h1>Our Products</h1>
+      <Product />
+      <Product />
+      <Product />
+      <Product />
     </div>
   );
 }
 </code>