Add components

examples/react-concepts/src/App.css

@@ -1,5 +1,13 @@
+/**Clear default styles*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
 .App {
   background-color: bisque;
   min-height: 100vh;
   font-size: 1rem;
+  height: 100vh;
 }

examples/react-concepts/src/App.js

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-
 import Input from "./components/class/Input";
-
+import Header from "./components/class/Header";
 import "./App.css";
 
 function App() {
   const [text, setText] = useState("default");
   const [name, setName] = useState("default");
+  const [showFilter, setShowFilter] = useState(false);
 
   return (
     <div
@@ -16,13 +16,24 @@ function App() {
         textAlign: "center",
       }}
     >
-      Text: <Input placeholder="Escriba su nombre" setValue={setText} />
+      <Header>
+        <h1>Welcome!!</h1>
+        <button onClick={() => setShowFilter(!showFilter)}>
+          {showFilter ? "Hide filter" : "Show filter"}
+        </button>
+      </Header>
+      {showFilter && (
+        <>
+          Text: <Input placeholder="Escriba su nombre" setValue={setText} />
+        </>
+      )}
+
       <br />
-      Nombre: <Input placeholder="Escriba su nombre" setValue={setName} />
-      {/*Apellido: <Input placeholder="Escriba su apellido" />
-      Edad: <Input placeholder="Escriba su apellido" type="number" /> */}
       <h2>Text: {text}</h2>
-      <h2>Nombre: {name}</h2>
+      {/*Nombre: <Input placeholder="Escriba su nombre" setValue={setName} />
+      Apellido: <Input placeholder="Escriba su apellido" />
+      Edad: <Input placeholder="Escriba su apellido" type="number" /> */}
+      {/* <h2>Nombre: {name}</h2> */}
     </div>
   );
 }

examples/react-concepts/src/components/class/Header.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import "./header.style.css";
+
+class Header extends React.Component {
+  // eslint-disable-next-line no-useless-constructor
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return <header>{this.props.children}</header>;
+  }
+}
+
+export default Header;

examples/react-concepts/src/components/class/Input.jsx

@@ -27,7 +27,7 @@ class Input extends Component {
   }
 
   componentWillUnmount() {
-    console.log("componentWillUnmount...");
+    console.log("componentWillUnmount... Se desmontó el componente");
   }
 
   render() {

examples/react-concepts/src/components/class/header.style.css

@@ -0,0 +1,9 @@
+header {
+  height: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-left: 2rem;
+  background-color: maroon;
+  color: white;
+}