entrega 1

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

.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
+

.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 (
+		<div className="card m-5">
+			<img className="card-img-top" src="https://github.com/4GeeksAcademy/react-tutorial-exercises/blob/master/.learn/assets/Dylan.png?raw=true" alt="Card image cap" />
+			<div className="card-body">
+				<h5 className="card-title">{props.title}</h5>
+				<p className="card-text">Bob Dylan (born Robert Allen Zimmerman, May 24, 1941) is an American singer-songwriter.</p>
+				<a href="https://en.wikipedia.org/wiki/Bob_Dylan" className="btn btn-primary">
+					Go to wikipedia
+				</a>
+			</div>
+		</div>
+	);
+};
+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

.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(
+  <Hero
+    title="Welcome to react"
+    description="React is the most popular rendering library in the world"
+    buttonLabel="Go to the official website"
+    buttonURL="https://reactjs.org/"
+  />,
+
+  document.querySelector('#myDiv')
+);

.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 <Alert /> 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(<Alert text="OMG! Something really bad has happened!" />, document.querySelector("#myDiv"));

.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 (
+		<div className="alert alert-primary" role="alert">
+			This is a primary alert - check it out!
+		</div>
+	);
+};
+
+Alert.propTypes = {
+
+};
+
+// Here is where the <Alert /> 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(
+	<div>
+		<Alert show={true} text="This is a primary alert - check it out!" />
+		<Alert show={false} text="This alert shouldn't appear" />
+	</div>,
+	document.querySelector("#myDiv")
+);

.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 <Alert /> 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(
+	<div>
+		<Alert text="OMG! Something really bad has happened!" color="red" />
+		<Alert text="Well, it is not that bad after all!" color="yellow" />
+	</div>,
+	document.querySelector("#myDiv")
+);

.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 (
+		<div className={`alert ${colorClasses[props.color]}`} role="alert">
+			{props.text}
+		</div>
+	);
+};
+Alert.propTypes = {
+	color: PropTypes.string,
+	text: PropTypes.string
+};
+
+// Here is where the <Alert /> 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(
+	<div>
+		<Alert text="OMG! Something really bad has happened!" color="red" />
+		<Alert text="Well, it is not that bad after all!" color="yellow" />
+		<Alert text="I am supposed to be green" color="green" />
+	</div>,
+	document.querySelector("#myDiv")
+);

.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 (
+		<button style={mySuperStyles} type="button" className="btn btn-primary">
+			{props.label}
+			<span className="badge badge-light">{props.number}</span>
+		</button>
+	);
+};
+
+Badge.propTypes = {
+	label: PropTypes.string,
+	number: PropTypes.string
+};
+
+ReactDOM.render(<Badge label="Notifications" number="2" />, document.querySelector("#myDiv"));

.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 (
+		<button style={buttonStyles} type="button" className="btn btn-primary">
+			{props.label}
+			<span style={badgeStyles} className="badge badge-light">
+				{props.number}
+			</span>
+		</button>
+	);
+};
+
+Badge.propTypes = {
+	label: PropTypes.string,
+	number: PropTypes.string
+};
+
+ReactDOM.render(<Badge label="Alerts" number="2" />, document.querySelector("#myDiv"));

.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 <button className="btn btn-success btn-lg">Click Me</button>;
+};
+
+// You don't have to edit anything below
+ReactDOM.render(<Alert />, document.querySelector("#myDiv"));

exercises/01-hello-world/app.jsx

@@ -1,12 +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 output = <span>James is 12 years old</span>;
+//Ahora creamos un nuevo componente el cual contenga la tag span.
+let output = (
+	<span>
+		James is <strong>12</strong> years old
+	</span>
+);
 
-// WHERE: A DOM element that will contain the entire react generated html
+//Creamos una constante, la cual nos trae el valor de id.
 const myDiv = document.querySelector("#myDiv");
-
-                //what  //where
+//llamamos a la funcion ReactDOM para que se muestre por pantalla el componente creado.
 ReactDOM.render(output, myDiv);
+