Google Keep App clone with ReactJS in Hindi | React Project in Hindi #50

Welcome, I am building a Google Keep App Clone with pure React js in Hindi in 2020.
➡️ Source Code Link: www.thapatechnical.com/2019/0...
************ 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...
➡️ Object Destructuring in ES6 in JavaScript in Hindi: • ES6 Tutorial #7: Objec...
➡️ React DevTools & Source Code Link: www.thapatechnical.com/2020/0...
➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: • React JS Tutorial in H...
➡️ ReactJS JavaScript Array Map Method in Hindi with Example: • ReactJS JavaScript Arr...
➡️ Fat Arrow Function in JavaScript in Hindi 2020: • ES6 Tutorial #8: Fat A...
➡️ #23: Array in React JS in Hindi | React JS Project Netflix App #2 in Hindi in 2020
➡️ Array in JavaScript in Hindi: • JavaScript Tutorial in...
➡️ #22: React JS Project Netflix App Part #1 in Hindi in 2020: • #22: Props in React Js...

➡️ Install VS Code for ReactJS LINK: www.thapatechnical.com/2020/0...
➡️ 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]

I really hope u all enjoyed my video on Google Keep App Clone with pure React js in Hindi in 2020. ➡️ ReactJS Tutorial in Hindi 2020 Playlist Link: kzbin.info/aero/PLwGdqUZWnOp3aROg4wypcRhZqJG3ajZWJ ➡️ Source Code Link: www.thapatechnical.com/2019/08/how-to-get-source-code.html

[@dewtome9220]

appka vo node js in one hour vala video acha tha par kafi jise rah gayi thi usmein isliye jaise app ne reactjs pe series banai vaise hi node js aur express pe bhi banyo pls

[@hridoybanik639]

Plz make video on about google maps in reactjs

[@sumitbisht5049]

I loved it, all your video's are amazing. Please create a complete tutorial series on angular 8, many of my friends want to learn it.

[@nitishbhardwaj8878]

Hii bro mujhe kuch help chaiye apkiii

[@kanikabagri247]

Sir, Please make tutorial on Redux as well. This is my humble request to you. I would be extremely thankful to you, Sir.

[@adityaojha2701]

Really liked the way how you first taught basic To-Do-App then came to this project.

[@fearflik]

