diff --git a/exercises/03.4-hero-component/README.es.md b/exercises/03.4-hero-component/README.es.md
new file mode 100644
index 00000000..91ecf4da
--- /dev/null
+++ b/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
+
+```
+
+## π» Resultado Esperado:
+
+
+
+## π‘ Pistas:
+
+- Recuerda usar los prop-types para validar las propiedades de tu componente.
+
+- Tu componente deberΓa generar un HTML similar a este:
+
+```html
+
+```
diff --git a/exercises/03.4-hero-component/README.md b/exercises/03.4-hero-component/README.md
new file mode 100644
index 00000000..c4476251
--- /dev/null
+++ b/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
+
+```
+
+## π» Expected result:
+
+
+
+## π‘ Hints:
+
+- Remember to use prop-types to validate your component properties.
+
+- Your HTML's component should be something like this:
+
+```html
+
+```
diff --git a/exercises/03.4-hero-component/app.jsx b/exercises/03.4-hero-component/app.jsx
new file mode 100644
index 00000000..3de969a3
--- /dev/null
+++ b/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(
+ ,
+
+ document.querySelector('#myDiv')
+);
diff --git a/exercises/03.4-hero-component/solution.hide.jsx b/exercises/03.4-hero-component/solution.hide.jsx
new file mode 100644
index 00000000..c24649bc
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+Hero.propTypes = {
+ // PropTypes here
+ title: PropTypes.string,
+ description: PropTypes.string,
+ buttonLabel: PropTypes.string,
+ buttonURL: PropTypes.string,
+};
+
+ReactDOM.render(
+ ,
+
+ document.querySelector('#myDiv')
+);
diff --git a/exercises/03.4-hero-component/tests.js b/exercises/03.4-hero-component/tests.js
new file mode 100644
index 00000000..571ce7a8
--- /dev/null
+++ b/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(`
+
+`);
+});
diff --git a/exercises/03.4-jumbotron/README.es.md b/exercises/03.4-jumbotron/README.es.md
deleted file mode 100644
index b5592aaa..00000000
--- a/exercises/03.4-jumbotron/README.es.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# `03.4` Jumbotron
-
-Usando todo lo que has aprendido...
-
-## π Instrucciones:
-
-1. Construye un componente `Jumbotron` que reciba las siguientes propiedades:
-
-```jsx
-
-```
-
-## π» Resultado Esperado:
-
-
-
-## π‘ Pistas:
-
-+ Recuerda usar los prop-types para validar las propiedades de tu componente.
-
-+ Tu componente deberΓa generar un HTML similar a este:
-
-```html
-
-```
diff --git a/exercises/03.4-jumbotron/README.md b/exercises/03.4-jumbotron/README.md
deleted file mode 100644
index 978511bc..00000000
--- a/exercises/03.4-jumbotron/README.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-tutorial: "https://www.youtube.com/watch?v=zv6HPveyz6g"
----
-
-# `03.4` Jumbotron
-
-Using everything you have learned so far...
-
-## π Instructions:
-
-1. Build a `Jumbotron` component that receives the following properties:
-
-```jsx
-
-```
-
-## π» Expected result:
-
-
-
-## π‘ Hints:
-
-+ Remember to use prop-types to validate your component properties.
-
-+ Your HTML's component should be something like this:
-
-```html
-
-```
diff --git a/exercises/03.4-jumbotron/app.jsx b/exercises/03.4-jumbotron/app.jsx
deleted file mode 100644
index 5225b9bf..00000000
--- a/exercises/03.4-jumbotron/app.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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(
- ,
-
- document.querySelector("#myDiv")
-);
diff --git a/exercises/03.4-jumbotron/solution.hide.jsx b/exercises/03.4-jumbotron/solution.hide.jsx
deleted file mode 100644
index d39ee42d..00000000
--- a/exercises/03.4-jumbotron/solution.hide.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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
- return (
-
- );
-};
-
-Jumbotron.propTypes = {
- // PropTypes here
- title: PropTypes.string,
- description: PropTypes.string,
- buttonLabel: PropTypes.string,
- buttonURL: PropTypes.string
-};
-
-ReactDOM.render(
- ,
-
- document.querySelector("#myDiv")
-);
diff --git a/exercises/03.4-jumbotron/tests.js b/exercises/03.4-jumbotron/tests.js
deleted file mode 100644
index 981c6301..00000000
--- a/exercises/03.4-jumbotron/tests.js
+++ /dev/null
@@ -1,59 +0,0 @@
-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(`
-
-`);
-});