Merge pull request #116 from AnggieAlava/bug/1503-jumbotron

[Bug-1503] Componente Jumbotron actualizado con clases de Bosstrap 5.2

Author: alesanchezr

exercises/03.4-hero-component/README.es.md

@@ -0,0 +1,36 @@
+# `03.4` Hero Component
+
+Usando todo lo que has aprendido...
+
+## 📝 Instrucciones:
+
+1. Construye un componente `Hero` que reciba las siguientes propiedades:
+
+```jsx
+<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/"
+/>
+```
+
+## 💻 Resultado Esperado:
+
+![Hero](../../.learn/assets/03.4-1.png?raw=true)
+
+## 💡 Pistas:
+
+- Recuerda usar los prop-types para validar las propiedades de tu componente.
+
+- Tu componente debería generar un HTML similar a este:
+
+```html
+<div class="container m-5">
+  <h1 class="display-4">Welcome to react</h1>
+  <p class="lead">React is the most popular rendering library in the world</p>
+  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button"
+    >Go to the official website</a
+  >
+</div>
+```

exercises/03.4-hero-component/README.md

@@ -0,0 +1,40 @@
+---
+tutorial: 'https://www.youtube.com/watch?v=zv6HPveyz6g'
+---
+
+# `03.4` Hero Component
+
+Using everything you have learned so far...
+
+## 📝 Instructions:
+
+1. Build a `Hero` component that receives the following properties:
+
+```jsx
+<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/"
+/>
+```
+
+## 💻 Expected result:
+
+![Hero](../../.learn/assets/03.4-1.png?raw=true)
+
+## 💡 Hints:
+
+- Remember to use prop-types to validate your component properties.
+
+- Your HTML's component should be something like this:
+
+```html
+<div class="container m-5">
+  <h1 class="display-4">Welcome to react</h1>
+  <p class="lead">React is the most popular rendering library in the world</p>
+  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button"
+    >Go to the official website</a
+  >
+</div>
+```

exercises/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')
+);

exercises/03.4-hero-component/solution.hide.jsx

@@ -0,0 +1,38 @@
+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
+  return (
+    <div className="container 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>
+  );
+};
+
+Hero.propTypes = {
+  // PropTypes here
+  title: PropTypes.string,
+  description: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  buttonURL: 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')
+);

exercises/03.4-hero-component/tests.js

@@ -0,0 +1,59 @@
+import ReactDOM from 'react-dom';
+import { WhatToRender } from './app.jsx';
+import jsxToString from 'jsx-to-string';
+import renderer from 'react-test-renderer';
+
+jest.mock('react-dom', () => ({ render: jest.fn() }));
+
+test('ReactDOM needs to be called once', () => {
+  expect(ReactDOM.render.mock.calls.length).toBe(1);
+});
+
+test('Component title has to be passed properly', () => {
+  const component = ReactDOM.render.mock.calls[0][0];
+  expect(component.props.title).toBe('Welcome to react');
+});
+
+test('Component description has to be passed properly', () => {
+  const component = ReactDOM.render.mock.calls[0][0];
+  expect(component.props.description).toBe(
+    'React is the most popular rendering library in the world'
+  );
+});
+
+test('Component buttonLabel has to be passed properly', () => {
+  const component = ReactDOM.render.mock.calls[0][0];
+  expect(component.props.buttonLabel).toBe('Go to the official website');
+});
+
+test('Component buttonURL has to be passed properly', () => {
+  const component = ReactDOM.render.mock.calls[0][0];
+  expect(component.props.buttonURL).toBe('https://reactjs.org/');
+});
+
+test('The component should return the exact HTML', () => {
+  const tree = renderer.create(ReactDOM.render.mock.calls[0][0]).toJSON();
+  expect(tree).toMatchInlineSnapshot(`
+<div
+  className="container m-5"
+>
+  <h1
+    className="display-4"
+  >
+    Welcome to react
+  </h1>
+  <p
+    className="lead"
+  >
+    React is the most popular rendering library in the world
+  </p>
+  <a
+    className="btn btn-primary btn-lg"
+    href="https://reactjs.org/"
+    role="button"
+  >
+    Go to the official website
+  </a>
+</div>
+`);
+});