Building a Todo List App Project in ReactJS from Scratch in Hindi in 2020

Welcome, to ReactJS Project in Hindi in 2020. We will create ToDo List App in ReactJS from scratch in Hindi. We will cover all the topics
that we have learned so far in our React JS series including Hooks, Props, States, Components, Array Map, etc.
0:00 Start
0:01 Channel Intro
0:20 What we will make
3:40 Subscribe to ThapaTechnical
4:00 Creating App component and JSX
10:00 CSS file styling
11:00 Using Hooks to get Data
15:00 Adding List to Array
25:00 Empty the Input Data
27:30 Handling ToDo Components and States
38:00 Getting ID of selected List
43:00 Deleting the selected List
47:00 Subscribe to Thapa Technical
************ Must Watch Videos For Web Development ************
➡️ Hooks in React JS in Hindi | useState in Hook in React JS: • #30: Hooks in React J...
➡️ Array Destructuring in ES6 in JavaScript in Hindi 2020: • ES6 Tutorial #5: Array...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Check Complete Reactjs in One video here 👇 • ReactJS For Beginners ...
➡️ HTML in One Video: • Learn HTML in One Vide...
➡️ CSS in One video: • Learn Complete CSS In ...
➡️ CSS FlexBox in 30 Minutes: • CSS FlexBox in 30 Minu...
➡️ JavaScript in One video: • JavaScript in One Vide...
➡️ ECMAScript 6 in One Video: • ES5 & ES6 | ECMAScript...
➡️ HTML5 in one video: • HTML5 Tutorial in One ...
➡️ CSS3 in one video: • Learn Complete CSS3 In...
➡️ Bootstrap4 in One video: • Bootstrap 4 in One Vid...
➡️ Jquery in One video: • jQuery in One Video in...
➡️ JSON in one video: • JSON in One Video in H...
➡️ ReactJS in one video: • ReactJS For Beginners ...
➡️ PHP in One Video: • PHP TUTORIAL IN ONE VI...
➡️ NodeJS in one video: / ipnwakoibt
➡️ MySQL in one video: • Complete SQL & MySQL i...
********** CLICK HERE TO WATCH ************
➡️ Fetch API in JavaScript: • Fetch API in JavaScrip...
➡️ AJAX tutorial for beginners in Hindi: • AJAX tutorial for begi...
➡️ Template literals (Template strings) in ES6 in JavaScript in Hindi: • ES6 Tutorial #3: Templ...
➡️ Async Await in JavaScript in Hindi: • Async Await in JavaScr...
➡️ Promises in JavaScript in Hindi: • Master The Promises in...
➡️ Callback Hell in JavaScript: • Callback Hell in JavaS...
➡️ Advanced JavaScript in Hindi Playlist: • Advanced JavaScript Tu...
➡️ ECMAScript Tutorial in Hindi 2020: • Modern JavaScript ES6 ...
➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi: • ES5 & ES6 | ECMAScript...
➡️ JavaScript Game Development Series in 2020: • JavaScript Game Develo...
➡️ Source Code Link: www.thapatechnical.com/2019/1...
➡️ Top 5 Programming Languages in 2020: • Top 5 Programming Lang...
➡️ Ludo Game JavaScript Link: • JavaScript Game in Hin...
➡️Plz show some love to My Siter KZbin Channel and Plz Subscribe Link: / @mayabeautyvlogs878
**************** MUST WATCH VIDEOS *****************
➡️ How to become a Full Stack Developer 2020: • How to become a Full S...
➡️ How To Become a Web Developer 2020: • How To Become a Web De...
➡️ How JavaScript Works: • How JavaScript Works i...
➡️ Follow me on Instagram: / vinodthapa55
Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi
➡️ Link: • Make Website Responsiv...
Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines.
Don't Forget to Follow me on all Social Network,
Website Link: www.thapatechnical.com
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: vinodbahadur...

[@ThapaTechnical]

Guys, our Reactjs project is finally here. I really hope you all gonna love this.✅ Plz share with your friends too on all social networking sites 🙏

[@abhivishwavlogs]

Sir create course on DS with javascript

[@shelendrasingh2301]

Sir source code kaha se lena hoga

[@rohanmishra5548]

Baba you are awesome

[@ajayagrawal1337]

where to find the css source code??

[@kamalkant0534]

sir i tried to add an alert option if nothing is written in the text box, but a error occurs please reply.

[@adilrao7777]

This is the main thing (challenges and small project) make to you a great KZbin teacher. This is very helpful for me nd others. I really appreciate your hard work. Keep it up sir. ❣❣❣

[@PrakashKumar-yk6ms]

You are really amazing. I am watching this react series from 1 and now reached at 44.. each video is awesome and detailed described. Very soon trying to finish it and then I will move on your node js series. Thank you so much. Much Love. Stay happy stay safe and achieve too much success and fulfill your dream.

[@ChandraTech52]

very important topic for every developer thank you so much .🙏 my best KZbin teacher !!

[@amityadav3712]

