Build Modern Todo app for React Beginners

Опубликовано: 19 Октябрь 2024
на канале: Code Bless You

15,100

397

🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: https://forms.gle/8m9XA7kmc17nHfhz8 🚀

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: https://drive.google.com/file/d/193K-...

🚀Access My Complete React JS Course: https://www.udemy.com/course/the-ulti...
💌Join my FREE Email News Letter for updates: https://codeblessyou.ck.page/newsletter

🤩MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - https://amzn.to/42qPZkb
Old Desk in Budget - https://amzn.to/3UlaFbm
Favorite Laptop - https://amzn.to/3OrqmKa
LG Monitor for Productivity - https://amzn.to/3uqA5tv
Silent Keyboard(Loved It) - https://amzn.to/3UjagGv
Mouse & Keyboard Combo - https://amzn.to/3Sq50hs
Extra Large Mouse Pad - https://amzn.to/48Nhcjv
Sony Headphones - https://amzn.to/3HHjYed
Cheap Earphones for Editing - https://amzn.to/48eBykN
Daily Use Laptop Stand - https://amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - https://amzn.to/48YgAaK
Mport X Connector - https://amzn.to/3UoHsML
Mic - https://amzn.to/48eCrtD
3 Color Lightbar - https://amzn.to/42qgaaW
Dual Monitor Stand - https://amzn.to/48Nixa1
Stop Watch for Productivity - https://amzn.to/3Un1RBW
Dotted Diary - https://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: https://share.epidemicsound.com/7fhc2o

Social Media Links
🚀COURSES : https://www.udemy.com/user/code-bless...
💌News Letter : https://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