props

src/App.js

@@ -1,24 +1,38 @@
-import logo from './platzi.webp';
-import './App.css';
+import logo from "./platzi.webp";
+import "./App.css";
+import { TodoCounter } from "./TodoCounter";
+import { TodoSearch } from "./TodoSearch";
+import { TodoList } from "./TodoList";
+import { TodoItem } from "./TodoItem";
+import { CreateTodoButton } from "./CreateTodoButton";
+import React from "react";
+
+const defaultTodos = [
+  { text: "Cut onion", completed: true },
+  { text: "Take React Course introduce", completed: true },
+  { text: "Cry with Llorona ", completed: true },
+  { text: "LALALALAAL", completed: true },
+];
 
 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>
-    </div>
+    <React.Fragment>
+      <TodoCounter completed={16} total={25} />
+      <TodoSearch />
+
+      <TodoList>
+        {defaultTodos.map(todo => (
+          <TodoItem
+            key={todo.text}
+            text={todo.text}
+            completed={todo.completed}
+          />
+        ))}
+      </TodoList>
+
+
+      <CreateTodoButton />
+    </React.Fragment>
   );
 }
 

src/CreateTodoButton.js

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

src/TodoCounter.js

@@ -0,0 +1,14 @@
+/*function TodoCounter(porp) {
+    porp.completed 
+    porp.total
+*/
+
+function TodoCounter({total, completed}) {
+
+    return(
+        <h1> You have completed {completed} of {total} all</h1>
+    )
+}
+
+
+export {TodoCounter}

src/TodoItem.js

@@ -0,0 +1,11 @@
+function TodoItem(props) {
+  return (
+    <li>
+      <samp>v</samp>
+      <p>{props.text}</p>
+      <samp>X</samp>
+    </li>
+  );
+}
+
+export { TodoItem };

src/TodoList.js

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

src/TodoSearch.js

@@ -0,0 +1,5 @@
+function TodoSearch() {
+  return <input placeholder="enter you chose"></input>;
+}
+
+export { TodoSearch };