3.2 exercise

Author: pascual143

.learn/resets/03.1-your-first-component/app.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+export const PrintHello = () => {
+	return <h1>I Love React</h1>;
+};
+
+// change the syntax of the first parameter to make it <PrintHello /> instead of PrintHello()
+ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));

.learn/resets/03.2-a-real-component/app.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+//create your function here
+
+//remember to use ReactDOM.render to include the component into the website
+

exercises/03-render-with-functions/app.jsx

@@ -4,7 +4,7 @@ import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
 
 // This function returns a string that will be rendered
 export const PrintHello = () => {
-	return <h1>Hello World</h1>;
+	return <h1>I Love React</h1>;
 };
 
 //              what           where

exercises/03.1-your-first-component/app.jsx

@@ -6,4 +6,4 @@ export const PrintHello = () => {
 };
 
 // change the syntax of the first parameter to make it <PrintHello /> instead of PrintHello()
-ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));
+ReactDOM.render(<PrintHello />, document.querySelector("#myDiv"));

exercises/03.2-a-real-component/app.jsx

@@ -2,6 +2,17 @@ import React from "react";
 import ReactDOM from "react-dom";
 
 //create your function here
-
+const BootstrapCard = () => {
+    return (
+        <div className="card m-5">
+  <img className="card-img-top" src="../../.learn/assets/Dylan.png?raw=true" alt="Card image cap" />
+  <div className="card-body">
+    <h5 className="card-title">Bob Dylan</h5>
+    <p className="card-text">Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer/songwriter, author, and artist who has been an influential figure in popular music and culture for more than five decades.</p>
+    <a href="https://en.wikipedia.org/wiki/Bob_Dylan" className="btn btn-primary">Go to wikipedia</a>
+  </div>
+</div>
+    )
+}
 //remember to use ReactDOM.render to include the component into the website
-
+ReactDOM.render(<BootstrapCard />, document.querySelector('#myDiv'));