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

Подписаться 668 тыс.

Просмотров 344 тыс.

50% 1

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 RU-vid 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...

Опубликовано:

29 май 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 454

@ThapaTechnical 4 года назад

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 4 года назад

Sir create course on DS with javascript

@shelendrasingh2301 4 года назад

Sir source code kaha se lena hoga

@rohanmishra5548 4 года назад

Baba you are awesome

@ajayagrawal1337 4 года назад

where to find the css source code??

@kamalkant0534 4 года назад

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

@adilrao7777 4 года назад

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

@PrakashKumar-yk6ms 3 года назад

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 3 года назад

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

@amityadav3712 Год назад

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

@programmer1783 3 года назад

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

@qutbuddinkhan3155 2 года назад

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

@BalconyMakeoverIdeas 3 года назад

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

@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.

@rutikbhanushali1241 3 года назад

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

@snehapyne4577 3 года назад

There is many RU-vid 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 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kMKzzBMEqh8.html Check this if you're interested in HapiJS

@himanshuvaishya9164 7 месяцев назад

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

@adityaojha2701 2 года назад

Learned a lot from this video!!

@virajprajapati3502 2 года назад

Vinod Sir you are a great teacher.

@anjitsingha 2 года назад

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

@rohitsingh2k 3 года назад

Mst hai bhaiya ji filter wala part gjb laga : )

@HiteshKumar-ct2uk 3 года назад

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

@arunsharma817 11 месяцев назад

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 ....

@vishalpatidar4309 3 года назад

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

@ranjitdesai3926 3 года назад

YOU ARE A GENIUS BHAI!!!!!

@ojhalpatkar963 3 года назад

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 ?

@sadiaafrin2725 5 месяцев назад

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

@niloofar3463 3 года назад

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?

@HARDYBOY290988 Год назад

you are just Awesome.....nothing else

@ZahidKhan-th8pz 3 года назад

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

@gtx1650max-q Год назад

mera ek sawal hai, Jab hum button click karte hai then jo map new task show karta hai toh vo phr se sarey elements shuru s render kar rha hai ya sirf naya vala jo add hua hai array mai ? Like agar maanlo array m 3 tasks hai, mene ek aur banadia toh map dobara 4 k 4 ko render karega ya sirf ek last valey ko hi ?

@amitsolanki9363 2 года назад

Sir!!When i start my react js app it display my home page content properly but when i click other sub pages like about, contact its doesn't display anything olny showing navbar and updated filepath in browser how can i solve this ? Pls help how can i display other subpages content in my browser

@shrutikadorugade7936 3 года назад

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

@purveshdwivedi6059 3 года назад

I would like to tell ki jo app tumne banayi hai usme agar me text box me kuch nahi likhu aur sirf add button pe click karu toh bhi item add ho raha hai array me

@manojbadiger2324 3 года назад

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 3 года назад

Welcome brother : )

@syedadnan7945 3 года назад

@@ThapaTechnical pls provide source code

@talhashamim3838 Год назад

boom guyze with great knowledge project

@dipsundarjana2905 2 года назад

Hlw sir I facing one problem in this TodoList . I write code exactly same like you but problem is After add 1st item if I pass enter then automatically add null items in TodoList. How can solve it.

@user-cx7ly9vs6z 3 месяца назад

Thank you sir for this videos from Nepal🙏🙏🙏

@ghoshdipan 3 года назад

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

@deepakpatel2017 3 года назад

onclick and onslect use karke aapne jo del action perform kiya he using props sir smagh me ni aaya can any one please explain

@rajat-s-kale1771 Год назад

your teaching is awesome

@khanansari3456 2 года назад

Hi thapa sir Agher component na bnou tu sara kam ak he component ky ander karo tu item delete nahi huraha kindly guide me

@qasidgulzar43 3 года назад

sir you are my favourite teacher love u sir

@shashankshekhar5693 3 года назад

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

@ultimatescod6593 3 года назад

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

@janaksuhagiya9114 3 года назад

Hello, Need to compulsory create a new file for ToDoList.jsx , if i do not create a new file then that code is not working perfectly so the please solution for this

@darshan9678 2 года назад

so good presentation this video is so helpfull to me

@maheshkumarinfo9806 11 месяцев назад

what a teaching brother super.

@lavish532 3 года назад

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 2 года назад

Hello bro

@lavish532 2 года назад

Hello

@user-hx5zf3bw1m 8 месяцев назад

i learned a lot from this video.

@alkesh.jethava 4 года назад

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 4 года назад

I really hope ☺️

@saifullahMonmoy 2 года назад

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

