Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:react:learningunits:lu01:using-variables [2024/12/05 07:22] – kdemirci
+++ modul:ffit:react:learningunits:lu01:using-variables [2024/12/18 16:11] (aktuell) – kmaurizi
@@ Zeile 1: / Zeile 1: @@
 ====== LU01b - Using Variables ======
-We can use variables to fill out our component dynamically. In JSX we have to use the curly brackets {} to display value. If we add the parameter "props" to our function, we can use it in our function to display value given to this component
+We can use variables to populate our component dynamically. In JSX we need to use the curly brackets {} to display the value. If we add the parameter "props" to our function, we can use it in our function to display the value given to this component.
 Product.js
-<code javascript>
+<file javascript Product.js >
 export default function Product(props) {
   return (
@@ Zeile 20: / Zeile 20: @@
   );
 }
-</code>
+</file>
 ProductsList.js
@@ Zeile 59: / Zeile 59: @@
 </code>
+===== Using children of component =====
+We can nest components and also use other elements in our component brackets.
+Content.js
+<code javascript>
+export default function Content(props) {
+  return (
+    <section className="content">
+      {props.children}
+    </section>
+  )
+}
+</code>
+App.js
+<code javascript>
+import Content from "./Content.js"
+import ProductsList from "./ProductsList.js"
+export default function App() {
+  return (
+    <div className="app">
+      <Content>
+        This is my content.
+        <ProductsList />
+      </Content>
+    </div>
+  )
+}
+</code>