css code - *{ box-sizing:border-box; padding: 0; margin: 0; } .header{ width: 100%; line-height: 100px; background-color: #f5ba13; display: flex; justify-content: center; align-items: center; padding-left: 50px; color: white; box-shadow: 5px 3px 15px -5px rgba(0,0,0,0.3); } .main_note{ width: 500px; padding: 15px 10px 5px 10px; margin: 20px auto; } .my_notes h1{ color: #34495e; } .my_notes p{ color: grey; } .form{ min-height: 50px; color: #ecf0f1; padding: 15px 10px 5px 10px; box-shadow: 3px 5px 15px -5px rgba(0,0,0,0.5); border-radius: 10px; position: relative; } input{ width: 100%; line-height: 30px; background: transparent; border: none; outline: none; font-size: 1.5rem; margin: 10px 0; font-weight: bold; } textarea{ width: 100%; line-height: 30px; background: transparent; border: none; outline: none; font-size: 1rem; margin: 10px 0; } .MuiButton-root{ width: 30px; height: 50px; position: absolute; bottom: -28px; left: 400px; cursor: pointer; background-color: #fff !important; border-radius: 50% !important; } .MuiButton-root .plus-sign{ font-size: 45px !important; font-weight: 900; color: #f4b000; cursor: pointer; z-index: 222; background: transparent; } .MuiButton-root:hover{ background-color: #f4b400; } .MuiButton-root:hover .plus-sign{ color: #fff; background: transparent; } .note{ background: #fff; border-radius: 7px; box-shadow: 0 2px 5px; padding: 10px; width: 240px; margin: 16px; float: left; } .note h1{ font-size: 1.1em; margin-bottom: 6px; } .note p{ font-size: 1.1em; margin-bottom: 10px; white-space: pre-wrap; word-wrap: break-word; } .note .btn{ position: relative; float: right; margin-right: 10px; border: none; width: 50px; color:#f4b400 ; height: 50px; background: transparent; cursor: pointer; outline: none; border-radius: 50%; } .deleteIcon{ width: 0.7em; height: 0.7em; } .note .btn:hover{ background-color: #f5ba13; } .note .btn:hover .deleteIcon{ color: #fff; } footer{ width: 100%; position: absolute; bottom: 0; }

[@kchallengewithvideo-zt2nf]

Thanks Bro

[@nihitverma584]

I dont think anyone can expalin this easy. Very informative video. Thank you 😀

[@John12685]

Good job Sir. pls keep it up and bring some more projects. May be one or two some relatively complex and large as well

[@rahulnath3244]

Congratulations sir in React js 50 video ........

[@user-yj1cg6pu3o]

Thank you Thapa ji for doing this awesome project with a simple explanation.

[@mayankverma3684]

thankyou sir ji bahut Mehnat Karna pada Purane videos, Dekhe tab jake Aaj Achhe se to do list Bana paya hu.

[@pratiksaria5830]

Khatra Video cha Thapa Dai.

[@syedsaad317]

awesome thapa bhai... i made the interface (not ditto) but i faced error in js because i tried to make this like the previous list.. but thanks to you and this video i made it ..❤😍

[@thelasttimeitookashowerwas7069]

this is nothing but an improved ui for todoapps :/

[@DEEPANSHU_NAG]

Awesome explanation 👏🏻💯✌🏻 Thanks 🙏🏻

[@akhilkumarsingh5041]

source code 99rs ka hai kisi ko collab karna hai 10 log hio jaye.. to 10 rs ka padega source-code.. reply karo fast .. 10 person jinke pass g pay ya phonepe

[@kamaljyothibattula1687]

bcz of you u have learnt lot of things thank you

[@neelpatel4012]

It's to complex and so root method By the way your playlist on react is to good😚

[@rjdon6742]

Bro if u have time then plzz make the video on ecommerce.... Way of teaching is excellent 👌 I understand ur all concept how u elaborate all concept in detail.. Thnx brother 👍

[@programmer1783]

thanks you bro for such great productive video

[@publicevents3467]

nice job vinod sir I'm watching your react series, you explained much better any other than that. but by watching this video I got that your birthday is in January!

[@EWorldHub]

Superb.... Best Tutorial

[@rajbannasa7662]

we want more project sir , thank you so much sir

[@shaheensiddiqui1952]

sir you are to much help full for us thankyou so much sir we greatefull to you

[@themystefyingfacts5115]

Great bro. Love from nepal.plz heart this comment

[@kamalsharma2839]

Can somebody explain how we are able to use className in custom elements of Material UI, though that isn't possible in React? As far as I know we can use className in JSX but not custom elements

[@MANPREETSINGH-ft9hd]

This is great and you also bro

[@rajbannasa7662]

thank you so much sir for ur efforts

[@leadingedgebusinesssolutions]

i'm following your tutorial series . i just want you make a vedio in which you customize a theme for example make management system first tell the requirement what are the requirements to develop a management system. your have good content for making website taught enough for fronend.

[@aasrivastava5851]

Hey Vinod Bhai there are no videos on submitting data to the server. And or performing CRUD operation from server side data.

[@surajjadli1747]

starting with v7.9.0 we dont need to import React from react

[@Shoaib_Khan9272]

I am on 20:21 and i have created the project and now i dont wanna watch the full video .Shouls i watch or not??

[@arjunzundala8247]

Aap ke sare videos bahot achhe hote hai Agaar aap android pe videos banaenge to bahoy sikhne ko milenga Please please please android pe video banaie....me apko pehle bhi request kar chuka hu.....please

[@ucduong2288]

You can edit item ??or Use localstorage help me from 🇻🇳

[@anirbanrubel]

Nice tutorial.. Can you make some video on firebase.. Saving data into firebase from front end then retrieve those data from firebase into admin panel.

[@okeyshourovroy2769]

Very helpful. Please make some more Projects

[@anshumansharma1069]

thank you so much sir ❤️🥺

[@atharvakulkarni2024]

Project should be complete from scratch including styling and all

[@fatimashehzadi8604]

Sir! Thankyou for great video can i get extension name you installed for auto implying parenthesis and semi- colon at the end of expression thanks in advance

[@BhaiBhai-kf8ct]

@Thapa Bro Awesome Bro keep it up

[@akhileshmishra5559]

52:36 can we use arrow function with in an element .... Without writing it spaerately..😊

[@qutbuddinkhan3155]

Thanks From Balrampur UP India

[@mohith_poojary]

I assume u may have good experience over React so i am asking doubt which i am facing now and i couldn't solve. making project on ecommerce platform fetching data from json file through axios.get(), but it wont update variable immediately which couses error reaching further line due to unavailability of data at initial loading but works fine after i make changes in catagory section though i have mentioned empty dependecy in useffect. How do i make it update immediately do that when it reaches next line it should update immmediately and process further as per the required data

[@kavyapokharel4714]

Hey bro, appreciate your videos. Also, I really wanted you to make a video on how to mak website secure, (ie. from http to https )

[@SAADKHAN-qh3bp]

bro file save krna pa auto set kasy ota ha kia extansion ha is ki? plzzz bta den

[@karansiddhpura7814]

Bhai ager new project banana ho tao fir se terminal me jake new project create karna padega na?

[@SumitSingh-ux6zd]

Any idea why it happens when I click to add after writing title and content, note component opens and close automatically in half seconds. I tried many times after writing the code same to same but it happens again and again. Please help if anyone know about this problem.

[@amirhassan6549]

Ye to very nice hy ye to meri pasand hy

[@khushbukumari6000]

Thank u so much sir your all video very helpful for me

[@ThapaTechnical]

So nice of you

[@khushbukumari6000]

@@ThapaTechnical 🙏🙏

[@anikettiwari6885]

@thapa Sir I have one doubt why can't we check the value of note variable inside the setAddItem function. What I mean is I tried to place the debugger inside the setAddItem and just wanted to check the value of the note. But when I try to do it, it throws an error. Even though if I access note variable outside the setAddItem it works fine why is it? The reason why I am asking this questionbecause the return [...prevVal, note] statement works perfectly fine but when adding a debugger and checking the value of "note" it is throwing an error const addNote = (note) => { setAddItem((prevVal) => { debugger return [...prevVal, note] }) }

[@muhammadjawad9341]

Check mine with some modifications learned from thapa : kzbin.info/www/bejne/gKusYoSgn6-DnJo

[@dynamicTraderPriyansh]

Brother Thanku for this video but it have a error When you click add button without fill data it add empty box please Help

[@sailendrachettri8521]

Now we are moving to the advance concepts :)

