diff --git a/src/App.js b/src/App.js
index 952c8f1fd..9743caaeb 100644
--- a/src/App.js
+++ b/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;
diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js
new file mode 100644
index 000000000..175b93c8d
--- /dev/null
+++ b/src/CreateTodoButton.js
@@ -0,0 +1,7 @@
+function CreateTodoButton(){
+    return (
+        <button>Crear Tarea</button>
+        )
+};
+
+export {CreateTodoButton};
\ No newline at end of file
diff --git a/src/TodoCounter.js b/src/TodoCounter.js
new file mode 100644
index 000000000..d9b9264ef
--- /dev/null
+++ b/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}
\ No newline at end of file
diff --git a/src/TodoItem.js b/src/TodoItem.js
new file mode 100644
index 000000000..db969f42f
--- /dev/null
+++ b/src/TodoItem.js
@@ -0,0 +1,11 @@
+function TodoItem(){
+    return (
+        <li>
+            <span>V</span>
+            <p>Tarea Tarea</p>
+            <span>X</span>
+        </li>
+    )
+}
+
+export {TodoItem};
\ No newline at end of file
diff --git a/src/TodoList.js b/src/TodoList.js
new file mode 100644
index 000000000..a2d8d3cfe
--- /dev/null
+++ b/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};
\ No newline at end of file
diff --git a/src/TodoSearch.js b/src/TodoSearch.js
new file mode 100644
index 000000000..bc312f1a7
--- /dev/null
+++ b/src/TodoSearch.js
@@ -0,0 +1,7 @@
+function TodoSearch(){
+    return (
+        <input type="text" placeholder="Tarea" />
+    )
+};
+
+export {TodoSearch};
\ No newline at end of file