JoseGeek78

.learn/resets/01-hello-world/app.jsx

@@ -0,0 +1,12 @@
+import React from "react"; //Main React.js library
+
+import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
+
+// WHAT: This variable returns contains the html to render
+let output = <span>James is 12 years old</span>;
+
+// WHERE: A DOM element that will contain the entire react generated html
+const myDiv = document.querySelector("#myDiv");
+
+//what   //where
+ReactDOM.render(output, myDiv);

.learn/resets/01.1-hello-jsx/app.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+// if we have a variable
+let age = "12";
+let name = "John";
+
+// we can use it in our html like this
+let output = <span>James is {age} years old</span>;
+
+// use react-dom to render it
+ReactDOM.render(output, document.querySelector("#myDiv"));

.learn/resets/01.2-rendering-from-objects/app.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const customer = {
+	first_name: "Bob",
+	last_name: "Dylan"
+};
+
+//              your code inside these <div> tags
+const output = <div></div>;
+
+//              what     where
+ReactDOM.render(output, document.querySelector("#myDiv"));

.learn/resets/01.3-building-a-layout/app.jsx

@@ -0,0 +1,23 @@
+import React from "react"; //Main React.js library
+import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
+
+const data = {
+	image: "../../.learn/assets/Dylan.png?raw=true",
+	cardTitle: "Bob Dylan",
+	cardDescription:
+		"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.",
+	button: {
+		url: "https://en.wikipedia.org/wiki/Bob_Dylan",
+		label: "Go to wikipedia",
+	},
+};
+
+let content = (
+		<img src={data.image} />
+);
+/**
+ * define the variable 'content' here and fill it with the
+ * needed code to render the bootstrap card
+ **/
+
+ReactDOM.render(content, document.querySelector("#myDiv"));

.learn/resets/01.4-building-html-from-arrays/app.jsx

@@ -0,0 +1,9 @@
+import React from "react"; //Main React.js library
+import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
+
+// only update the value of this array
+const navlinkItems = [];
+
+const content = <ul className="nav">{navlinkItems}</ul>;
+
+ReactDOM.render(content, document.querySelector("#myDiv"));

.learn/resets/02-maping-array-to-li/app.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const animals = ["Horse", "Turtle", "Elephant", "Monkey"];
+
+/**
+ * change the content inside the map function
+ **/
+const animalsInHTML = animals.map((singleAnimal, i) => {
+	return <li>hello</li>;
+});
+
+ReactDOM.render(<ul>{animalsInHTML}</ul>, document.querySelector("#myDiv"));

.learn/resets/02.1-maping-array-objects-to-li/app.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const animals = [{ label: "Horse" }, { label: "Turtle" }, { label: "Elephant" }, { label: "Monkey" }];
+
+/**
+ * change the content of the map function
+ **/
+const animalsInHTML = animals.map((singleAnimal, i) => {
+	return <li>hello</li>;
+});
+
+ReactDOM.render(<ul>{animalsInHTML}</ul>, document.querySelector("#myDiv"));

.learn/resets/02.2-maping-array-of-objects-to-li/app.jsx

@@ -0,0 +1,16 @@
+import React from "react"; //Main React.js library
+import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
+
+const planets = ["Mars", "Venus", "Jupiter", "Earth", "Saturn", "Neptune"];
+
+/**
+ * 1) Create the mapping function and use it to generate a new array of
+ * planets in html called planetsInHTML
+ */
+
+
+
+// 2) add the array planetsInHTML inside the innerHTML of this ul
+const content = (<ul className="list-group m-5"></ul>);
+
+ReactDOM.render(content, document.querySelector("#myDiv"));

exercises/01-hello-world/app.jsx

@@ -3,8 +3,11 @@ import React from "react"; //Main React.js library
 import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
 
 // WHAT: This variable returns contains the html to render
-let output = <span>James is 12 years old</span>;
-
+let output = (
+	<span>
+		James is <strong>12</strong> years old
+	</span>
+)
 // WHERE: A DOM element that will contain the entire react generated html
 const myDiv = document.querySelector("#myDiv");
 

exercises/01.1-hello-jsx/app.jsx

@@ -6,7 +6,7 @@ let age = "12";
 let name = "John";
 
 // we can use it in our html like this
-let output = <span>James is {age} years old</span>;
+let output = <span>{name} is {age} years old</span>;
 
 // use react-dom to render it
 ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.2-rendering-from-objects/app.jsx

@@ -3,11 +3,16 @@ import ReactDOM from "react-dom";
 
 const customer = {
 	first_name: "Bob",
-	last_name: "Dylan"
+	last_name: "Dylan",
 };
 
 //              your code inside these <div> tags
-const output = <div></div>;
+const output = (
+	<div>
+		<h1>My name is {customer.first_name}</h1>
+		<h2>My last name is {customer.last_name}</h2>
+	</div>
+);
 
 //              what     where
 ReactDOM.render(output, document.querySelector("#myDiv"));

exercises/01.3-building-a-layout/app.jsx

@@ -13,7 +13,16 @@ const data = {
 };
 
 let content = (
-		<img src={data.image} />
+	<div className="card m-5">
+		<img alt="Card image cap" src={data.image} className="card-img-top" />
+		<div className="card-body">
+			<h5 className="card-title">{data.cardTitle}</h5>
+			<p className="card-text">{data.cardDescription}</p>
+			<a href={data.button.url} className="btn btn-primary">
+				{data.button.label}
+			</a>
+		</div>
+	</div>
 );
 /**
  * define the variable 'content' here and fill it with the

exercises/01.4-building-html-from-arrays/app.jsx

@@ -2,7 +2,23 @@ import React from "react"; //Main React.js library
 import ReactDOM from "react-dom"; //we use ReactDOM to render into the DOM
 
 // only update the value of this array
-const navlinkItems = [];
+const navlinkItems = [
+	<li className="nav-item">
+		<a className="nav-link" href="#">
+			Link to google.com
+		</a>
+	</li>,
+	<li className="nav-item">
+		<a className="nav-link" href="#">
+			Link to facebook.com
+		</a>
+	</li>,
+	<li className="nav-item">
+		<a className="nav-link" href="#">
+			Link to amazon.com
+		</a>
+	</li>,
+];
 
 const content = <ul className="nav">{navlinkItems}</ul>;
 

exercises/02-maping-array-to-li/app.jsx

@@ -7,7 +7,7 @@ const animals = ["Horse", "Turtle", "Elephant", "Monkey"];
  * change the content inside the map function
  **/
 const animalsInHTML = animals.map((singleAnimal, i) => {
-	return <li>hello</li>;
+	return <li key={i}>{singleAnimal}</li>;
 });
 
 ReactDOM.render(<ul>{animalsInHTML}</ul>, document.querySelector("#myDiv"));

exercises/02.1-maping-array-objects-to-li/app.jsx

@@ -7,7 +7,7 @@ const animals = [{ label: "Horse" }, { label: "Turtle" }, { label: "Elephant" },
  * change the content of the map function
  **/
 const animalsInHTML = animals.map((singleAnimal, i) => {
-	return <li>hello</li>;
+	return <li key={i}>{singleAnimal.label}</li>;
 });
 
 ReactDOM.render(<ul>{animalsInHTML}</ul>, document.querySelector("#myDiv"));