Build a Todo App with React.js | Beginner React Project using hooks

In this tutorial you will learn how to build a todo app with react js, using some basic react hooks like useState and useEffect. This todo app will save all tasks and updates to localStorage and we will add some cool css animations to make this app more appealing for your portfolio.

Timestamps:
00:00:00 - Intro
00:02:24 - Html structure for our app
00:08:20 - Basic styling
00:14:24 - Custom checkboxes
00:19:58 - Adding and listing tasks from state
00:26:13 - Saving tasks to localStorage
00:33:14 - Task competition / handling checkboxes
00:39:21 - Backgrund and line animation
00:43:22 - Tasks counter and dynamic header
00:48:05 - Removing tasks
00:55:40 - Renaming tasks
01:02:03 - Outro

[LalaYamazaki]

Followed your video and coded myself. Learned a lot. Thank you so much! More react videos please!

[amanmanojpreeti]

Great video. I broke the Task file in some extra components and learned a lot on how to pass values between components. Thanks a lot! 😄

[MrBrady]

Thanks for the fun project! You asked at the end, "what other projects would you like to see?" ... How about a React todo list with drag and drop functionality? This way you could order your tasks and prioritize them. Maybe have an option to turn numbering on and off as well. Thumbs up and thanks again

[poojaheera]

completed the tutorial in 3 days and learned so much from this. it turned out an amazing experience watching the app work in my browser although that emoji part I didn't understand. Thank you 😊

[thebrand]

This was fun to build along with you. i will be adding a timer to mine

[learningstuffs]

I love this tutorial, please make more quality React Beginner Tutorial like this. Also, what's the extension that you use that showing things like (initialState:, effect:, value: ) when you are writing the hooks?

[furkankolay]

Great tutorial man thank you very much! If you could do a css-react tips and tricks would be dope

[vishwas]

Can you make a video on your developer environment, what all tools you use?

[saikrishnagoud]

Getting one bug
removing all todos->refresh again 0th index todo is rendering(0th index value is not getting removed from local storage).

[SkaiDex]

At 6:20 when I am writing the code const [value, setValue] = useState(initialState: ''); in VS Code, It is showing error : Parsing error: The type cast expression is expected to be wrapped with parenthesis

[amanmanojpreeti]

@32:24 how did you get that all files search option? It's only in Intellij and not in vs code. Really curious about it.

[prabhjyotsingh]

I am getting error using the below code
export default function Checkbox({defaultChecked :boolean = false}) {
const [checked, setChecked ] = useState(defaultChecked);

[ahmed.allawi]

Send you thanks and love many Egypt ❤❤

[xzex]

I dont understand what is useState(initialState: '')

[KiranKumar-ikgo]

Everything is fine but the voice is not clear plz check it once. Thankyou for this mini project

[tonypiao]

the app has a bug. When you delete the last task and try to refresh, the last task will always remains. Is it related to the useEffect?

[victoro]

Please next time show the filenames while you're working.

[leonardmbibi]

Your video is very good. In fact I am not seeing as many likes it deserved. Bravo! Not having to use nanoid() or uuid() makes it better. I suggest you first write down the steps before starting to record. This eliminates having to go back and forth - it disconnects inexperienced ones.

[oshogweikekhai]

i cannot get my app to show the ticks, but on the console, it toggles "true" or "false" (works correctly). on the App the task doesnt show those ticks when selected. i have tried debugging, nothing seems to be the problem. secondly, removing checked/setchecked state is throwing up error.