- Welcome to react
+ Welcome to React!
Date: Tue, 20 Feb 2024 04:25:47 +0000
Subject: [PATCH 2/5] Corregido datos en app.jsx Jumbotron
---
exercises/03.4-jumbotron/app.jsx | 38 +++++++++++---------------------
1 file changed, 13 insertions(+), 25 deletions(-)
diff --git a/exercises/03.4-jumbotron/app.jsx b/exercises/03.4-jumbotron/app.jsx
index 6d3ec860..8f95ad2b 100644
--- a/exercises/03.4-jumbotron/app.jsx
+++ b/exercises/03.4-jumbotron/app.jsx
@@ -1,35 +1,23 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
const HeroSection = (props) => {
- // Here you have to return expected html using the properties being passed to the component
- return (
-
- );
+ // Here you have to return expected html using the properties being passed to the component
};
HeroSection.propTypes = {
- // PropTypes here
- title: PropTypes.string,
- description: PropTypes.string,
- buttonLabel: PropTypes.string,
- buttonURL: PropTypes.string,
+ // PropTypes here
+ title: PropTypes.string,
};
ReactDOM.render(
-
,
+
,
- document.querySelector("#myDiv")
+ document.querySelector('#myDiv')
);
From 110dcec5b94a8f1526fac1be38e170b5a43568e7 Mon Sep 17 00:00:00 2001
From: Anggie Alava
Date: Thu, 22 Feb 2024 15:23:03 -0500
Subject: [PATCH 3/5] Agregado nuevo nombre Hero-component
---
exercises/03.4-hero-component/README.es.md | 36 +++++++++++
exercises/03.4-hero-component/README.md | 40 +++++++++++++
exercises/03.4-hero-component/app.jsx | 23 ++++++++
.../03.4-hero-component/solution.hide.jsx | 38 ++++++++++++
exercises/03.4-hero-component/tests.js | 59 +++++++++++++++++++
exercises/03.4-jumbotron/README.es.md | 34 -----------
exercises/03.4-jumbotron/README.md | 38 ------------
exercises/03.4-jumbotron/app.jsx | 24 --------
exercises/03.4-jumbotron/solution.hide.jsx | 35 -----------
exercises/03.4-jumbotron/tests.js | 59 -------------------
10 files changed, 196 insertions(+), 190 deletions(-)
create mode 100644 exercises/03.4-hero-component/README.es.md
create mode 100644 exercises/03.4-hero-component/README.md
create mode 100644 exercises/03.4-hero-component/app.jsx
create mode 100644 exercises/03.4-hero-component/solution.hide.jsx
create mode 100644 exercises/03.4-hero-component/tests.js
delete mode 100644 exercises/03.4-jumbotron/README.es.md
delete mode 100644 exercises/03.4-jumbotron/README.md
delete mode 100644 exercises/03.4-jumbotron/app.jsx
delete mode 100644 exercises/03.4-jumbotron/solution.hide.jsx
delete mode 100644 exercises/03.4-jumbotron/tests.js
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..3dfec0cf
--- /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..626741cb
--- /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(`
-
-`);
-});
From 27a7d88ee26c9c620508be4031c175207e46b634 Mon Sep 17 00:00:00 2001
From: Anggie Alava <131820456+AnggieAlava@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:44:04 -0500
Subject: [PATCH 4/5] Update README.es.md
---
exercises/03.4-hero-component/README.es.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/exercises/03.4-hero-component/README.es.md b/exercises/03.4-hero-component/README.es.md
index 3dfec0cf..91ecf4da 100644
--- a/exercises/03.4-hero-component/README.es.md
+++ b/exercises/03.4-hero-component/README.es.md
@@ -1,4 +1,4 @@
-# `03.4` Hero-Component
+# `03.4` Hero Component
Usando todo lo que has aprendido...
From 55d082d1ea21661524074fb06f2c1a007f66d476 Mon Sep 17 00:00:00 2001
From: Anggie Alava <131820456+AnggieAlava@users.noreply.github.com>
Date: Thu, 22 Feb 2024 15:44:35 -0500
Subject: [PATCH 5/5] Update README.md
---
exercises/03.4-hero-component/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/exercises/03.4-hero-component/README.md b/exercises/03.4-hero-component/README.md
index 626741cb..c4476251 100644
--- a/exercises/03.4-hero-component/README.md
+++ b/exercises/03.4-hero-component/README.md
@@ -2,7 +2,7 @@
tutorial: 'https://www.youtube.com/watch?v=zv6HPveyz6g'
---
-# `03.4` Hero-Component
+# `03.4` Hero Component
Using everything you have learned so far...