Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:react:learningunits:lu01:using-variables [2024/12/05 07:25] – re 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 61: / Zeile 61: @@
 ===== Using children of component =====
-We can nest components and also use other element in our component brackets.
+We can nest components and also use other elements in our component brackets.
-Sidebar.js
+Content.js
 <code javascript>
-export default function Sidebar(props) {
+export default function Content(props) {
   return (
-    <aside>
+    <section className="content">
       {props.children}
-    </aside>
+    </section>
   )
 }
@@ Zeile 76: / Zeile 76: @@
 App.js
 <code javascript>
+import Content from "./Content.js"
+import ProductsList from "./ProductsList.js"
 export default function App() {
   return (
     <div className="app">
-      <Header />
+      <Content>
-      <Sidebar>
+        This is my content.
-        This is my content for my sidebar.
+        <ProductsList />
-      </Sidebar>
+      </Content>
     </div>
   )
 }
 </code>