added comments

src/App.js

@@ -1,11 +1,11 @@
-import { useState } from 'react'
-import Header from "./components/Header";
-import List from "./components/List"
-import AddTodo from "./components/AddTodo"
+import { useState } from 'react' //import useState object from react
+import Header from "./components/Header"; //import Header component
+import List from "./components/List" //import List component
+import AddTodo from "./components/AddTodo" //import AddToDo Component
 
-function App() {
+function App() { //App component that will render in 'root' element in DOM
 
-  const [todos, setTodos] = useState([
+  const [todos, setTodos] = useState([ //the todos array is the original value used in useState, setTodos function will update the array
     {
       id: 1,
       item: "Drink Water",
@@ -20,19 +20,21 @@ function App() {
     },
   ]);
 
-  const addTodo = (todo) => {
-    const id = Math.ceil(Math.random()*100000)
-    const newTodo = {id, ...todo}
-    setTodos([...todos, newTodo])
+  const addTodo = (todo) => { //create addTodo function
+    const id = Math.ceil(Math.random()*100000) //create a random number ID
+    const newTodo = {id, ...todo} // create newTodo with id and passed in todo parameter
+    setTodos([...todos, newTodo]) // function that will return a new array with original content plus added 
   }
 
   return (
     <div className="container">
       <Header title="Todo List" />
-      <AddTodo onAdd={addTodo} />
+      <AddTodo onAdd={addTodo} /> 
+        //^ AddTodo component with property of above function
       <List todos={todos}/>
+         //^ List todos component  with property of above original state
     </div>
   );
 }
 
-export default App;
+export default App; //export App

src/components/AddTodo.js

@@ -1,27 +1,29 @@
-import { useState } from 'react'
+import { useState } from 'react' // import useState object of react
 
-const AddTodo = ({ onAdd }) => { 
-    const [item, setItem] = useState('')
+const AddTodo = ({ onAdd }) => {  //AddTodo component with onAdd parameter
+    const [item, setItem] = useState('') //array destructuring. item currently set to ''. setItem to update item
 
-    const onSubmit = (e) => {
-        e.preventDefault()
-        onAdd({item})
+    const onSubmit = (e) => { //onSubmit event listener
+        e.preventDefault() //stops page from reloading
+        onAdd({item}) //item parameter into onAdd
 
-        setItem('')
+        setItem('') //'' on submit
     }
 
     return (
         <form onSubmit={onSubmit}>
+        //^ call onSubmit when submitted
             <label>Add Todo:</label>
             <input 
+            //^ text field
                 type="text" 
                 placeholder="Todo Item"
-                value={item}
-                onChange={ (e) => setItem(e.target.value)}
+                value={item} //from line 4
+                onChange={ (e) => setItem(e.target.value)} //setItem to input value
             /> 
             <input type="submit" value="Add Todo" />
         </form>
     )
 }
 
-export default AddTodo
+export default AddTodo //export AddTodo component

src/components/Header.js

@@ -1,16 +1,17 @@
-import React from "react";
+import React from "react"; //import react
 
-const Header = (props) => {
+const Header = (props) => { //create Header component with function to take in props
   return (
     <div>
       <h1 style={headerStyle}>{props.title}</h1>
     </div>
   );
 };
 
+//style for above div
 const headerStyle = {
   fontSize: "40px",
   textDecoration: "underline",
 };
 
-export default Header;
+export default Header; //export Header component

src/components/List.js

@@ -1,14 +1,14 @@
-import Todo from './Todo'
+import Todo from './Todo' //import Todo component
 
-const List = ({ todos }) => {
+const List = ({ todos }) => { //List component with todos parameter
     return (
         <div>
-          {todos.map((todo) => 
-            <Todo key={todo.id} todo={todo} />
+          {todos.map((todo) => //display each todo
+            <Todo key={todo.id} todo={todo} /> //Todo component will have id and array of todos
           )}  
         </div>
     )
 }
 
-export default List
+export default List //export List component
 

src/components/Todo.js

@@ -1,11 +1,11 @@
 
-const Todo = ({ todo }) => {
+const Todo = ({ todo }) => { //create Todo component with todo parameter
     return (
         <div>
-            <h2>{todo.item}</h2>
+            <h2>{todo.item}</h2> 
         </div>
     )
 }
 
-export default Todo
+export default Todo //export Todo component
 

src/index.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from 'react'; //import react
+import ReactDOM from 'react-dom'; //import ReactDOM
+import './index.css'; //import styling
+import App from './App'; //import App
+import reportWebVitals from './reportWebVitals'; //import reportWebVitals for measuring UX
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
+ReactDOM.render( //render the DOM
+  <React.StrictMode> //gives more detailed information on development
+    <App /> //App component
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root') //App component loads into div with 'root' name
 );
 
 // If you want to start measuring performance in your app, pass a function