@EWorldHub 3 года назад

Superb Bahot Hard kya Bahot Hard Kadak.

@theMadProgrammers 9 месяцев назад

you are a hidden gem bro

@mallikasethi2604 3 года назад

when we return values in java script react then do the values automatically get display ! dont we need to write anything

@gulsanbor 4 года назад

You are amazing better than udemy

@abhishekkumar9812 3 года назад

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

@fahimhassan4387 3 года назад

thnx thapa love from bangladesh

@surajjadli1747 3 года назад

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 8 месяцев назад

just write if(item) setItemList

@surajjadli1747 8 месяцев назад

@@ishrarchowdhury4850 😀thanks

@RajeevKumar-qh6zh 4 года назад

sir,select me argument diya toh wo delete ke andar kese pass ho gya pls btaao ?????????? kafin messed up hain ye chi

@mrinalagrawal1656 3 года назад

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

@notbuildingtodolists9968 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kMKzzBMEqh8.html Check this if you're interested in HapiJS

@osamakhan2552 2 года назад

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

@rakeshlonikar589 3 года назад

Will please tell me that how to add Date after the list. current date of adding that list name...

@Way_Of_The_Light 3 года назад

Great tutorial 🙇‍♂️

@mr.harshad2000 Год назад

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

@rohanmishra5548 4 года назад

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

@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 11 месяцев назад

Hi bro can you help me regarding React form

@parimalpatil0709 2 года назад

Can we use replace method for delete ?

@themystefyingfacts5115 4 года назад

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

@mohitkhandar8060 2 года назад

osm video but facing (oldItems.filter is not a function) this typ off error can you help me try to short oout

@ankitsharma5329 4 года назад

You are very very great videos

@jaiswalgaurav957 2 года назад

Broo🔥you are awesome 🔥

@alimurtaza7092 3 года назад

Boohat hi kamal ki video

@mazharimam9216 3 года назад

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

@Muhammadwaseemkha9003 3 года назад

sir hum thorugh ye loop bhe thoh add kar sakty hy ky nahe

@avison6348 3 года назад

i love u bro u helped me alot

@MohitYadav-tm8pd 4 года назад

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

@RAJMUSHAM 3 года назад

Sir, agar same value firse add kiyato add honga kyaaa.............................................

@bhaskarkumar9336 3 года назад

Did you upload the React Saga lecture?

@nileshratanguptanrg 3 года назад

sir aapne koi video redux and react ke sath banaya hai.. if yes, please share link or not then please make that.

@PaAGadirajuSanjayVarma 3 года назад

One of the best

@shreyajoshi5148 3 года назад

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

@patelkrupa6534 2 года назад

hello sir agar hum aise hi koi small project bana rahe he or aapne jese ek park ka alag component create kiya wo kese pata chale k hame konsa part ka alag component banana hai ....plz sir iske par 1 video banaiye

@nisharajendrapatil2959 3 года назад

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

@ZahidKhan-th8pz 3 года назад

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

@notbuildingtodolists9968 2 года назад

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kMKzzBMEqh8.html Check this if you're interested in HapiJS. Full code given

@chanchalmodal2028 11 месяцев назад

@@ZahidKhan-th8pz give me the link

@ayushshaurav6297 2 года назад

awesome sir ,nice video

@sourabhajoshi2129 Год назад

Thank you so much sir..

@wasifirshad9818 Год назад

Thanks, I made it!

@Ajaykumar-ky6mv 2 года назад

sir without type any items or text click on (+) button delete icon button add-in list , this is an eerror how to fix it

@omkarsharma3229 4 года назад

hello sir i am fetching a one problems , i did not get cross buttion please provide integrity="sha384 link please help

@umarkayani3400 Год назад

there is a small problem if you click + without typing anything you are still going to get delete button

@sagarkamble3538 Год назад

how to display items in reverse order. means last added item on top of list???

@AliTravelogy 2 года назад

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

@thecoderraj3777 3 года назад

Thanks a lot Sir :)

@neerajphp3687 2 года назад

Vinod sir kya Aap react native ka full video nhi banaya h kya ????????

@pankajsharma-rf1ov 3 года назад

great content 😍

@johnthapa1879 4 года назад

You are awesome ☺️

@dishashah4197 8 месяцев назад

great explaination sir

@lobsanggyatso6280 2 года назад

sir!! 23:04 why are we returning , why cant we do just [...oldItems, inputValue]

@sadavikram1708 3 года назад

Hi Thapa, all your videos are awesome. I have a doubt in click event. Is it mandatory to use callback function. We can directly push input items to array instead of writing one more function