[@yashk342]

Sir i am from bangladesh love you sir.

[@seemapatel4405]

All videos are awesome. It's very helpful for me Please app new videos class bases banao na nd lifecycle

[@muhammadjawad9341]

Check mine with some modifications learned from thapa : kzbin.info/www/bejne/gKusYoSgn6-DnJo

[@jaydevkalariya373]

After doing refresh all notes are vanishes,is this problem is with my code only or all suffers from this problem?

[@ZaraJaved606]

i need help my note div is creating 2 similar div i dont know why

[@mahaburrahman1666]

Love ❤ this expression :) 3 2 1 ...Boom😊

[@RahulSoni-xt5ur]

note div is overlapping what's the css?

[@effectivelines8152]

Amazing work

[@souravbhagat1358]

Bhaiya please make a vidoes lectures on Angular or Even Java programming...if possible

[@darshanadey4696]

Hi...please make more websites and web applications using react and redux...

[@nehayadav2537]

Please tell how to add local storage to see the previos notes we have created

[@preetikembale980]

What is refresh icon side of write note?

[@ArbazKhan-gn4xo]

if anyone facing array of map is not defined after delete any note then write array filter method inside return statement

[@manasvirunwal5634]

Sir... You're great... Pls react native pe playlist banaiye na Sir