Hats off thapa sir, you really explain every nook and corner in a very lucid way.

[@rohitsingh2k]

Mst hai bhaiya ji filter wala part gjb laga : )

[@programmer1783]

Informative video , from your video i am learning css , AdvJavascript with React . thanks bro , good bless you

[@ranjitdesai3926]

YOU ARE A GENIUS BHAI!!!!!

[@qutbuddinkhan3155]

Sir Apko to Har cheez Bahut Awesome Dikhai De raha hai aur yahan ham logon ka sir ghoom raha hai....

[@adityaojha2701]

Learned a lot from this video!!

[@BalconyMakeoverIdeas]

maja aagya baney mein first time, i can think how system will work, thanks @thapa bro

[@rutikbhanushali1241]

way of teaching is amazing...keep it up.

[@himanshuvaishya9164]

This vedio is very conceptual and easy to understand .Thank u sir

[@HARDYBOY290988]

you are just Awesome.....nothing else

[@talhashamim3838]

boom guyze with great knowledge project

[@virajprajapati3502]

Vinod Sir you are a great teacher.

[@shrutikadorugade7936]

Awesome Awesome Awesome Awesome Awesome Awesome Awesome Awesome........ Thank you thapa sir for this project...

[@lavish532]

Sir ji, aag laga di aapne. Mai Canada mei student hu and jo apni bhasha mei samaj aata hai vo kisi aur bhasha mei nahi aata. bhot bhot thank you

[@yatinsharma5637]

Hello bro

[@lavish532]

Hello

[@rajat-s-kale1771]

your teaching is awesome

[@alkesh.jethava]

Mene ye kai videos dekhe he sir Par samaj nahi aa raha thaaa Aapke video me sab clear ho jayega pakka Dekha nahi par yakin he mujhe Awesome sir😍 greate

[@ThapaTechnical]

I really hope ☺️

[@snehapyne4577]

There is many KZbin channel who made tutorial on ToDo List App project but no one has explained like you've. I really appreciate your effort to clear each and every line of codes. Thank you Vinod Ji.

[@notbuildingtodolists9968]

kzbin.info/www/bejne/oX6uq614gqqknpo Check this if you're interested in HapiJS

[@alimurtaza7092]

Boohat hi kamal ki video

[@Way_Of_The_Light]

Great tutorial 🙇‍♂️

[@theMadProgrammers]

you are a hidden gem bro

[@ghoshdipan]

A great video to learn new things. Please make new awesome projects like this.

[@qasidgulzar43]

sir you are my favourite teacher love u sir

[@EWorldHub]

Superb Bahot Hard kya Bahot Hard Kadak.

[@user-hx5zf3bw1m]

i learned a lot from this video.

[@PaAGadirajuSanjayVarma]

One of the best

[@maheshkumarinfo9806]

what a teaching brother super.

[@manojbadiger2324]

recently I've bought one course that is paid one. I didn't understand some of the concepts but when I came here to this channel I understood everything.Thank u i hope you will have more subscribers in future.

[@ThapaTechnical]

Welcome brother : )

[@syedadnan7945]

@@ThapaTechnical pls provide source code

[@user-cx7ly9vs6z]

Thank you sir for this videos from Nepal🙏🙏🙏

[@jaiswalgaurav957]

Broo🔥you are awesome 🔥

[@gulsanbor]

You are amazing better than udemy

[@fahimhassan4387]

thnx thapa love from bangladesh

[@darshan9678]

so good presentation this video is so helpfull to me

[@shashankshekhar5693]

Thapa Ji Brilliant... Outstanding. Love to watch your videos and really inspiring me lots.

[@anjitsingha]

Your videos are amazing 👌 Can you please share the CSS file for this tutorial in the comment section

[@wasifirshad9818]

Thanks, I made it!

[@nter_10_ment52]

hello brother, actually its a req. to you that if possible then please add css code link, it actually saves a lot of time and we can directly concentrate on the logical part of our project.

[@avison6348]

i love u bro u helped me alot

[@sadiaafrin2725]

thank u bhaiaaa.. love from bangladesh ... please make more projects with mid nd advance functionality

[@ankitsharma5329]

You are very very great videos

[@sourabhajoshi2129]

Thank you so much sir..

[@thecoderraj3777]

Thanks a lot Sir :)

[@RazaTechTube]

boom gys its work😍😍🥰🥰🥰🥰🥰🥰

[@ratul1125]

Thapa sir is the best

[@ayushshaurav6297]

awesome sir ,nice video

[@johnthapa1879]

You are awesome ☺️

[@ErenYeager-wd7cm]

Bhai shandar video hai yar

[@saifullahMonmoy]

Bhai very helpful series. Thank you so much for making this series with projects.

[@pankajsharma-rf1ov]

great content 😍

[@AzizKhan-or8yp]

aray bai kya hee bat ha ❤❤❤❤❤❤😘

[@gurpreetsingh-xq6br]

kaint a bai ji sirra

[@niloofar3463]

