100devs · i786m · Jun 3, 2021 · Jun 3, 2021 · Jun 3, 2021 · Jun 3, 2021
diff --git a/public/index.html b/public/index.html
@@ -1,3 +1,7 @@
+<!-- default html file generated when creat react app first runs and is ultimately where the html thats rendered in all the components and app file will end up 
+ ... they will populate the div with a class of root -->
+
+
 <!DOCTYPE html>
 <html lang="en">
   <head>

diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,12 @@
+// imports useState functionality, Header,AddToDo and List components
 import { useState } from 'react'
 import Header from "./components/Header";
 import List from "./components/List"
 import AddTodo from "./components/AddTodo"
 
+//main app function to generate the components which are rendered in the root div in the index.html file
 function App() {
-
+// setting the initial state of the toDos to the array of todo objects
   const [todos, setTodos] = useState([
     {
       id: 1,
@@ -19,13 +21,13 @@ function App() {
       item: "Exercise",
     },
   ]);
-
+//when a new to do is made an id is generated for the id, this is then passed into the set state which updates the setstate array to add the new todo to the existing ones
   const addTodo = (todo) => {
     const id = Math.ceil(Math.random()*100000)
     const newTodo = {id, ...todo}
     setTodos([...todos, newTodo])
   }
-
+//genereates the html thats rendered into the html by using the components imported at the top of the page to dynamically generate the html required based on the todos we have
   return (
     <div className="container">
       <Header title="Todo List" />
@@ -34,5 +36,5 @@ function App() {
     </div>
   );
 }
-
+// maves the App function available throughout the app througgh the use of import in other files
 export default App;
diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js
@@ -1,27 +1,34 @@
+// imports useState to be used in this file
 import { useState } from 'react'
 
+// declares AddToDo and passes in onAdd as props 
 const AddTodo = ({ onAdd }) => { 
+    //sets up useState with state of item and a setItem method
     const [item, setItem] = useState('')
 
+    //creates a function to handle the submission of the form, prevents default behaviour, passes the item state to onAdd function then sets item state to '' 
     const onSubmit = (e) => {
         e.preventDefault()
         onAdd({item})
 
         setItem('')
     }
-
+ //renders the form component
     return (
+        // passes in onSubmit function
         <form onSubmit={onSubmit}>
             <label>Add Todo:</label>
             <input 
                 type="text" 
                 placeholder="Todo Item"
+                //sets value of input to the state so its visible while typing due to onchange fn
                 value={item}
+// changes the state to match the input value at each change
                 onChange={ (e) => setItem(e.target.value)}
             /> 
             <input type="submit" value="Add Todo" />
         </form>
     )
 }
-
+//makes component available to use in the react app
 export default AddTodo
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,16 +1,18 @@
+//import react module
 import React from "react";
-
+// write function to render the Header component, passing in props as a parameter
 const Header = (props) => {
   return (
     <div>
+    // style is set ussing jsx from the style object below, and the text of the h1 is set to the title property from the props parameter
       <h1 style={headerStyle}>{props.title}</h1>
     </div>
   );
 };
-
+//styling object for the header style
 const headerStyle = {
   fontSize: "40px",
   textDecoration: "underline",
 };
-
+//makes component available to be used in the app
 export default Header;
diff --git a/src/components/List.js b/src/components/List.js
@@ -1,14 +1,18 @@
+// imports todo component
 import Todo from './Todo'
 
+//create fn to render the list div component and passes todos in as props
 const List = ({ todos }) => {
     return (
         <div>
+        //using jsx to map through the todos to render a todo component for each todo in the todos arr of obj passed in
           {todos.map((todo) => 
+            //key is set as todo id and the todo prop is set to the todo
             <Todo key={todo.id} todo={todo} />
           )}  
         </div>
     )
 }
-
+//maked the list component available for use elsewhere
 export default List
 
diff --git a/src/components/Todo.js b/src/components/Todo.js
@@ -1,11 +1,12 @@
-
+//function to render the Todo component div, passed todo as a prop
 const Todo = ({ todo }) => {
     return (
         <div>
+        //using the prop property to set the text of the h2
             <h2>{todo.item}</h2>
         </div>
     )
 }
-
+// ennable the use of the todo component in other files
 export default Todo
 
diff --git a/src/index.css b/src/index.css
@@ -15,4 +15,5 @@ code {
 #root{
   display: flex;
   justify-content: space-around;
-}
+}
+/* adding css declarations to style the app at a base level */
diff --git a/src/index.js b/src/index.js
@@ -1,13 +1,16 @@
+//importing modules for use in this file, styles main App file and the reportWebVitals file
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+//renders the App component
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
+  //target the default root div where the app will be rendered into
   document.getElementById('root')
 );
 

diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
@@ -11,3 +11,4 @@ const reportWebVitals = onPerfEntry => {
 };
 
 export default reportWebVitals;
+//default file in the creat-react-app informs users about perf test results, and is made available throughout the app throught the export default
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,4 @@ const reportWebVitals = onPerfEntry => {
		};

		export default reportWebVitals;
		//default file in the creat-react-app informs users about perf test results, and is made available throughout the app throught the export default