[@srrgmail]

isme jo note likhenge wo kaha save hoga? computer pe?

[@dewtome9220]

bhaiya pls ek node js pe series banyo aur experss ki bhi taki hum mern stack development sikh sake

[@mazharimam9216]

i have only one doubt why we have used name like const name...though we want only values therefore we used that event.target.value but why name

[@GoogleUser-vt7zl]

meine ek container banaya or us me card rakha ab jab map method woh render ho ra hai to container bhi bar bar render ho ra hai or mein sirf card render karna chahta ho kaise karo help karo yrr?!

[@sudhanshusharma9888]

i got an error "Cannot read property 'map' of undefined".

[@prashantkumar627]

Great ❤

[@navinkandpal6767]

Awesome 👍

[@imran22]

May i know how can i add pictures and links to the keep thank you!

[@AshutoshSingh-ym9vi]

Awesome project

[@kanishkasaraf1646]

appne createNote component me form tag ka use kiya h ?

[@samqureshi9415]

Bus aab bade bade projects k video he expect kar rahe hai .

[@miss_aishya]

Can you make updated Angular tutorial on latest version? With advanced concepts like API integrations and CRUD operations in angular app.

[@__Y1a2s3h4__]

Why you didn't used es6, react,redux vscode extension? Btw great video

[@StoriesChangedLife]

sir please tell how that notes coming side by side, i stuck

[@GauravKumar-dw2ml]

Page reload hone kr ye sab chala jayga uska kya ?

[@Sana.s_YT]

How come this is the exact replica , it diesn't have pin the notes like google keep which is a very important thing to add

[@shelendrasingh2301]

Awesome video sir.....

[@mohith_poojary]

I assume u may have good experience over React so i am asking doubt which i am facing now and i couldn't solve. making project on ecommerce platform fetching data from json file through axios.get(), but it wont update variable immediately which couses error reaching further line due to unavailability of data at initial loading but works fine after i make changes in catagory section though i have mentioned empty dependecy in useffect. How do i make it update immediately do that when it reaches next line it should update immmediately and process further as per the required data

[@ljubicasamardzic7819]

It would be great if you created another video to cover changing the note title or content.

[@muhammadjawad9341]

Check mine with some modifications learned from thapa : kzbin.info/www/bejne/gKusYoSgn6-DnJo

[@effectivelines8152]

Thanks a lot

[@AtechSeva]

plz use wordwrap in vs code for better understanding

[@athiraprasannakumar659]

there is some issue which i am facing, when i click on add button the content i.e the note box comes & then disappears

[@muhammadjawad9341]

Check mine with some modifications learned from thapa : kzbin.info/www/bejne/gKusYoSgn6-DnJo

[@tusharsharma6129]

Dudee, I copy-pasted everything from your code but still it is not working properly,

[@Raga_Rahul]

Awesome.. but why not hold data permanently.

[@prernasaxena9412]

Hey can you please make a video to implement share button as well.

[@darshanadey4696]

Hi Vinod, this is such an awesome video on google keep but please make css part available for us to practice it.

[@dhrumilpatel2905]

