Added comments

src/App.js

@@ -1,10 +1,16 @@
+// importing usestate hook from react
 import { useState } from 'react'
+// importing all the child components from the components folder
 import Header from "./components/Header";
 import List from "./components/List"
 import AddTodo from "./components/AddTodo"
 
+// creating a function App component
 function App() {
 
+//  we use destructuring to add variables and reference them to usestate hook, with this 
+//   todos hold the currentState of the app and setTodos helps us change it
+//  we then add an array of objects that has all the hardcoded todoitems to display on the list
   const [todos, setTodos] = useState([
     {
       id: 1,
@@ -20,12 +26,19 @@ function App() {
     },
   ]);
 
+//   this is a handler function that is associated to the onAdd event handler
   const addTodo = (todo) => {
+//    the id variable hold the value of random rumbers between 0 to 100000
     const id = Math.ceil(Math.random()*100000)
+//    we then associate the id and the todo array to our newTodo variable
     const newTodo = {id, ...todo}
+//   we then pass both our old and new todos into the state
     setTodos([...todos, newTodo])
   }
 
+//   we are returing a div, with all the child components
+//   AddTodo gets the props on onAdd event with a handler function associated to it
+//   list gets the props of our todos array
   return (
     <div className="container">
       <Header title="Todo List" />

src/components/AddTodo.js

@@ -1,16 +1,23 @@
+// importing usestate hook from react
 import { useState } from 'react'
 
+// creating Addtodo component which takes one param, we are directly accessing the onAdd event from the top level as param
 const AddTodo = ({ onAdd }) => { 
+//    create two state variables using destructuring for useState hook 
     const [item, setItem] = useState('')
 
+//     Create handler function for our onSubmit event in the form element
     const onSubmit = (e) => {
+//         prevents the default refresh 
         e.preventDefault()
+//         calling our onAdd handler function and passing our item as an object
         onAdd({item})
-
+// resetting our item state back to empty
         setItem('')
     }
 
     return (
+//         adding onSubmit event
         <form onSubmit={onSubmit}>
             <label>Add Todo:</label>
             <input 

src/components/Header.js

@@ -1,13 +1,17 @@
+// importing react
 import React from "react";
 
+// creating a Header component which takes one param - props
 const Header = (props) => {
   return (
     <div>
+//     we are fetching styles from the variable created below 
       <h1 style={headerStyle}>{props.title}</h1>
     </div>
   );
 };
 
+// we are creating a new object with styles for our component
 const headerStyle = {
   fontSize: "40px",
   textDecoration: "underline",

src/components/List.js

@@ -1,8 +1,11 @@
+// importing Todo component
 import Todo from './Todo'
 
+// creating a list component which takes one parameter, which is our todos array that is being passed from App comp
 const List = ({ todos }) => {
     return (
         <div>
+//        we map through our todos array and render a Todo component for each todo item
           {todos.map((todo) => 
             <Todo key={todo.id} todo={todo} />
           )}  

src/components/Todo.js

@@ -1,11 +1,13 @@
-
+// we create a new Todo component which takes on parameter, we then grab the todo props from our App component
 const Todo = ({ todo }) => {
     return (
         <div>
+//         we render the todo item name into a h2
             <h2>{todo.item}</h2>
         </div>
     )
 }
 
+// exporting the function to use it eslewhere
 export default Todo
 

src/index.js

@@ -1,9 +1,16 @@
+// importing react module from React
 import React from 'react';
+// importing reactdom which gives us access to virtual dom
 import ReactDOM from 'react-dom';
+// importing styles 
 import './index.css';
+// importing App component
 import App from './App';
+// importing idk what it is lol
 import reportWebVitals from './reportWebVitals';
 
+// this is a method to render react app to the webpage it takes in two arguments html code and an html element, 
+// The purpose of the function is to display the specified HTML code inside the specified HTML element.
 ReactDOM.render(
   <React.StrictMode>
     <App />