React Todo List App Tutorial - Beginner React JS Project Using Hooks

Learn how to build a React Todo List App in this beginner project tutorial. We will mainly use React hooks, so useEffect, useState, and useRef. You will be able to add, remove, edit, and mark complete/cross out the todo items.

If you want to follow me along my coding journey, be sure to subscribe :)

Timeline:
0:00 React Todo App Intro
1:46 Creating React App in Terminal
5:26 Creating the Components
6:41 Editing TodoForm Component
15:00 Editing TodoList Component
22:20 Editing the Todo Component
42:50 Adding the CSS
45:50 Creating Custom Edit Input

Source code

Responsive React Website Tutorial

[koffet]

After i tried following the video, i just realized this is not for beginner.
But it's good.

Me: beginner react

[TahirHussain-epus]

your are just typing the code, please try to explain what does those function do. so that it will be easy to understand.

[codedcarbon]

css for near the end of the tutorial:

box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
}

body {
background: linear-gradient(
90deg,
rgba(48, 16, 255, 1) 0%,
rgba(100, 115, 255, 1) 100%
);
}
.todo-app {
display: flex;
flex-direction: column;
justify-content: start;
width: 520px;
min-height: 600px;
background: #161a2b;
text-align: center;
margin: 128px auto;
border-radius: 10px;
padding-bottom: 32px;
}

h1 {
margin: 32px 0;
color: #fff;
font-size: 24px;
}

.complete {
text-decoration: line-through;
opacity: 0.4;
}

.todo-form {
margin-bottom: 32px;
}

.todo-input {
padding: 14px 32px 14px 16px;
border-radius: 4px 0 0 4px;
border: 2px solid #5d0cff;
outline: none;
width: 320px;
background: transparent;
color: #fff;
}

.todo-input::placeholder {
color: #e2e2e2;
}

.todo-button {
padding: 16px;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
outline: none;
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
color: #fff;
text-transform: capitalize;
}

.todo-input.edit {
border: 2px solid #149fff;
}

.todo-button.edit {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
padding: 16px 22px;
}

.todo-container {
display: flex;
flex-direction: row;
position: relative;
}

.todo-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px auto;
color: #fff;
background: linear-gradient(
90deg,
rgba(255, 118, 20, 1) 0%,
rgba(255, 84, 17, 1) 100%
);

padding: 16px;
border-radius: 5px;
width: 90%;
}

.todo-row:nth-child(4n + 1) {
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
}

.todo-row:nth-child(4n + 2) {
background: linear-gradient(
90deg,
rgba(255, 12, 241, 1) 0%,
rgba(250, 0, 135, 1) 100%
);
}

.todo-row:nth-child(4n + 3) {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
}

.icons {
display: flex;
align-items: center;
font-size: 24px;
cursor: pointer;
}

.delete-icon {
margin-right: 5px;
color: #fff;
}

.edit-icon {
color: #fff;
}

[PurityNetwork]

Luckily I wasn't completely new to React because in all honesty this wasn't a very well planned out tutorial for beginners.
From a learning perspective, it was hard to follow as you declared functions several times before they were written.
It probably does make complete sense to someone well versed in React because you can do them in whatever order (as you know how to tie them up ultimately) but as a novice, it's hard to follow and understand.

However that criticism aside, I really enjoyed making this application and have subbed for more.

[addacdd]

CSS File to save you all time.

{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
}

body {
background: linear-gradient(
90deg,
rgba(48, 16, 255, 1) 0%,
rgba(100, 115, 255, 1) 100%
);
}
.todo-app {
display: flex;
flex-direction: column;
justify-content: start;
width: 520px;
min-height: 600px;
background: #161a2b;
text-align: center;
margin: 128px auto;
border-radius: 10px;
padding-bottom: 32px;
}

h1 {
margin: 32px 0;
color: #fff;
font-size: 24px;
}

.complete {
text-decoration: line-through;
opacity: 0.4;
}

.todo-form {
margin-bottom: 32px;
}

.todo-input {
padding: 14px 32px 14px 16px;
border-radius: 4px 0 0 4px;
border: 2px solid #5d0cff;
outline: none;
width: 320px;
background: transparent;
color: #fff;
}

.todo-input::placeholder {
color: #e2e2e2;
}

