Это видео недоступно.
Сожалеем об этом.
Building a Todo List App Project in ReactJS from Scratch in Hindi in 2020
HTML-код
- Опубликовано: 29 май 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.thapatechn...
➡️ 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 RUclips 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.thapatechn...
Instagram Link: / vinodthapa55
Facebook Link: / vinodthapa55
Twitter Link: / vb55thapa
Facebook ThapaTechnical Page Link: www.facebook.c...
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 🙏
Sir create course on DS with javascript
Sir source code kaha se lena hoga
Baba you are awesome
where to find the css source code??
sir i tried to add an alert option if nothing is written in the text box, but a error occurs please reply.
This is the main thing (challenges and small project) make to you a great RUclips teacher. This is very helpful for me nd others. I really appreciate your hard work. Keep it up sir. ❣❣❣
Sir Apko to Har cheez Bahut Awesome Dikhai De raha hai aur yahan ham logon ka sir ghoom raha hai....
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.
very important topic for every developer thank you so much .🙏 my best RUclips teacher !!
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.
Welcome brother : )
@@ThapaTechnical pls provide source code
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.
*{margin:0;padding:0;box-sizing:border-box;}
*{
box-sizing:border-box;
padding: 0;
margin:0;
font-family:"josefin Sans","Arial Narrow",Arial,sans-serif;
}
.main_div{
width :100%;
height:100vh;
background:#6983aa;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
text-align: center;
}
.center_div{
width:25%;
height:80vh;
background-color: #f4f4f4;
box-shadow:5px 5px 25px -5px rgba(0,0,0,0.5);
border-radius:15px;
}
h1{
color:white;
background:transparent;
background-color: #8566aa;
padding:6px 0 2px 0;
margin-bottom:10px;
box-shadow:5px 5px 15px -5px rgba(0,0,0,0.3);
}
input{
text-align:center;
height:30px;
top:10px;
border:none;
background:transparent;
font-size:20px;
font-weight:500;
width:60%;
border-bottom:2px solid #8566aa;
outline:none;
}
button{
min-height:40px;
width:40px;
border-radius:50%;
border-color: transparent;
background-color:#8566aa;
color:#fff;
font-size:40px;
border:none;
outline:none;
margin-left:10px;
box-shadow:5px 5px 15px -5px rgba(0,0,0,0.3);
}
button:hover{
background-color: #20bf6b;
}
ol{
margin-top:30px;
}
ol li{
padding-left:0px;
text-align:left;
font-size:20px;
font-weight:500;
min-height:40px;
display:flex;
align-items:center;
color:#8566aa;
text-transform: capitalize;
}
.todo_style {
display:flex;
flex-direction:row;
justify-content:left;
align-items:center;
}
.todo_style .fa-times{
width:20px;
height:20px;
display:flex;
justify-content:center;
align-items:center;
background-color: #8566aa;
border-radius:50%;
margin:0 15px 0 35px;
color:aliceblue;
box-shadow: 5px 5px 15px -5px rgba(0,0,0,0.3);
}
.todo_style .fa-times:hover{
background-color: crimson;
}
.todo_style .fa-times:hover .list_style{
color:crimson;
}
@media (max-width:768px)
{
.center_div{
width:55%;
}
}
.todo_style .fa-times{
margin:0 15px 0 15px;
display:flex;
justify-content:center;
align-items:center;
}
button {
margin-left:5px;
min-height:40px;
width: 40px;
color:#fff;
font-size:30px;
}
🎉😊
thank uh brother
thank you bro🥰
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("");
}
}
just write if(item)
setItemList
@@ishrarchowdhury4850 😀thanks
There is many RUclips 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.
ruclips.net/video/kMKzzBMEqh8/видео.html Check this if you're interested in HapiJS
boom guyze with great knowledge project
Mst hai bhaiya ji filter wala part gjb laga
: )
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
I really hope ☺️
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
Hello bro
Hello
Hats off thapa sir, you really explain every nook and corner in a very lucid way.
Sir i learned many languages from ur video only but this is the most confusing :(
ruclips.net/video/kMKzzBMEqh8/видео.html Check this if you're interested in HapiJS
yes u are right but u need more and more prectice then u will better understand
Watch again and again what you don't underestimate
Superb Bahot Hard kya Bahot Hard Kadak.
Informative video , from your video i am learning css , AdvJavascript with React . thanks bro , good bless you
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
Hi bro can you help me regarding React form
bhaiyya source code upload karo plzzzz........waise aapke videos sach me awesoommeee and boommm h .... :) thankusomuch
I have created todolist 👍👍 source code are uploaded in my github id
ruclips.net/video/kMKzzBMEqh8/видео.html Check this if you're interested in HapiJS. Full code given
@@ZahidKhan-th8pz give me the link
This vedio is very conceptual and easy to understand .Thank u sir
line 37,38 --> { Item.map((itemval) = () => {
return ; })}
itemval is not defined ..how u got output ?
What u have done , have u got ur output
YOU ARE A GENIUS BHAI!!!!!
Hi Vinod, tag is not working,I am not able to put elements in new line.can you please suggest
ghajab va va maja agaya
maja aagya baney mein first time, i can think how system will work, thanks @thapa bro
onclick and onslect use karke aapne jo del action perform kiya he using props sir smagh me ni aaya
can any one please explain
there is a small problem if you click + without typing anything you are still going to get delete button
Learned a lot from this video!!
Thank you sir for this videos from Nepal🙏🙏🙏
you are just Awesome.....nothing else
way of teaching is amazing...keep it up.
you are a hidden gem bro
Ish channel se samjh me aa jata hai..but Code k liye link me click krte hai.. kuchh nhi milta hai...sirf Ghumate rahta hai..😢
thank u bhaiaaa.. love from bangladesh ... please make more projects with mid nd advance functionality
Thapa bhai ap smjhate badhiya ho baki bana kr sb dikha dete h YT pr but smjha nhi pate sb
You are very very great videos
Woh cross wala icon nhi arha ?????? Anyone help me out?
thnx thapa love from bangladesh
Your videos are amazing 👌 Can you please share the CSS file for this tutorial in the comment section
your teaching is awesome
Vinod Sir you are a great teacher.
sir you are my favourite teacher love u sir
so good presentation this video is so helpfull to me
what a teaching brother super.
i learned a lot from this video.
Please send me all code
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 ....
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 ?
Awesome Awesome Awesome Awesome Awesome Awesome Awesome Awesome........ Thank you thapa sir for this project...
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?
when we return values in java script react then do the values automatically get display ! dont we need to write anything
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
Ha bhai answer mila mujhe bhi ye doubt hai.
Boohat hi kamal ki video
Sir I find your every video interesting and I am from nepal.
boom gys its work😍😍🥰🥰🥰🥰🥰🥰
bro your video is amazing. you don't share CSS file source code. can you share it? love from pakistan
yeah it was really a nice lecture but at last for deletion part i wasnt able to understand.
great video ! Thanks,
Why do you use onselect() with deleteitems().? this is confusing. Can we do same thing with only deleteitem()?
Exactly, I also want to know.
I guess because deleteitems() value stored in onSelect() hope it will help.🙏
ruclips.net/video/kMKzzBMEqh8/видео.html Check this if you're interested in HapiJS. Full code given
Onselect is not a method it is just an attribute, that is holding function.
@@manilavaswani154 onSelect was custom attribute. Not to confuse it with onSelect event handler in HTML. Though that was what creating too much confusion here in the video
Broo🔥you are awesome 🔥
Can you tell us about Redux !!
there is bug in this project. if you have not type any item and click add button it will add empty item in the array :"
solution->
const additem=()=>{
if(input!="")
{
Setiinput((old)=>{
return [...old,input];
})
Setinput("");
}
else{
alert("please first write note and then add");
}
}
Bhai very helpful series. Thank you so much for making this series with projects.
One of the best
You are amazing better than udemy
A great video to learn new things. Please make new awesome projects like this.
one more thing is missing that when the input list is empty and click on the button it can add an empty list on the cross button how we can manage this
You could do a if else condition for this issue:
if(task === ' ' ){
alert('Please enter task to save');
}
else{
setItem((preValue) => {
return [...preValue, task]
})
}
KHATAM BAAT
great explaination sir
Thapa sir is the best
Bro What Should I learn first in Javascript - What is the roadmap.
Check my JavaScript series roadmap miljayega
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
Bhai shandar video hai yar
If I refresh the page all the list items are gone
How to avoid that
I want to refresh the page but the list items should be there....
bro got solution?
Thanks, I made it!
Excellent,
I want to add focus on input field after click on Add button, please let me know
awesome sir ,nice video
Bro css ka code de diya karo it is ok if you are not give the js code but you should give the code for styling
aray bai kya hee bat ha ❤❤❤❤❤❤😘
Thank you so much sir..
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
Hi thapa sir
Agher component na bnou tu sara kam ak he component ky ander karo tu item delete nahi huraha kindly guide me
Bhai editing k liye kya use krte ho. I m inspired from you
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
sir,select me argument diya toh wo delete ke andar kese pass ho gya pls btaao ??????????
kafin messed up hain ye chi
i love u bro u helped me alot
sayad jab maine pure javascript me todo-list banaya tha vo easy laga tha ab iss prakar se banakar dekhta hu 🤔🤔🤔
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 ?
Your videos are very helpful brother, Keep up the good work :)
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.
Hello sir mongoDb se data fetch kaise kare reactjs me please help me sir
Great tutorial 🙇♂️
Simpler way of writing delete function with the slice method
const deleteItem=(id)=>{
console.log(id);
const updatedElements = [...elements.slice(0, id), ...elements.slice(id+1)]
setElements(updatedElements);
}
kaint a bai ji sirra
sir without type any items or text click on (+) button delete icon button add-in list , this is an eerror
how to fix it
Sir you havent explain how to play with the form data. For example, how to do front side validation, form data submission to database etc?
that is the backend part. And React is used for front end
ruclips.net/video/kMKzzBMEqh8/видео.html Check this if you're interested in HapiJS. Full code given
Can we use replace method for delete ?
osm video but facing (oldItems.filter is not a function) this typ off error can you help me try to short oout
Thapa Ji Brilliant... Outstanding. Love to watch your videos and really inspiring me lots.
Hiii Thapa Sir,
If we want to make a component of complete "" so how we can map it ?????
is just odered list.you have to change the values of .You can simply create component which contains the list then change the list element into an array or object then use the mapped array in main file using {}.
ruclips.net/video/kMKzzBMEqh8/видео.html Check this if you're interested in HapiJS. Full code given
Will please tell me that how to add Date after the list. current date of adding that list name...