- {navlinkItems}
- {animalsInHTML}
- {animalsInHTML}
-
+const content = (
- + + Link to google.com + + , +
- + + Link to facebook.com + + , +
- + + Link to amazon.com + + , +]; const content =
- hello ; + return
- {singleAnimal} ; }); -ReactDOM.render(
- hello ; + return
- {singleAnimal.label} ; }); ReactDOM.render(
- + {singlePlanet} + + ); +}); // 2) Add the array planetsInHTML inside the innerHTML of this
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 = () => { + returnI Love React
; +}; + +// Change the syntax of the first parameter to make it
+ 
+
+ );
+};
+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(
+
+
+
+ {props.title}
+Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter.
+ + Go to wikipedia + +
+ This is a primary alert - check it out!
+
+ );
+};
+
+Alert.propTypes = {
+
+};
+
+// Here is where the
+
,
+ 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
+
,
+ 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
+
,
+ 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( tags
-const output = ;
+const output = (
+ 
+
+
+);
-// 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 3d27faa1..1ca6479a 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 = (
- My name is {customer.first_name}
+My last name is {customer.last_name}
+
+
+
+
);
-ReactDOM.render(content, document.querySelector("#myDiv"));
+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 = [
+ - {navlinkItems}
- {animalsInHTML}
- {animalsInHTML}
- {animalsInHTML}
-
-const content = (
- {planetsInHTML}
Hello World
; +const PrintHello = () => { + returnI Love React
; }; -// what where -ReactDOM.render(PrintHello(), document.querySelector("#myDiv")); +ReactDOM.render(
+ 
+
+ );
+}
+// Remember to use ReactDOM.render to include the component into the website.
+ReactDOM.render(
+
+
+ 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.
+ Go to wikipedia +
-
+ 
);
};
-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(
+
+ {props.title}
-Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter.
- - Go to wikipedia +{props.description}
+ + {props.buttonLabel}
+ {props.text}
+
+ )
+}
+Alert.PropTypes = {
+ text: PropTypes.string
+}
-// Here is where the
- This is a primary alert - check it out!
-
- );
+ if (props.show === false) {
+ return null;
+ } else {
+ return (
+
+ This is a primary alert - check it out!
+
+ );
+ }
};
Alert.propTypes = {
-
+ show: PropTypes.bool,
+ text: PropTypes.string,
};
// Here is where the
+ {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