Build Modern Todo app for React Beginners

Stop making boring Todo application in React. Instead of that build this modern to do react application. I specially design this project for React beginners. This is the Modern To do application for React beginners.
💙Download Resources & CSS: drive.google.com/file/d/193K-...
🚀Access My Complete React JS Course: www.udemy.com/course/the-ulti...
💌Join my FREE Email News Letter for updates: codeblessyou.ck.page/newsletter
🤩MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
Topics Covered in this video
- Building todo application in react
- Todo app in react
- modern todo application
- how to plan react application
- handling form in react
- shortcut trick for handling multiple forms in react
- props
- add task functionality
- tag selection functionality
- adding custom fonts
- much much more
Overview
00:00:00 Intro
00:00:18 Create react application using vite
00:01:17 Todo App Features
00:02:57 How I plan react project
00:04:56 Creating website layout
00:10:35 Building task form component
00:14:36 Adding styles for form component
00:21:53 Creating Tag component
00:23:55 Props in React
00:28:25 Building Task List Component
00:34:24 Exercise Solution
00:38:32 Building TaskCard Component
00:46:06 Handling Form inputs
00:51:38 Shortcut Trick to handle multiple form inputs
01:00:17 React Strict Mode
01:02:54 Handling Tag Selection
01:10:50 Display selected tag on UI
01:16:34 Display Task Cards
01:24:10 Deleting Single Task
01:30:29 Saving Tasks in Local Storage
01:33:23 Basics of useEffect Hook
01:38:59 Adding custom fonts
Write in comment section, Which extension you will use for the future React Project.
⏬Music & Sound Effects from: share.epidemicsound.com/7fhc2o
Social Media Links
🚀COURSES : www.udemy.com/user/code-bless...
💌News Letter : codeblessyou.ck.page/newsletter
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
Tags
react,react js,reactjs,react tutorial,react tutorial for beginners,react js tutorial,reactjs tutorial for beginners,todo app react,todo app reactjs,react todo app,modern todo app react,modern to do app,react beginner projects,react beginner tutorial,react tutorial todo,react tutorial todo list,todo app react js,modern react app,react todo,react todo list,react todo list tutorial,reactjs tutorial,react project tutorial,learn react

[@CodeBlessYou]

Register for my Git and Github Course - forms.gle/y4aYDYCfojvthimNA Only first 100 students will get this course completely FREE

[@priya_bala321]

Awesome video. One request bro please add Edit icon next to delete icon and plz add that functionality too.

[@mk123418]

Man Code Bless You ! I made this project in 3 hours straight and i gained so munch time learning react with this. You should do more tutorials like this for React websites or anything else that allow us to touch more React to learn by ourselves by concrete examples.

[@CodeBlessYou]

I will. You can check my complete React Js Course also. Link is in description❤❤

[@Arjunkumarvs]

Excellent ❤❤

[@CodeBlessYou]

❤❤❤

[@CoderBelal]

sound and explanation pretty good

[@CodeBlessYou]

❤❤❤

[@CoderBelal]

@@CodeBlessYou please share github links of this project

[@vijaylogin]

please share github link of this project

[@nunajah]

Create a project with Nextjs + typescript. Please sir 😊

[@tsdonalds1668]

+1

[@CodeBlessYou]

Sure

[@vijaylogin]

please share github links of this project

[@fl3xi3]

which font is this brother, brother tell me which font is this.

[@CodeBlessYou]

MonoLisa

[@CoderBelal]

please share github links of this project

[@CodeBlessYou]

I will.

[@chetan_rajputt]

Brother how to improve English for interview, i am Reactjs developer .

[@CodeBlessYou]

Watch Videos in English, watch movies in English and try to think in English. That's how I am learning. Don't worry much about language. If your fundamentals of programming is clear then you got the job. But it also depends on interviewer.

[@vijaylogin]

please share github link of this project

[@vijaylogin]

please share github link of this project

[@vijaylogin]

please share github link of this project

[@CodeBlessYou]

I will upload project on github and give you the link