Beginner React Project - Learn React in 35 Minutes

Want to learn React, but not sure where to start? With this one project you will learn all that you need to become a React developer and begin your journey as a modern front-end software engineer! In this video we will cover all of the important topics including hooks, state, JSX, conditional rendering and more! With this to do list application, I will guide you step by step through the process from start to end. If this is your first react project, or maybe you need to cover the basics again, this is the video for you.
To learn more about React, check out the other videos on this channel!

[@CodeSnapOnline]

See below the App.css file for the project!
.to-do-list {
display: flex;
flex-direction: column;
align-items: center;
}
.to-do-container {
display: flex;
flex-direction: row;
width: 96%;
height: 88px;
background-color: #FF4F4F;
align-content: center;
border-radius: 8px;
margin-top: 8px;
margin-bottom: 8px;
padding-top: 8px;
padding-bottom: 8px;
}
.to-do-container.completed {
background-color: #ffabab;
}
.to-do-container:hover {
border: 2px solid #4D4D4D;
}
.to-do-checkbox {
color: white;
font-size: 40px;
height: 50px;
width: 50px;
text-align: center;
align-self: center;
line-height: 62px;
margin-left: 8px;
margin-right: 8px;
}
.to-do-text {
color: white;
font-size: 24px;
height: fit-content;
align-self: center;
font-family: 'Open Sans';
font-weight: normal;
margin-left: 0px;
overflow-y: scroll;
height: fit-content;
max-height: 88px;
width: 100%
}
/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
.to-do-text::-webkit-scrollbar {
display: none;
}
/* Optional: Hide scrollbar for Firefox */
.to-do-text {
scrollbar-width: none;
}
.to-do-delete {
background-color: #FF4F4F;
border: none;
color: white;
font-size: 42px;
height: 50px;
width: 50px;
text-align: center;
align-self: center;
line-height: 62px;
margin-right: 12px;
margin-left: auto;
}
.to-do-delete.completed {
background-color: #ffabab;
}
.header-container {
display: flex;
flex-direction: column;
}
.header {
height: 120px;
margin-bottom: 6px;
border-bottom: 4px solid #4D4D4D;
width: 98%;
align-self: center;
display: flex;
flex-direction: row;
}
.header-title {
color: #4D4D4D;
font-size: 56px;
height: fit-content;
align-self: center;
font-family: 'Open Sans';
font-weight: normal;
margin-left: 20px;
}
.header-add-task {
background-color: #FF4F4F;
width: 80px;
height: 80px;
align-self: center;
border-radius: 8px;
margin-right: 20px;
margin-left: auto;
display: flex;
flex-direction: row;
justify-content: center;
}
.header-add-task-text {
color: white;
align-self: center;
font-size: 48px;
line-height: 36px;
}
.pop-up-container {
height: 100dvh;
width: 100dvw;
background-color: none;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.8);
margin-left: -8px;
margin-top: -8px;
}
.pop-up {
width: 80%;
height: 50%;
background-color: white;
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
}
.pop-up-title {
color: #4D4D4D;
font-size: 48px;
height: fit-content;
align-self: center;
font-family: 'Open Sans';
font-weight: normal;
margin-top: 12px;
margin-bottom: 24px;
text-align: center;
padding-left: 12px;
padding-right: 12px;
}
.pop-up-input {
height: auto;
margin-top: auto;
margin-bottom: 12px;
height: 100%;
width: 90%;
border: 2px solid #4D4D4D;
border-radius: 8px;
font-size: 32px;
text-align: center;
}
.pop-up-button-container {
height: fit-content;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.pop-up-button {
color: #4D4D4D;
font-size: 28px;
height: fit-content;
align-self: center;
font-family: 'Open Sans';
font-weight: normal;
margin-left: 8px;
margin-right: 8px;
border-radius: 8px;
margin-bottom: 12px;
padding: 8px;
border: none;
color: white;
}
.back {
background-color: #FF4F4F;
}
.add {
background-color: #00c31a;
}

[@marthinus.x]

A nice refresher, thank you for making this. Your narration is really good too, very clear and to the point.

[@CodeSnapOnline]

Thanks for the support!

[@johny_ginger]

Nice One. loved the video.

[@LafeSpace]

I noticed the ToDoItem section was missing.

[@Onur-iv8lt]

where is the css file?

[@CodeSnapOnline]

I have just posted a pinned comment with the file, thank you for watching!

[@baulcartoonhd]

I would be cool if you shared a link to the code instead of just pasting tens of lines of code out of nowhere...

[@CodeSnapOnline]

I will make sure that I share a link for future projects, thank you for the feedback :)

[@raulriquelme4734]

Your teaching is very good, it is pure gold, continue so I want to continue learning, thank you

[@CodeSnapOnline]

Thank you! I am glad that you enjoyed the video :)