diff --git a/src/components/Todo.js b/src/components/Todo.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/Todo.jsx b/src/components/Todo.jsx
new file mode 100644
index 0000000000..71b5fb81bc
--- /dev/null
+++ b/src/components/Todo.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Todo = () => {
+  return <div>Todo</div>;
+};
+
+export default Todo;
diff --git a/src/components/TodoForm.js b/src/components/TodoForm.js
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/TodoForm.jsx b/src/components/TodoForm.jsx
new file mode 100644
index 0000000000..e3d39f26b6
--- /dev/null
+++ b/src/components/TodoForm.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const TodoForm = () => {
+  return <div>TodoForm</div>;
+};
+
+export default TodoForm;
diff --git a/src/components/TodoList.js b/src/components/TodoList.jsx
similarity index 51%
rename from src/components/TodoList.js
rename to src/components/TodoList.jsx
index dfd3d8f14a..44bda77d55 100644
--- a/src/components/TodoList.js
+++ b/src/components/TodoList.jsx
@@ -1,2 +1,10 @@
 // your components will all go in this `component` directory.
 // feel free to change this component.js into TodoList.js
+
+import React from "react";
+
+const TodoList = () => {
+  return <div>TodoList</div>;
+};
+
+export default TodoList;