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

































*********** CLICK HERE TO WATCH *************




















***************** MUST WATCH VIDEOS ******************











Make Website Responsive Using Media Queries in One Video in Hindi | Web Design Tutorial in Hindi



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,

[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 🙏

[adilrao]

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

[qutbuddinkhan]

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

[lavish]

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

[snehapyne]

There is many YouTube 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.

[PrakashKumar-ykms]

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.

[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

[ChandraTech]

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

[manojbadiger]

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.

[nter__ment]

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.

[rohitsinghk]

Mst hai bhaiya ji filter wala part gjb laga
: )

[amityadav]

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

[talhashamim]

boom guyze with great knowledge project

[ZahiidKhan]

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

[EWorldHub]

Superb Bahot Hard kya Bahot Hard Kadak.

[programmer]

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

[himanshuvaishya]

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

[BalconyMakeoverIdeas]

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

[abhishekkanoujia]

*{
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;

}

[SumanMagar-yx]

Thank you sir for this videos from Nepal🙏🙏🙏