Awsome, subbed. can you make a number guessing game in React js as well? with reset, clear and submit button, or how many attempts are left?

[@abhishekkumar9812]

Your videos are very helpful brother, Keep up the good work :)

[@arunsharma817]

Very Good Tutorials.... You are really talented person ....... We can see add and delete functionality works well and specially we like that it changes immediately. so my question is same add and delete immediate changes can we perform while fetching data from NodeJs/Mongo and add also ? I mean to say when we are dealing with dynamic database like mongodb ....

[@SantoshYadav-xb2hg]

You are awesome.

[@adityarathi3420]

Thank You Sir ! :-)

[@ronakparmar8116]

ghajab va va maja agaya

[@dishashah4197]

great explaination sir

[@adityadev2825]

Awesomeee 👍

[@ZahidKhan-th8pz]

Thapa bhai ap smjhate badhiya ho baki bana kr sb dikha dete h YT pr but smjha nhi pate sb

[@rajbannasa7662]

thank you so much sir

[@bhakuninavneet3906]

Thanku so much sirrr

[@siddharthsaxena6495]

Great explanation

[@sukhpreetkaur9198]

Amazing.

[@rohanmishra5548]

Bhai editing k liye kya use krte ho. I m inspired from you

[@themystefyingfacts5115]

Sir I find your every video interesting and I am from nepal.

[@MANPREETSINGH-ft9hd]

Thanku bro

[@pinjuhsaikia3821]

Thanks sir 🙂

[@jk-sm6qr]

Thankyou

[@ultimatescod6593]

Aap bhaut acche ho...thank u nd luv bro...itna badhiyan bataye but mujhe kaise patta chalega ki yaha ye sab sare function use karni h.. please aap suggest kro. Iska koi documentation de do please

[@vishalpatidar4309]

Excellent, I want to add focus on input field after click on Add button, please let me know

[@dhavalshah2742]

Awesome video

[@HiteshKumar-ct2uk]

Hi Vinod, tag is not working,I am not able to put elements in new line.can you please suggest

[@_aamir]

PORFECT! :D :D

[@MohitYadav-tm8pd]

Can you make a series of online term end exam management system project It will help us to learn new things

[@sobankhan7517]

good work sir

[@krishnadebnath2796]

Thank you

[@shreyajoshi5148]

Make more projects on reactjs ...more apps like whtsapp clone amazon clone

[@mr.shoaibmalik2488]

awsome sir

[@user-jf6ie3dm5s]

no need to create another component you can do this in same file with this code const deleteTodo =(id) => { let filterData = todo.filter((_,val)=> val !== id); setTodo(filterData) } { todo.map((value,index)=>{ return ( {value} deleteTodo(index)}>❌ ) }) } easy with less lines of code

[@samirbante8554]

Hi bro can you help me regarding React form

[@sumitmaharjan2494]

hats off bro

[@sahilgarg3460]

aabe kitne perfect perfect bolte ho

[@mrharshad2000]

sayad jab maine pure javascript me todo-list banaya tha vo easy laga tha ab iss prakar se banakar dekhta hu 🤔🤔🤔

[@ImproveProgrammingLogic]

Very Good

[@nisharajendrapatil2959]

bhaiyya source code upload karo plzzzz........waise aapke videos sach me awesoommeee and boommm h .... :) thankusomuch

[@ZahidKhan-th8pz]

I have created todolist 👍👍 source code are uploaded in my github id

[@notbuildingtodolists9968]

kzbin.info/www/bejne/oX6uq614gqqknpo Check this if you're interested in HapiJS. Full code given

[@chanchalmodal2028]

@@ZahidKhan-th8pz give me the link

[@mrinalagrawal1656]

Sir i learned many languages from ur video only but this is the most confusing :(

[@notbuildingtodolists9968]

kzbin.info/www/bejne/oX6uq614gqqknpo Check this if you're interested in HapiJS

[@osamakhan2552]

yes u are right but u need more and more prectice then u will better understand

[@brithikanthal5147]

Watch again and again what you don't underestimate

[@GauravSharma-bl7nu]

thanks

[@adad8795]

Awesome

[@deeprakholiya7583]

really well

[@AliTravelogy]

bro your video is amazing. you don't share CSS file source code. can you share it? love from pakistan

[@ojhalpatkar963]

thank you sir, sir last wala section smjh nhi aaya apne jo link add kia wo kha se kia?? cross button add krne k liy ?

[@mazharimam9216]

yeah it was really a nice lecture but at last for deletion part i wasnt able to understand.

[@samjanakc2354]

Best video

[@parimalpatil0709]

Can we use replace method for delete ?

[@surajjadli1747]

there is bug in this todolist. if you haven't typed any item and click add button it will add empty item :" const add = () =>{ if(list != "") { setl((old)=>{ return [...old, list] }); seti(""); } }

[@ishrarchowdhury4850]

just write if(item) setItemList

[@surajjadli1747]

@@ishrarchowdhury4850 😀thanks

[@mintu97]

*awesome*

[@pandababy-123]

very nice