3.4 exercise

Author: pascual143

.learn/resets/03.4-jumbotron/app.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+const Jumbotron = props => {
+	//here you have to return expected html using the properties being passed to the component
+};
+
+Jumbotron.propTypes = {
+	//proptypes here
+	title: PropTypes.string,
+
+};
+
+ReactDOM.render(
+	<Jumbotron
+		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 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 understan what properties is the component using
+ReactDOM.render(<Alert text="OMG! Something really bad has happended!" />, document.querySelector("#myDiv"));

exercises/03.4-jumbotron/app.jsx

@@ -2,14 +2,25 @@ import React from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
-const Jumbotron = props => {
+const Jumbotron = (props) => {
 	//here you have to return expected html using the properties being passed to the component
+	
+	return (<div className="jumbotron m-5">
+		<h1 className="display-4">{props.title}</h1>
+		<p className="lead">{props.description}</p>
+		<a className="btn btn-primary btn-lg" href={props.buttonURL} role="button">
+			{props.buttonLabel}
+		</a>
+	</div>
+	)
 };
 
 Jumbotron.propTypes = {
 	//proptypes here
 	title: PropTypes.string,
-
+	description: PropTypes.string,
+	buttonLabel: PropTypes.string,
+	buttonURL: PropTypes.string,
 };
 
 ReactDOM.render(