* { box-sizing: border-box; padding: 0; margin: 0; font-family: "Josefin Sans", "Arial Narrow"; } .header { width: 100%; line-height: 100px; background-color: #f5ba13; display: flex; justify-content: start; align-items: center; padding-left: 50px; color: white; box-shadow: 5px 3px 15px -5px black; } .main_note { width: 500px; padding: 15px 10px 5px 10px; margin: 20px auto; } .my_notes h1 { color: #34495e; } .my_notes p { color: gray; } form { min-height: 50px; color: white; padding: 15px 10px 5px 10px; box-shadow: 3px 5px 15px -5px black; border-radius: 10px; position: relative; } input { width: 100%; line-height: 30px; background: transparent; border: none; outline: none; font-size: 1.5rem; margin: 10px 0; font-weight: bold; } textarea { width: 100%; line-height: 30px; background: transparent; border: none; outline: none; font-size: 1rem; margin: 10px 0; } .MuiButton-root { width: 30px; height: 50px; position: absolute; bottom: -28px; left: 400px; cursor: pointer; background-color: #fff !important ; box-shadow: 5px 5px 15px -5px black; border-radius: 50% !important; } .MuiButton-root .plus_sign { font-size: 45px !important; font-weight: 900; color: #f4b400; cursor: pointer; z-index: 222; background: transparent; } .MuiButton-root:hover { background: #f4b400 !important; } .MuiButton-root:hover .plus_sign { /* background: #f4b400 !important; */ color: #fff; background: transparent; } .note { background: #fff; border-radius: 7px; box-shadow: 0px 2px 5px #ccc; padding: 10px; width: 240px; margin: 16px; float: left; } .note h1 { font-size: 1.1em; margin-bottom: 6px; } .note p { font-size: 1.1em; margin-bottom: 10px; white-space: pre-wrap; word-wrap: break-word; } .note .btn { position: relative; float: right; margin-right: 10px; color: #f4b400; border: none; width: 50px; height: 50px; background: transparent; cursor: pointer; outline: none; box-shadow: 3px 3px 15px -10px rgba(0, 0, 0, alpha); border-radius: 50%; } .deleteIcon { width: 0.7em; height: 0.7em; } .note .btn:hover { background-color: #f5ba13; } .note .btn:hover .deleteIcon { color: #fff; } footer { width: 100%; position: absolute; bottom: 0; text-align: center; }

[@darshanadey4696]

@@dhrumilpatel2905 Thankyou so much for the help.

[@muhammadjawad9341]

Check mine with some modifications learned from thapa : kzbin.info/www/bejne/gKusYoSgn6-DnJo

[@awadheshsharma7872]

@@dhrumilpatel2905 thanks bhai

[@udaypatil1250]

@@dhrumilpatel2905 ty

[@debashisadash4611]

bro super yarr please upload some heavy projects.

[@divyatulasik9442]

Bro,am looking for django projects in python kindly help us similar app for us

[@rahulbaghel1680]

mera ni chlra h bhai onclick + pr krne m note m display ni hora sb sahi h tvi koi help krdo yar

[@bspanda98]

Please make a website using firebase db please bro i view your all videos and subscriber too

[@umerislamictv]

apne her video mea kaha hay keh code discraption mea given hay ,jeb hum waha jaye to wo nahi melta

[@iAm_Rohit_Raj]

10:30 Move that "image" folder to public directory, then we can access that image folder without importing it.

[@kamaljyothibattula1687]

but only minus is u need to explain the css part to bcz without css exaplantion it is not good

[@mohdaman7958]

sie app kinta padeho aur kitne years ka experition hai

[@PrakashYadav-ur8or]

Your lectures are awesome but this one is incomplete without css part.

[@Superak07]

if anyone getting the refresh problem while clicking on submit button, You can prevent it by writing event.preventDefault() as the first line of your onClick function. this problem occur due to default behaviour of button on submit

[@honeysengar2627]

thank you so much man

[@piyushmanglaniarts9027]

Sir , ismai delete karne par pura page delete ho rha hai , code bilkul same hai apke jaisa phir bhi delete kaam nhi kar rha plz sir kuch batao kaise solve Karo isko ?

[@amritraj658]

If I refresh page all data is cleared... To prevent from this what I have to do....

[@SubhamKumar-9009]

you have save your data in local storage..

[@Codehunting]

Hi bro, is google keep me items ko edit ka bhi bta do bhai, maine khud se bhut try kiya hai but i'm not getting success. So please help

[@comicinparadise8043]

Inside file app.jsx, in line number 21,the function should " return " some value . I think u forgot to mention that..otherwise great vide

[@pitamberrawat9141]

Thanks bro it was helpful