diff --git a/curso_react b/curso_react
new file mode 160000
index 000000000..ebc33fff3
--- /dev/null
+++ b/curso_react
@@ -0,0 +1 @@
+Subproject commit ebc33fff3bf28d5786ee96b2542673c6d1a8c345
diff --git a/src/App.js b/src/App.js
index 952c8f1fd..ebf04dba8 100644
--- a/src/App.js
+++ b/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;
diff --git a/src/CreateTodoButton.js b/src/CreateTodoButton.js
new file mode 100644
index 000000000..47276ce80
--- /dev/null
+++ b/src/CreateTodoButton.js
@@ -0,0 +1,7 @@
+
+function CreateTodoButton() {
+    return (
+        <button> 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..177ae878b
--- /dev/null
+++ b/src/TodoCounter.js
@@ -0,0 +1,9 @@
+function TodoCounter({ total, completed }) {
+    return (
+        <h1>
+            Has completado {completed} de {total} tareas
+        </h1>
+    )
+}
+
+export { TodoCounter };
\ No newline at end of file
diff --git a/src/TodoItem.js b/src/TodoItem.js
new file mode 100644
index 000000000..3265625a3
--- /dev/null
+++ b/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 }
\ No newline at end of file
diff --git a/src/TodoList.js b/src/TodoList.js
new file mode 100644
index 000000000..c6e2fda81
--- /dev/null
+++ b/src/TodoList.js
@@ -0,0 +1,11 @@
+function TodoList(props) {
+    return (
+        <ul>
+            <li>
+                {props.children}
+            </li>
+        </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..8ba0df372
--- /dev/null
+++ b/src/TodoSearch.js
@@ -0,0 +1,6 @@
+function TodoSearch() {
+    return (
+        <input placeholder="cortar cebolla" />)
+}
+
+export { TodoSearch };
\ No newline at end of file