.todo-button {
padding: 16px;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
outline: none;
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
color: #fff;
text-transform: capitalize;
}

.todo-input.edit {
border: 2px solid #149fff;
}

.todo-button.edit {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
padding: 16px 22px;
}

.todo-container {
display: flex;
flex-direction: row;
position: relative;
}

.todo-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px auto;
color: #fff;
background: linear-gradient(
90deg,
rgba(255, 118, 20, 1) 0%,
rgba(255, 84, 17, 1) 100%
);

padding: 16px;
border-radius: 5px;
width: 90%;
}

.todo-row:nth-child(4n + 1) {
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
}

.todo-row:nth-child(4n + 2) {
background: linear-gradient(
90deg,
rgba(255, 12, 241, 1) 0%,
rgba(250, 0, 135, 1) 100%
);
}

.todo-row:nth-child(4n + 3) {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
}

.icons {
display: flex;
align-items: center;
font-size: 24px;
cursor: pointer;
}

.delete-icon {
margin-right: 5px;
color: #fff;
}

.edit-icon {
color: #fff;
}

[elliottarnold]

I dont think its helpful to declare functions inside of the before you have written it. You end up backtracking and it disrupts the flow of learning about the app. You have done this several times in the video by the time you reach 32:31. Just my opinion.

[klhmia]

I noticed a few comments in here that are critical but respectful and hit on a crucial point for your channels content in general - the things you create are amazing, elegant, and beautiful, but the way you explain them is not very effective. The order in which you do things is perhaps convenient based on the template you've created, but from a learning perspective it's hard to see what's going on let alone draw those necessary correlations. I'm familiar with React, so I can see what's going on, but that only makes it clearer how strange the approach to some of these things is.

That being said, I only take the time to write this comment because I love the concept of your channel, your developments are beautiful, and you're a cool dude so I'd love to see you get more views and subs. I'd also love to be able to use your videos to learn more!

[subbusubtamanyam]

This is the css file'


* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
}

body {
background: linear-gradient(
90deg,
rgba(48, 16, 255, 1) 0%,
rgba(100, 115, 255, 1) 100%
);
}
.todo-app {
display: flex;
flex-direction: column;
justify-content: start;
width: 520px;
min-height: 600px;
background: #161a2b;
text-align: center;
margin: 128px auto;
border-radius: 10px;
padding-bottom: 32px;
}

h1 {
margin: 32px 0;
color: #fff;
font-size: 24px;
}

.complete {
text-decoration: line-through;
opacity: 0.4;
}

.todo-form {
margin-bottom: 32px;
}

.todo-input {
padding: 14px 32px 14px 16px;
border-radius: 4px 0 0 4px;
border: 2px solid #5d0cff;
outline: none;
width: 320px;
background: transparent;
color: #fff;
}

.todo-input::placeholder {
color: #e2e2e2;
}

.todo-button {
padding: 16px;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
outline: none;
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
color: #fff;
text-transform: capitalize;
}

.todo-input.edit {
border: 2px solid #149fff;
}

.todo-button.edit {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
padding: 16px 22px;
}

.todo-container {
display: flex;
flex-direction: row;
position: relative;
}

.todo-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px auto;
color: #fff;
background: linear-gradient(
90deg,
rgba(255, 118, 20, 1) 0%,
rgba(255, 84, 17, 1) 100%
);

padding: 16px;
border-radius: 5px;
width: 90%;
}

.todo-row:nth-child(4n + 1) {
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
}

.todo-row:nth-child(4n + 2) {
background: linear-gradient(
90deg,
rgba(255, 12, 241, 1) 0%,
rgba(250, 0, 135, 1) 100%
);
}

.todo-row:nth-child(4n + 3) {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
}

.icons {
display: flex;
align-items: center;
font-size: 24px;
cursor: pointer;
}

.delete-icon {
margin-right: 5px;
color: #fff;
}

.edit-icon {
color: #fff;
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
}

body {
background: linear-gradient(
90deg,
rgba(48, 16, 255, 1) 0%,
rgba(100, 115, 255, 1) 100%
);
}
.todo-app {
display: flex;
flex-direction: column;
justify-content: start;
width: 520px;
min-height: 600px;
background: #161a2b;
text-align: center;
margin: 128px auto;
border-radius: 10px;
padding-bottom: 32px;
}

