From 4c7ace70f8298174143e56084b18a0050aea3dcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Arreaza?=
<112995166+Andres-Arreaza@users.noreply.github.com>
Date: Tue, 17 Sep 2024 00:56:49 +0000
Subject: [PATCH 1/2] actualizacion 1-AA
---
.learn/resets/01-hello-world/app.jsx | 12 +++++++++++
.learn/resets/01.1-hello-jsx/app.jsx | 12 +++++++++++
.../01.2-rendering-from-objects/app.jsx | 13 ++++++++++++
.learn/resets/01.3-building-a-layout/app.jsx | 20 +++++++++++++++++++
.../01.4-building-html-from-arrays/app.jsx | 9 +++++++++
.learn/resets/02-maping-array-to-li/app.jsx | 13 ++++++++++++
.../02.1-maping-array-objects-to-li/app.jsx | 13 ++++++++++++
exercises/01-hello-world/app.jsx | 10 ++++++----
exercises/01.1-hello-jsx/app.jsx | 6 +++++-
exercises/01.2-rendering-from-objects/app.jsx | 6 +++++-
exercises/01.3-building-a-layout/app.jsx | 11 +++++++++-
.../01.4-building-html-from-arrays/app.jsx | 18 ++++++++++++++++-
exercises/02-maping-array-to-li/app.jsx | 2 +-
.../02.1-maping-array-objects-to-li/app.jsx | 2 +-
14 files changed, 137 insertions(+), 10 deletions(-)
create mode 100644 .learn/resets/01-hello-world/app.jsx
create mode 100644 .learn/resets/01.1-hello-jsx/app.jsx
create mode 100644 .learn/resets/01.2-rendering-from-objects/app.jsx
create mode 100644 .learn/resets/01.3-building-a-layout/app.jsx
create mode 100644 .learn/resets/01.4-building-html-from-arrays/app.jsx
create mode 100644 .learn/resets/02-maping-array-to-li/app.jsx
create mode 100644 .learn/resets/02.1-maping-array-objects-to-li/app.jsx
diff --git a/.learn/resets/01-hello-world/app.jsx b/.learn/resets/01-hello-world/app.jsx
new file mode 100644
index 00000000..556bb60d
--- /dev/null
+++ b/.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 = James is 12 years old;
+
+// WHERE: A DOM element that will contain the entire react generated html
+const myDiv = document.querySelector("#myDiv");
+
+ //what //where
+ReactDOM.render(output, myDiv);
diff --git a/.learn/resets/01.1-hello-jsx/app.jsx b/.learn/resets/01.1-hello-jsx/app.jsx
new file mode 100644
index 00000000..dc9c3ecf
--- /dev/null
+++ b/.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 = James is {age} years old;
+
+// Use react-dom to render it
+ReactDOM.render(output, document.querySelector("#myDiv"));
diff --git a/.learn/resets/01.2-rendering-from-objects/app.jsx b/.learn/resets/01.2-rendering-from-objects/app.jsx
new file mode 100644
index 00000000..466a244b
--- /dev/null
+++ b/.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
tags
+const output = ;
+
+// what where
+ReactDOM.render(output, document.querySelector("#myDiv"));
diff --git a/.learn/resets/01.3-building-a-layout/app.jsx b/.learn/resets/01.3-building-a-layout/app.jsx
new file mode 100644
index 00000000..3d27faa1
--- /dev/null
+++ b/.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 = (
+
+);
+
+ReactDOM.render(content, document.querySelector("#myDiv"));
diff --git a/.learn/resets/01.4-building-html-from-arrays/app.jsx b/.learn/resets/01.4-building-html-from-arrays/app.jsx
new file mode 100644
index 00000000..044bde7d
--- /dev/null
+++ b/.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 =
{navlinkItems}
;
+
+ReactDOM.render(content, document.querySelector("#myDiv"));
diff --git a/.learn/resets/02-maping-array-to-li/app.jsx b/.learn/resets/02-maping-array-to-li/app.jsx
new file mode 100644
index 00000000..d2efa909
--- /dev/null
+++ b/.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
hello
;
+});
+
+ReactDOM.render(
{animalsInHTML}
, document.querySelector("#myDiv"));
diff --git a/.learn/resets/02.1-maping-array-objects-to-li/app.jsx b/.learn/resets/02.1-maping-array-objects-to-li/app.jsx
new file mode 100644
index 00000000..87006bcb
--- /dev/null
+++ b/.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
hello
;
+});
+
+ReactDOM.render(
{animalsInHTML}
, document.querySelector("#myDiv"));
diff --git a/exercises/01-hello-world/app.jsx b/exercises/01-hello-world/app.jsx
index 556bb60d..82839c90 100644
--- a/exercises/01-hello-world/app.jsx
+++ b/exercises/01-hello-world/app.jsx
@@ -3,10 +3,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 = James is 12 years old;
+let ouput = (
+
+ James is 12 years old
+
+);
-// WHERE: A DOM element that will contain the entire react generated html
const myDiv = document.querySelector("#myDiv");
- //what //where
-ReactDOM.render(output, myDiv);
+ReactDOM.render(ouput, myDiv);
diff --git a/exercises/01.1-hello-jsx/app.jsx b/exercises/01.1-hello-jsx/app.jsx
index dc9c3ecf..86158c47 100644
--- a/exercises/01.1-hello-jsx/app.jsx
+++ b/exercises/01.1-hello-jsx/app.jsx
@@ -6,7 +6,11 @@ let age = "12";
let name = "John";
// We can use it in our html like this
-let output = James is {age} years old;
+let output = (
+
+ {name} is {age} years old
+
+);
// Use react-dom to render it
ReactDOM.render(output, document.querySelector("#myDiv"));
diff --git a/exercises/01.2-rendering-from-objects/app.jsx b/exercises/01.2-rendering-from-objects/app.jsx
index 466a244b..9a0dea45 100644
--- a/exercises/01.2-rendering-from-objects/app.jsx
+++ b/exercises/01.2-rendering-from-objects/app.jsx
@@ -7,7 +7,11 @@ const customer = {
};
// Your code inside these
tags
-const output = ;
+const output =
+
+
My name is {customer.first_name}
+
My last name is {customer.last_name}
+
;
// what where
ReactDOM.render(output, document.querySelector("#myDiv"));
diff --git a/exercises/01.3-building-a-layout/app.jsx b/exercises/01.3-building-a-layout/app.jsx
index 3d27faa1..78475cc4 100644
--- a/exercises/01.3-building-a-layout/app.jsx
+++ b/exercises/01.3-building-a-layout/app.jsx
@@ -14,7 +14,16 @@ const data = {
// Modify the 'content' variable below to display the desired bootstrap card
let content = (
-
+
);
ReactDOM.render(content, document.querySelector("#myDiv"));
diff --git a/exercises/01.4-building-html-from-arrays/app.jsx b/exercises/01.4-building-html-from-arrays/app.jsx
index 044bde7d..e61c6c9a 100644
--- a/exercises/01.4-building-html-from-arrays/app.jsx
+++ b/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 = [
+
);
+
+ReactDOM.render(content, document.querySelector("#myDiv"));
diff --git a/.learn/resets/03-render-with-functions/app.jsx b/.learn/resets/03-render-with-functions/app.jsx
new file mode 100644
index 00000000..0d194961
--- /dev/null
+++ b/.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
Hello World
;
+};
+
+// what where
+ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));
diff --git a/.learn/resets/03.1-your-first-component/app.jsx b/.learn/resets/03.1-your-first-component/app.jsx
new file mode 100644
index 00000000..10512a13
--- /dev/null
+++ b/.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
I Love React
;
+};
+
+// Change the syntax of the first parameter to make it instead of PrintHello()
+ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));
diff --git a/.learn/resets/03.2-a-real-component/app.jsx b/.learn/resets/03.2-a-real-component/app.jsx
new file mode 100644
index 00000000..872b7e9b
--- /dev/null
+++ b/.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
+
diff --git a/.learn/resets/03.3-component-properties/app.jsx b/.learn/resets/03.3-component-properties/app.jsx
new file mode 100644
index 00000000..c0ee4886
--- /dev/null
+++ b/.learn/resets/03.3-component-properties/app.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropType from "prop-types";
+
+const BootstrapCard = props => {
+ // 1) Replace the hard-coded image, description, link, etc. With their property variable
+ return (
+
+
+
+
{props.title}
+
Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter.
+ );
+};
+BootstrapCard.propTypes = {
+ title: PropType.string
+ // 2) Add here the new properties into the proptypes object
+};
+
+
+// 3) Use ReactDOM to add the component into then DOM element #myDiv
diff --git a/.learn/resets/03.4-hero-component/app.jsx b/.learn/resets/03.4-hero-component/app.jsx
new file mode 100644
index 00000000..3de969a3
--- /dev/null
+++ b/.learn/resets/03.4-hero-component/app.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+const Hero = (props) => {
+ // Here you have to return expected html using the properties being passed to the component
+};
+
+Hero.propTypes = {
+ // PropTypes here
+ title: PropTypes.string,
+};
+
+ReactDOM.render(
+ ,
+
+ document.querySelector('#myDiv')
+);
diff --git a/.learn/resets/03.5-alert-component/app.jsx b/.learn/resets/03.5-alert-component/app.jsx
new file mode 100644
index 00000000..b59b4e2a
--- /dev/null
+++ b/.learn/resets/03.5-alert-component/app.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+/**
+ * Here you have to declare your Alert component and return
+ * the html that bootstrap dictates for its alert component
+ */
+
+
+// Here is where the component is being used, you don't have to edit this part
+// But it helps you understand what properties the component is using
+ReactDOM.render(, document.querySelector("#myDiv"));
diff --git a/.learn/resets/04-conditional-rendering/app.jsx b/.learn/resets/04-conditional-rendering/app.jsx
new file mode 100644
index 00000000..05c135ed
--- /dev/null
+++ b/.learn/resets/04-conditional-rendering/app.jsx
@@ -0,0 +1,27 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+const Alert = props => {
+ // Add the condition inside this function
+
+ return (
+
+ This is a primary alert - check it out!
+
+ );
+};
+
+Alert.propTypes = {
+
+};
+
+// Here is where the component is being used, you don't have to edit this part
+// But it helps you understand what properties are being passed to the component
+ReactDOM.render(
+
+
+
+
,
+ document.querySelector("#myDiv")
+);
diff --git a/.learn/resets/04.1-conditional-rendering/app.jsx b/.learn/resets/04.1-conditional-rendering/app.jsx
new file mode 100644
index 00000000..a577e39f
--- /dev/null
+++ b/.learn/resets/04.1-conditional-rendering/app.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+const Alert = props => {
+ // Your component here
+
+};
+Alert.propTypes = {
+ color: PropTypes.string,
+ text: PropTypes.string
+};
+
+// Here is where the component is being used, you don't have to edit this part
+// But it helps you understand what properties are being passed to the component
+ReactDOM.render(
+
+
+
+
,
+ document.querySelector("#myDiv")
+);
diff --git a/.learn/resets/04.2-conditional-rendering/app.jsx b/.learn/resets/04.2-conditional-rendering/app.jsx
new file mode 100644
index 00000000..6882a95d
--- /dev/null
+++ b/.learn/resets/04.2-conditional-rendering/app.jsx
@@ -0,0 +1,34 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+// Add the green inside this function
+const Alert = props => {
+ const colorClasses = {
+ red: "alert-danger",
+ yellow: "alert-warning"
+ };
+
+ if (colorClasses[props.color] === undefined) alert(`The color ${props.color} is not in the possible list of colors`);
+
+ return (
+
+ {props.text}
+
+ );
+};
+Alert.propTypes = {
+ color: PropTypes.string,
+ text: PropTypes.string
+};
+
+// Here is where the component is being used, you don't have to edit this part
+// But it helps you understand what properties is the component using
+ReactDOM.render(
+
+
+
+
+
,
+ document.querySelector("#myDiv")
+);
diff --git a/.learn/resets/05-adding-styles/app.jsx b/.learn/resets/05-adding-styles/app.jsx
new file mode 100644
index 00000000..7055ed14
--- /dev/null
+++ b/.learn/resets/05-adding-styles/app.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+// Add the styles here
+const mySuperStyles = {
+
+};
+
+const Badge = props => {
+ return (
+
+ );
+};
+
+Badge.propTypes = {
+ label: PropTypes.string,
+ number: PropTypes.string
+};
+
+ReactDOM.render(, document.querySelector("#myDiv"));
diff --git a/.learn/resets/05.1-second-styles/app.jsx b/.learn/resets/05.1-second-styles/app.jsx
new file mode 100644
index 00000000..96ec4df2
--- /dev/null
+++ b/.learn/resets/05.1-second-styles/app.jsx
@@ -0,0 +1,31 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+const buttonStyles = {
+ // Write button styles here
+
+};
+
+const badgeStyles = {
+ // Write the span styles here
+
+};
+
+const Badge = props => {
+ return (
+
+ );
+};
+
+Badge.propTypes = {
+ label: PropTypes.string,
+ number: PropTypes.string
+};
+
+ReactDOM.render(, document.querySelector("#myDiv"));
diff --git a/.learn/resets/06-listening-to-events/app.jsx b/.learn/resets/06-listening-to-events/app.jsx
new file mode 100644
index 00000000..75ab5e16
--- /dev/null
+++ b/.learn/resets/06-listening-to-events/app.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+const clickHandler = e => {
+ console.log("I was clicked!", e);
+};
+
+const Alert = () => {
+ return ;
+};
+
+// You don't have to edit anything below
+ReactDOM.render(, document.querySelector("#myDiv"));
diff --git a/exercises/01-hello-world/app.jsx b/exercises/01-hello-world/app.jsx
index 82839c90..ab94704f 100644
--- a/exercises/01-hello-world/app.jsx
+++ b/exercises/01-hello-world/app.jsx
@@ -1,14 +1,18 @@
-import React from "react"; // Main React.js library
+//Crear un texto con react, el cual genere una tag span que contenga una tag strong.
-import ReactDOM from "react-dom"; // We use ReactDOM to render into the DOM
+//Importamos las librerias de react.
+import React from "react";
+import ReactDOM from "react-dom";
-// WHAT: This variable contains the html to render
-let ouput = (
+//Ahora creamos un nuevo componente el cual contenga la tag span.
+let output = (
James is 12 years old
);
+//Creamos una constante, la cual nos trae el valor de id.
const myDiv = document.querySelector("#myDiv");
+//llamamos a la funcion ReactDOM para que se muestre por pantalla el componente creado.
+ReactDOM.render(output, myDiv);
-ReactDOM.render(ouput, myDiv);
diff --git a/exercises/01.1-hello-jsx/app.jsx b/exercises/01.1-hello-jsx/app.jsx
index 86158c47..87562357 100644
--- a/exercises/01.1-hello-jsx/app.jsx
+++ b/exercises/01.1-hello-jsx/app.jsx
@@ -6,11 +6,7 @@ let age = "12";
let name = "John";
// We can use it in our html like this
-let output = (
-
- {name} is {age} years old
-
-);
+let output = {name} is {age} years old;
// Use react-dom to render it
ReactDOM.render(output, document.querySelector("#myDiv"));
diff --git a/exercises/01.2-rendering-from-objects/app.jsx b/exercises/01.2-rendering-from-objects/app.jsx
index 9a0dea45..74e25be1 100644
--- a/exercises/01.2-rendering-from-objects/app.jsx
+++ b/exercises/01.2-rendering-from-objects/app.jsx
@@ -1,17 +1,19 @@
+//FOMRA 1
import React from "react";
import ReactDOM from "react-dom";
-const customer = {
+let customer = {
first_name: "Bob",
- last_name: "Dylan"
+ last_name: "Dylan",
};
-// Your code inside these
tags
-const output =
+const output = (
My name is {customer.first_name}
My last name is {customer.last_name}
-
;
+
+);
-// what where
-ReactDOM.render(output, document.querySelector("#myDiv"));
+let myDiv = document.querySelector("#myDiv");
+
+ReactDOM.render(output, myDiv);
diff --git a/exercises/01.3-building-a-layout/app.jsx b/exercises/01.3-building-a-layout/app.jsx
index 78475cc4..1ca6479a 100644
--- a/exercises/01.3-building-a-layout/app.jsx
+++ b/exercises/01.3-building-a-layout/app.jsx
@@ -26,4 +26,4 @@ let content = (
+ );
+});
// 2) Add the array planetsInHTML inside the innerHTML of this
-const content = (
);
+const content =
{planetsInHTML}
;
ReactDOM.render(content, document.querySelector("#myDiv"));
diff --git a/exercises/03-render-with-functions/app.jsx b/exercises/03-render-with-functions/app.jsx
index 0d194961..95404425 100644
--- a/exercises/03-render-with-functions/app.jsx
+++ b/exercises/03-render-with-functions/app.jsx
@@ -1,11 +1,11 @@
-import React from "react"; // Main React.js library
+//Crea un codigo el cual imprima por pantalla I Love React, pero que se imprima como un componente.
-import ReactDOM from "react-dom"; // We use ReactDOM to render into the DOM
+//Importamos a las bibliotecas de Recat.
+import React from "react";
+import ReactDOM from "react-dom";
-// This function returns a string that will be rendered
-export const PrintHello = () => {
- return
Hello World
;
+const PrintHello = () => {
+ return
I Love React
;
};
-// what where
-ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));
+ReactDOM.render(), document.querySelector("#myDiv");
\ No newline at end of file
diff --git a/exercises/03.1-your-first-component/app.jsx b/exercises/03.1-your-first-component/app.jsx
index 10512a13..b1133e60 100644
--- a/exercises/03.1-your-first-component/app.jsx
+++ b/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 instead of PrintHello()
-ReactDOM.render(PrintHello(), document.querySelector("#myDiv"));
+ReactDOM.render(, document.querySelector("#myDiv"));
diff --git a/exercises/03.2-a-real-component/app.jsx b/exercises/03.2-a-real-component/app.jsx
index 872b7e9b..7dff9d95 100644
--- a/exercises/03.2-a-real-component/app.jsx
+++ b/exercises/03.2-a-real-component/app.jsx
@@ -2,6 +2,18 @@ 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
+export const BootstrapCard = () =>{
+ return (
+
+
+
+
Bob Dylan
+
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.
+ );
+}
+// Remember to use ReactDOM.render to include the component into the website.
+ReactDOM.render(, document.querySelector('#myDiv'));
diff --git a/exercises/03.3-component-properties/app.jsx b/exercises/03.3-component-properties/app.jsx
index c0ee4886..7e924a59 100644
--- a/exercises/03.3-component-properties/app.jsx
+++ b/exercises/03.3-component-properties/app.jsx
@@ -1,26 +1,39 @@
import React from "react";
import ReactDOM from "react-dom";
-import PropType from "prop-types";
+import PropTypes from "prop-types";
-const BootstrapCard = props => {
+const BootstrapCard = (props) => {
// 1) Replace the hard-coded image, description, link, etc. With their property variable
return (
-
+
{props.title}
-
Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter.
);
};
-BootstrapCard.propTypes = {
- title: PropType.string
- // 2) Add here the new properties into the proptypes object
-};
+BootstrapCard.PropTypes = {
+ title: PropTypes.string,
+ imageUrl: PropTypes.string,
+ description: PropTypes.string,
+ buttonUrl: PropTypes.string,
+ buttonLabel: PropTypes.string,
+};
// 3) Use ReactDOM to add the component into then DOM element #myDiv
+ReactDOM.render(
+ ,
+ document.querySelector("#myDiv")
+);
diff --git a/exercises/03.4-hero-component/app.jsx b/exercises/03.4-hero-component/app.jsx
index 3de969a3..9b82e646 100644
--- a/exercises/03.4-hero-component/app.jsx
+++ b/exercises/03.4-hero-component/app.jsx
@@ -1,23 +1,36 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
const Hero = (props) => {
- // Here you have to return expected html using the properties being passed to the component
+ // Here you have to return expected html using the properties being passed to the component
+ return (
+ //bg-secondary p-4
+
+ );
};
Hero.propTypes = {
- // PropTypes here
- title: PropTypes.string,
+ // PropTypes here
+ title: PropTypes.string,
+ description: PropTypes.string,
+ buttonURL: PropTypes.string,
+ buttonLabel: PropTypes.string,
};
ReactDOM.render(
- ,
+ ,
- document.querySelector('#myDiv')
+ document.querySelector("#myDiv")
);
diff --git a/exercises/03.5-alert-component/app.jsx b/exercises/03.5-alert-component/app.jsx
index b59b4e2a..61c251c7 100644
--- a/exercises/03.5-alert-component/app.jsx
+++ b/exercises/03.5-alert-component/app.jsx
@@ -2,12 +2,16 @@ import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
-/**
- * Here you have to declare your Alert component and return
- * the html that bootstrap dictates for its alert component
- */
+export const Alert = (props) => {
+ return(
+
+ {props.text}
+
+ )
+}
+Alert.PropTypes = {
+ text: PropTypes.string
+}
-// Here is where the component is being used, you don't have to edit this part
-// But it helps you understand what properties the component is using
-ReactDOM.render(, document.querySelector("#myDiv"));
+ReactDOM.render(, document.querySelector("#myDiv"));
\ No newline at end of file
diff --git a/exercises/04-conditional-rendering/app.jsx b/exercises/04-conditional-rendering/app.jsx
index 05c135ed..8fadbf87 100644
--- a/exercises/04-conditional-rendering/app.jsx
+++ b/exercises/04-conditional-rendering/app.jsx
@@ -2,18 +2,23 @@ import React from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
-const Alert = props => {
+const Alert = (props) => {
// Add the condition inside this function
- return (
-
+ );
+ }
};
Alert.propTypes = {
-
+ show: PropTypes.bool,
+ text: PropTypes.string,
};
// Here is where the component is being used, you don't have to edit this part
diff --git a/exercises/04.1-conditional-rendering/app.jsx b/exercises/04.1-conditional-rendering/app.jsx
index a577e39f..5aa11f2b 100644
--- a/exercises/04.1-conditional-rendering/app.jsx
+++ b/exercises/04.1-conditional-rendering/app.jsx
@@ -1,18 +1,29 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
-
-const Alert = props => {
- // Your component here
+//Importamos las librerias de React.
+import React from "react"; //Libreria para crear componentes React.
+import ReactDOM from "react-dom"; //Libreria para renderisar los componentes de react.
+import PropTypes from "prop-types"; //Libreria para vrificar que los componentes que reciban los props sean del tipo correcto.
+//Funcion para generar alertas con React.
+export const Alert = (props) => {
+ //Objeto que contiene el valor de las class.
+ const colorClasses = {
+ red: "alert-danger",
+ yellow: "alert-warning",
+ };
+ //componente Recat de la Alerta
+ return (
+
+ {props.text}
+
+ );
};
-Alert.propTypes = {
+
+//Verificamos los tipos de datos que recibiran los props
+Alert.PropTypes = {
color: PropTypes.string,
- text: PropTypes.string
+ text: PropTypes.string,
};
-// Here is where the component is being used, you don't have to edit this part
-// But it helps you understand what properties are being passed to the component
ReactDOM.render(
diff --git a/exercises/04.2-conditional-rendering/app.jsx b/exercises/04.2-conditional-rendering/app.jsx
index 6882a95d..214db938 100644
--- a/exercises/04.2-conditional-rendering/app.jsx
+++ b/exercises/04.2-conditional-rendering/app.jsx
@@ -3,12 +3,13 @@ import ReactDOM from "react-dom";
import PropTypes from "prop-types";
// Add the green inside this function
-const Alert = props => {
+const Alert = (props) => {
const colorClasses = {
red: "alert-danger",
- yellow: "alert-warning"
+ yellow: "alert-warning",
+ green: "alert-success",
};
-
+
if (colorClasses[props.color] === undefined) alert(`The color ${props.color} is not in the possible list of colors`);
return (
@@ -19,7 +20,7 @@ const Alert = props => {
};
Alert.propTypes = {
color: PropTypes.string,
- text: PropTypes.string
+ text: PropTypes.string,
};
// Here is where the component is being used, you don't have to edit this part
diff --git a/exercises/05-adding-styles/app.jsx b/exercises/05-adding-styles/app.jsx
index 7055ed14..c0b7a212 100644
--- a/exercises/05-adding-styles/app.jsx
+++ b/exercises/05-adding-styles/app.jsx
@@ -4,10 +4,12 @@ import PropTypes from "prop-types";
// Add the styles here
const mySuperStyles = {
-
+ fontSize: "16px",
+ background: "black",
+ border: "1px solid yellow",
};
-const Badge = props => {
+const Badge = (props) => {
return (
+ 
+ 
+ 