From e6246ee33b97b61b9ca48fddde84bfe2c5c676fb Mon Sep 17 00:00:00 2001 From: Kieran <60425579+Memphis1983@users.noreply.github.com> Date: Sat, 5 Jun 2021 09:50:13 +0530 Subject: [PATCH 1/6] Added comments --- src/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/index.js b/src/index.js index ef2edf8..aa4ad9c 100644 --- a/src/index.js +++ b/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( From b6e70f883b95c4f10a72e3c294142b846577ef4a Mon Sep 17 00:00:00 2001 From: Kieran <60425579+Memphis1983@users.noreply.github.com> Date: Sat, 5 Jun 2021 09:58:08 +0530 Subject: [PATCH 2/6] Added comments --- src/App.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/App.js b/src/App.js index af6b858..ca8f495 100644 --- a/src/App.js +++ b/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 (
From 37f4bb05e214478aa99dfb0f62f032d224725b2c Mon Sep 17 00:00:00 2001 From: Kieran <60425579+Memphis1983@users.noreply.github.com> Date: Sat, 5 Jun 2021 10:00:22 +0530 Subject: [PATCH 3/6] added comments --- src/components/Todo.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Todo.js b/src/components/Todo.js index c4c8f6d..21ef5fb 100644 --- a/src/components/Todo.js +++ b/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 (
+// we render the todo item name into a h2

{todo.item}

) } +// exporting the function to use it eslewhere export default Todo From 685fbde6eeafe3d2e7c71d8cf448456fabf83ba2 Mon Sep 17 00:00:00 2001 From: Kieran <60425579+Memphis1983@users.noreply.github.com> Date: Sat, 5 Jun 2021 10:02:29 +0530 Subject: [PATCH 4/6] added comments --- src/components/List.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/List.js b/src/components/List.js index 4274891..30ae351 100644 --- a/src/components/List.js +++ b/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 (
+// we map through our todos array and render a Todo component for each todo item {todos.map((todo) => )} From 2dfaeb4f1a8b2c093856020ff5c1d6cfeafb99b2 Mon Sep 17 00:00:00 2001 From: Kieran <60425579+Memphis1983@users.noreply.github.com> Date: Sat, 5 Jun 2021 10:04:30 +0530 Subject: [PATCH 5/6] added comments --- src/components/Header.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Header.js b/src/components/Header.js index 50c5b33..9cab5ff 100644 --- a/src/components/Header.js +++ b/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 (
+// we are fetching styles from the variable created below

{props.title}

); }; +// we are creating a new object with styles for our component const headerStyle = { fontSize: "40px", textDecoration: "underline", From f6c254bf10a31f66871950faf8a807000c22c3ef Mon Sep 17 00:00:00 2001 From: Kieran <60425579+Memphis1983@users.noreply.github.com> Date: Sat, 5 Jun 2021 10:09:09 +0530 Subject: [PATCH 6/6] Added comments --- src/components/AddTodo.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/AddTodo.js b/src/components/AddTodo.js index 5d7ee18..7669ca7 100644 --- a/src/components/AddTodo.js +++ b/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