EjerciciosRealizados

Author: eybagit

.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 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,20 @@
+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",
+},
+};
+
+// Modify the 'content' variable below to display the desired bootstrap card
+let content = (
+<img src={data.image} />
+);
+
+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, index) => {
+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, index) => {
+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";
+import ReactDOM from "react-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"));

.learn/resets/03-render-with-functions/app.jsx

@@ -0,0 +1,11 @@
+import React from "react"; // Main React.js library
+
+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>;
+};
+
+// what where
+ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));

.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"));