Desarrollo

src/App.js

@@ -1,25 +1,29 @@
 import logo from './platzi.webp';
+import { TodoCounter } from './TodoCounter';
+import { TodoSearch } from './TodoSearch';
+import { TodoItem } from './TodoItem';
+import { TodoList } from './TodoList';
+import { CreateTodoButton } from './CreateTodoButton';
+
 import './App.css';
 
 function App() {
   return (
     <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>
+      <TodoCounter completed={16} total={25} />
+      <TodoSearch />
+      <TodoList>
+        <TodoItem />
+        <TodoItem />
+        <TodoItem />
+      </TodoList>
+
+      <CreateTodoButton />
+
     </div>
   );
 }
 
+
+
 export default App;

src/CreateTodoButton.js

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

src/TodoCounter.js

@@ -0,0 +1,9 @@
+function TodoCounter({ total, completed }) {
+    return (
+        <h1>
+            Has completado {completed} de {total} tareas
+        </h1>
+    )
+}
+
+export { TodoCounter };

src/TodoItem.js

@@ -0,0 +1,11 @@
+
+function TodoItem() {
+    return (
+        <li>
+            <span>V</span>
+            <p>perro que ladra no muerde</p>
+            <span>X</span>
+        </li>
+    )
+}
+export { TodoItem }

src/TodoList.js

@@ -0,0 +1,11 @@
+function TodoList(props) {
+    return (
+        <ul>
+            <li>
+                {props.children}
+            </li>
+        </ul>
+    )
+}
+
+export { TodoList };

src/TodoSearch.js

@@ -0,0 +1,6 @@
+function TodoSearch() {
+    return (
+        <input placeholder="cortar cebolla" />)
+}
+
+export { TodoSearch };