Ch19 challenge

src/App.js

@@ -1,25 +1,32 @@
-import logo from './platzi.webp';
+// import logo from './platzi.webp';
+// un componente en React se tiene que importar como un objeto 
+import { TodoCounter } from './TodoCounter';
+import { TodoSearch } from './TodoSearch';
+import { TodoList } from './TodoList';
+import {TodoItem} from './TodoItem';
+import { CreateTodoButton } from './CreateTodoButton';
+
 import './App.css';
 
 function App() {
   return (
+    // Fijense que al momento de crear la aplicacion se colocan todos los componentes para declararlos y saber o tener una idea de como se va a crear la aplicacion 
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edita el archivo <code>src/App.js</code> y guarda para recargar.
-        </p>
-        <a
-          className="App-link"
-          href="https://platzi.com/reactjs"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {/* se usa KebabCase para la creacion y denominacion de componentes  */}
+      <TodoCounter />
+      <TodoSearch />
+
+      <TodoList>
+        <TodoItem />
+        <TodoItem />
+      </TodoList>
+      {/* clase 2 creando la aplicacion */}
+      <CreateTodoButton />
     </div>
   );
 }
 
+
+
+
 export default App;

src/CreateTodoButton.js

@@ -0,0 +1,7 @@
+function CreateTodoButton(){
+    return (
+        <button>Crear Tarea</button>
+        )
+};
+
+export {CreateTodoButton};

src/TodoCounter.js

@@ -0,0 +1,9 @@
+function TodoCounter(){
+    return (
+        <h1>Tienes que hacer x tareas</h1>
+
+    )
+}
+
+// Se tiene que exportar el componente y colocar como se va a exportar 
+export {TodoCounter}

src/TodoItem.js

@@ -0,0 +1,11 @@
+function TodoItem(){
+    return (
+        <li>
+            <span>V</span>
+            <p>Tarea Tarea</p>
+            <span>X</span>
+        </li>
+    )
+}
+
+export {TodoItem};

src/TodoList.js

@@ -0,0 +1,10 @@
+function TodoList(props){
+    return (
+        <ul>
+            {/* Se deben colocar las propiedades necesarias apra tener los hijos  en el componente */}
+            {props.children}
+        </ul>
+    );
+  };
+
+export {TodoList};

src/TodoSearch.js

@@ -0,0 +1,7 @@
+function TodoSearch(){
+    return (
+        <input type="text" placeholder="Tarea" />
+    )
+};
+
+export {TodoSearch};