h1 {
margin: 32px 0;
color: #fff;
font-size: 24px;
}

.complete {
text-decoration: line-through;
opacity: 0.4;
}

.todo-form {
margin-bottom: 32px;
}

.todo-input {
padding: 14px 32px 14px 16px;
border-radius: 4px 0 0 4px;
border: 2px solid #5d0cff;
outline: none;
width: 320px;
background: transparent;
color: #fff;
}

.todo-input::placeholder {
color: #e2e2e2;
}

.todo-button {
padding: 16px;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
outline: none;
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
color: #fff;
text-transform: capitalize;
}

.todo-input.edit {
border: 2px solid #149fff;
}

.todo-button.edit {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
padding: 16px 22px;
}

.todo-container {
display: flex;
flex-direction: row;
position: relative;
}

.todo-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 4px auto;
color: #fff;
background: linear-gradient(
90deg,
rgba(255, 118, 20, 1) 0%,
rgba(255, 84, 17, 1) 100%
);

padding: 16px;
border-radius: 5px;
width: 90%;
}

.todo-row:nth-child(4n + 1) {
background: linear-gradient(
90deg,
rgba(93, 12, 255, 1) 0%,
rgba(155, 0, 250, 1) 100%
);
}

.todo-row:nth-child(4n + 2) {
background: linear-gradient(
90deg,
rgba(255, 12, 241, 1) 0%,
rgba(250, 0, 135, 1) 100%
);
}

.todo-row:nth-child(4n + 3) {
background: linear-gradient(
90deg,
rgba(20, 159, 255, 1) 0%,
rgba(17, 122, 255, 1) 100%
);
}

.icons {
display: flex;
align-items: center;
font-size: 24px;
cursor: pointer;
}

.delete-icon {
margin-right: 5px;
color: #fff;
}

.edit-icon {
color: #fff;
}

[emenikedaniel]

When you said, this line of code you dont need to understand in it at 17.40 in your video. Man, i laughed really hard cos javascript is jst complex. We just have to learn everyday.

[oskarolortegui]

where does ever the property "is Complete" appear? I mean the object created only has "id" and "text" as keys but even "text" is changed for "value" I'm really confuse

[S_Chandra]

Again good tutorial. One request is that while using any inbuild function, feature from react for example useEffect method then please explain its significance and why we should use it if time permits. This can clear React fundamentals as well.

[marshallmurray]

When I was looking for React tutorials, everyone was throwing shade at To Do apps. You made a great tutorial and I learned a lot! Thanks.

[hacksbyjohn]

Setting Id incrementally, zero to infinite instead of having random number in a range:

const [id, setId] = useState(0);
const giveId=()=>{
setId(id + 1)
return id;
}

const handleSubmit = (e)=> {
e.preventDefault();

props.onSubmit({
id: giveId(),
text:input
});
setInput("");

};

[mohanedradhouani]

have issue in the minit 32
cant add item in the fields ??
any help please ?

[misterjoe]

This was a great app. Local storage add on would be nice with this app.

[reactify]

I have a question...

const submitUpdate = value => {
updateTodo(edit.id, value);
setEdit({
id: null,
value: ''
});
};

if (edit.id) {
return <TodoForm edit={edit} onSubmit={submitUpdate} />;
}

but you didint give any parameter for submitUpdate Function. how it take its value to update?

[jorden]

Thanks for your time man, really, but first you need to start writing the code from the beginning and not from the functions. It is almost impossible to understand what you are doing, and in addition you are not explaining the concepts of React and the written functions.

[aneeshkarki]

If you are beginner and this is your first tutorial video then I would suggest you look for another one instead of this(Not saying this is a bad video) . The tutorial was okay till the middle but after that it felt like he had no idea what he was doing. Felt like we was just copying or reviewing the codes.

[luiscrespol]

I got totally confused and something that It would take 10 minutes, but it took 50 min. You need to redo this tutorial, fix the mistakes, and make it easier and faster!

[chaitanyajoshi]

This is absolutely not for beginners. I strongly suggest not to go with this one if you are a beginner. As a beginner I expect that you explain how pros and states are working. But I don't see that happening at all. Plus the way you call the props and then pass them is really confusing.